Overview
- In pairs of 2 create 50 buttons that respond to
:hover
orclick
- 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
orclick
. - Develop a microsite showcasing one action (Click, Scroll, Hover or Resize) to create a multi-sensory experience.
References
- This Click In Time, by Jonas Lund
- What You See Is What You Get, by Jonas Lund
- Over and Over Again, by Jonas Lund
- The Zoom Series, Liat Berdugo
- Recursor, by Brian James
- we will attack .com, by RafaΓ«l Rozendaal
- annoying cursor .com, by RafaΓ«l Rozendaal
- jello time .com, by RafaΓ«l Rozendaal
- Tilting Operations for Small Screen Interfaces
- First Person Tetris
Scrolling
Resizing
Mouse Move
Reading
- Neil Stephenson, Mother Earth Motherboard
- Olia Lialina, A Vernacular Web Pt 2
- Rob Giampietro, I am A Handle
- Bryan Gardiner, The Science of Waiting
- Intro to The Interface pages 75-79 (1-5 of the PDF) by Lev Manovich, 2001
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.