Core Interaction

Elastic Collections

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)

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) 100 items in Airtable.

Part 2: Swap your collection with your classmate.

Part 3: Design a website for this collection connected to Airtable’s API.

For this project, we’ll make use of Airtable’s 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?

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?

Requirements

  • A title for your collection
  • An about page or section containing a brief text about your - collection + designer credit
  • Include all 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 v - 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

Schedule (Week 7–12)

  • 03/02 Project 2 due. Introduce: Unit 3. Assign: Lecture + reading.
  • 03/04. Discuss: Lecture + reading. Introduce: Project 3. Assign: Collection.
  • 03/09 Mid-Semester Meetings. Review: Collection. Assign: Collection swap and Ideas.
  • 03/11 Mid-Semester Meetings. Review: Collection. Assign: Collection swap and Ideas.

SPRING BREAK: NO CLASS

  • 03/23 Review: Ideas. Assign: Iteration.
  • 03/25 Review (1–9): Iteration. Assign: Implementation.
  • 03/30 Review (10–18): Iteration. Assign: Implementation.
  • 04/01 Review: Implementation.
  • 04/06 Review: Implementation.
  • 04/08 Review: Implementation.
  • 04/13 Review: Implementation.
  • 04/15. Final Review: Project 3.