Unit 1 / Weeks 1 through 5

How do we exist online? What kinds of online platforms do we find ourselves using everyday? How does the Internet shift our worldview, define who we are?

The first segment of Core 2 Interaction will focus on a review of the tools and concepts required for building interactive experiences. We’ll understand how the Internet works, its evolution, and to make and break code as we start with a simple web project. We’ll learn about speculative design and explore how our platforms can create alternate narratives about who we are, and how the world could be.

Moving from observation, we’ll survey the development of interface aesthetics and how the tools we use define the visual language of digital interfaces. For the first project of the semester, we will experiment with typography and navigation to express a non-linear narrative.

Project 1 / Due 02.20

Jorge Luis Borges was an Argentinian writer famous for his short stories that deal with labyrinths, dreams, religion, and mathematical ideas (particularly set theory concepts like infinity and cardinality). His circuitous and meandering prose, full of allusions and vivid imagery, is a good way to think about the web as a network that has many nodes and many connections that continuously folds upon itself. It is the act of navigating through this maze that brings meaning to the web experience.

Read the short story selections here. Choose one short story and set the text using HTML and CSS (JS optional) so that the reader will not only be able to read the story but also experience your interpretation of the story. Use the visual language of the web—hypertext, responsive design, forms, color, divs—to express the meaning of your selected story. We will be emphasizing nonlinear storytelling as well as typographic expression.

Objectives
To build a multi-page website.
To experiment with navigation to convey meaning.
To interpret a story through expressive typography.

Requirements
You must use multiple views to convey this experience — it will be viewed on both large and small (mobile) screens.
You may use no more than two typefaces.
Representational images are not allowed, only text.

Considerations
Point-of-View: What is text? What is writing? How do you see or read this particular text? The most successful projects have 1 point of view that is expressed through a decisive design move (some examples below).
Typography: How does the typography enhance your point of view and help you convey meaning? Pay attention to typographic details: special characters, leading, words per line, etc.
Links: How do internal/external links enhance the meaning of this text?
Scale of the Page: What happens to your site when the browser window is resized? Is it the same? Is it a different design? Are only certain information accessible at certain sizes?
Do not try to illustrate the text. The least successful projects are ones that try to visualize the text literally.

Unit 2 / Weeks 6 through 9

An archive is defined as an accumulation of records, in any medium. Archives exist both to preserve historic materials and to make them available for use. When designing for an ever-evolving digital future, how can we imagine new forms of the immaterial archive?

This type of content can be dynamic—when existing online it can grow, it can be experienced differently from user to user. We’ll explore the history of the archive, how data fuels our websites and how to design an elastic collection. We’ll discuss private and public use of data—from open source to social media and how our data is being used to drive decisions today.

Unit 2 Guest lecturers: Mouthwash Studio, Betty Wang, Giorgia Chiarion, Clinton Van Arnam

Project 2 / Due 03.26

Anything that you have an accumulation of can be a collection. For our next project you’re tasked with creating a collection of 25 to 50 items. It is highly encouraged to either gather your collection through unconventional means, or create this collection yourself through photos, drawings, etc. (consider the various image-making techniques we’ve explored together). 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 “Objects of Desire” you might include: photos of items in window displays you’ve coveted in the last few months, the name and brand of each item, its price, the GPS coordinates or neighborhood where you saw this item, and a brief description of the experience. Once you collect your data, you will organize it into a local database and create a JSON file that houses all the relevant content.

Once you have your data collected and collection organized, you’ll design a webpage that houses the collection. Link the JSON file and pull the data in programmatically to display your content. Consider how the collection is organized and experienced — one at a time, in a grid, on separate pages? Consider if there are groupings within your collection and how the relationship between typography and mixed media can add a visual perspective to your work.

Any time you see a multiplicity of an object, you begin to notice similarities and contexts in a new way. Seeing multiple of an object allows for this kind of in depth research that observing one object does not. The way the object is documented and organized helps direct the viewer on how the object is meant to be experienced.

Objectives
To gather and organize a collection of data.
To understand metadata.
To tell a story through content curation and order.
To experiment with interactions with a collection.
To develop a working relationship of JavaScript objects and data collection.

Requirements
A title for your collection.
You should pull your data in with a JSON file or using JavaScript objects.
Must be responsive and function on a mobile screen.

Considerations
Does the type of content give form to your site?
How can you tell a larger story through a curated set of text, visuals, interactive experiences?
What kind of different data types can you use to add specificity and interest to your project?
Does the arrangement of elements or the grid change?
Does the site’s navigation change to highlight the most current content?
Are there filters or subsections of your data?