Overview

In Project 1 we used the structural reference of a zine to help us organize our research and communicate efficiently and effectively. In project 2, working form the same research we will investigate alternative forms to investigate our topics as a way of exploring the capabilities the browser provides.

Freed from our filesize restriction and taking advantage of the browsers support for audio, video, images, and custom interactivity, we will design and build a site that eschews traditional website behavior and structure. Still responding to our research topics, we need not be so literal in our approaches to project 2. Rather, we'll aim to communicate experientially about our topic, how might you communicate to the user in how they interact with your site, how do you want your user to feel.

You might make an interactive data visualization, a mini documentary on a website, a page that is undergoing some long running metamorphosis, or a game or puzzle relating to your topic area. If project 1 is a zine, project 2 is more similar to a poster, pithy, concise, designed to grab attention and invite the viewer to learn more, while taking advantage of the capabilities the browser provides.

Learning Outcomes

Investigate using the browser as a home for interactive and multimedia experiences.
Practice designing with code.

Requirements

Interaction Microsite exploring your topic

Calendar

WEEK 7
Monday October 10
    Begin sketching 3 different directions for Step 1

Thursday October 13
    Discuss sketches for Project 2 (Step 1 Due)
    Begin prototypes

WEEK 8
Monday October 17
    Work Day

Thursday October 20
    Prototype Review (Step 2 Due)

WEEK 9
Monday October 24
    Work Day

Thursday October 27
    Design Review (Step 3 Due)

Week 10
Monday October 31
    Work Day

Thursday November 3
    Final Crit

Project

Step 1, Due Thursday October 13

Sketch 3 different directions for Project 2, don't only think about visuals, but how might you design different experiences for your user, are they obscure and emotional, or precise and intellectual. Think about the experience you want your user to have, and how you might design for it.

These sketches need not be high fidelity, but they should accurately convey your intention for each experience, show the experience as it changes as a user moves through it. Work through the details.

Step 2, Due October 20

Selecting one of our directions, we will continue to refine the design and the experience in code. Rather than treating the coding as a production step, as we did on Project 1, spend time exploring different interactions and visual design decisions in your prototypes. Work out your design in your prototype with particular focus to the feeling of the interactions and the page itself. Look for unexpected and interesting connections between how your page functions, and the experience you want your user to have.

Step 3, Due Thursday October 27

With the knowledge we've gained from the prototypes, refine your design into its final visual form in a digital design tool. These should be high fidelity designs, though you need not replicate work from the prototyping stage by drawing every possible state. Focus on working through the details of your visual language, and lean on the prototype to communicate the behavior of your experience.

Step 4, Due Thursday November 3

Final Crit on Project 2

References

Past Examples

Control - Stefan Miller (warning, kind of takes over your browser when given permission)
Gamer Girl - Yuki Li

Experience