Print πŒ†

Overview

  • In pairs of 2 create 50 buttons that respond to :hover or click
  • Still working in pairs, choose a single action (Click, Scroll, Hover or Resize).
  • Develop a microsite which uses thisβ€”and only thisβ€”action to create a multi-sensory experience for users. Determine how best to work collaboratively to leverage your strengths, while engaging in all aspects of the project

The aforementioned actions largely dominate the how we interact with content on the web. They are subconscious and ubiquitous means to an end. Because of this, their use has become overlooked, we know what to expect when we click on a link, scroll down a news feed, or hover on a button. But these expectations do not define the potential that these simple activities possess. For this project you will explore them not as typical ways to get to content, but as the content themselves. In a series of short exercises, you will dive deep and analyze each experiential consequence before, during, and after an action and push them towards profound results.

Use this prompt to push your chosen action to do something it would not typically do and you may not know how to do. Do not concern yourself with 'best practices' or how things 'should' work, but experiment with alternatives and stumble upon anomalies. A good project in this sense is not code-heavy and complex but nimble in how it connects simple scripts to create rich and engaging results.

This project dovetails into guest designer / instructor Minkyoung Kim's workshop kicking off 10.26. More details to come.

Learning Outcomes

  • Increase your familiarity, comfort, and knowledge of foundational actions.
  • Introduce or expand knowledge using javascript to create dynamic experiences.
  • String together a complex, compelling, and engaging experience from a simple act.
  • Challenge and analyse the status-quo of how actions are typically implemented and how they might alternatively be used.
  • Break down sensory barriers to create multi-sensory and spatial experiences.
  • Explore activating unexpected elements on the screen.

Requirements

With a partner:

  • Create a page with 50 buttons that respond to :hover or click.
  • Develop a microsite showcasing one action (Click, Scroll, Hover or Resize) to create a multi-sensory experience.

References

Past Examples

Click

Scrolling

Resizing

Mouse Move

Reading

Calendar

Week 1
T – 10.09
    Kickoff Project
    Share 1 novel interaction findings
    Begin exercise in class
        (walkthrough templates + work time)

TR – 10.11
    Present 50 Results Charrette Outcomes

    In groups choose 1 interaction, and
    start sketching sites

    After you've chosen your interaction do
    the following
        * come up with 1 idea the subverts
          expectations
        * 1 that magnifies
        * 1 that makes hyper-specific
        * 1 that makes profoundly general.

Week 2
T – 10.16
    Review refined design proposal for
    Single Action website created in 
    graphic software If you are ahead of
    schedule, start setting up your
    design in code 

TR – 10.18
    Working Day / Technical feedback

Week 3
T – 10.23
    Final crit

TH - 10.25
    Visiting Lecturer Minkyoung Kim

FR - 10.26
    Workshop with Minkyoung Kim

Project

Step 1

Due Thursday Oct 11

50 Result Charrette: working in pairs develop a single page website which documents 50 possible buttons.

Step 2

Due Tuesday Oct 23

Still working in pairs, choose 1 of your results from the charrette and expand it into a full-fledged microsite proposal. Focus on how simple events, and minimal code, can be sequenced together to make a surprising and rich website. Remember, the 'content' should be the interaction.

Project continued during workshop with Minkyoung Kim.

Grading

  • The project outcome portion of your grade will be divided equally between: 50 Result Charrette, Single action website, and workshop outcome.