Introduction
We will spend time making an online experience that connects with a database. We will learn how to pull structured data that is not yours and use it to fuel a website.
Project
Part 1: Collect (or create) a collection of 50 to 100 items. Your collection should have at least five different data types affiliated with it, and should be as specific as possible. There should be a visual consistency between the items, and should have a cohesive story to it. For example: If your collection is “Dogs in Central Park” you might include: photos of the dogs that you take on an iphone, the dog’s name, the dog’s breed, the GPS coordinates of where you saw the dog, and a brief description of the encounter. This is nice because there are multiple different types of data that you could use to elaborate on.
Part 2: You will upload your collection into an API chosen by your lab instructor.
Part 3: Swap your collection with your classmate.
Part 4: Design a website for this collection connected to the API.
For this project, we’ll make use of an API to design and build a website to contain and display your peer’s content. Keep in mind that you’re not designing a fixed, unchanging website: you’re designing a system that can expand or contract to show this collection as it changes. Always think about WHAT you want to do and WHY, and then HOW.
Considerations
Does the type of content give form to your site?
How can you tell a story through a curated set of text, visuals, interactive experiences?
What kind of different data types can you use to add specifity and interest to your project?
Does the design of the site somehow respond to new content?
Rather than being a neutral vessel, how can the design that you use to organize your collection change when the collection itself changes? For example, do colors on the site change in response to the kind or amount of content posted to the site?
Does the arrangement of elements or the grid change? Does the site’s navigation change to highlight the most current content?
Objectives
- To gather and organize a collection of data
- To design flexibly for content that we can’t control
- To reinterpret eternal sources of data into narrative experiences
- To connect and use structured content from an API (Application Programming Interface)
Requirements
- A title for your collection
- An about page or section containing a brief text about your collection + designer credit
- Include all 50-100 media items
- Your site must have some javascript element that enhances the experience and relates to your collection in a meaningful way.
- Your website should have at least two ways of viewing your collection.
- These can be filters/subgroupings, sorting methods, list, thumbnails toggle, etc. .
- The site that houses your collection must in some way make visible or acknowledge the web-specific context.
- Site favicon
- Must be responsive and function on a mobile screen
Student Examples
Schedule (Week 7–12)
- 03/22 Review: Ideas. Assign: Iteration.
- 03/24 Review (1–9): Iteration. Assign: Implementation.
- 03/29 Review (10–18): Iteration. Assign: Implementation.
- 03/31 Review: Implementation.
- 04/05 Review: Implementation.
- 04/07 Review: Implementation.
- 04/12 Review: Implementation. Final designs in Figma
- 04/14.Review: Implementation. Programming
- 04/19 Review: Implementation. Programming
- 04/21 Review: Implementation. Programming
- 04/26 Final review.