Assignment 04
Time Interface

Create an interactive interface that shows the passage of time. Your interface should respond to a users input, meaning when it is scrolled, tapped, pinched or controlled in any way by a user interaction it should respond to the gesture. Your design can be functional or abstract, but it must hold the attention of your viewer.

Your final deliverable is an interactive prototype to be viewed on your phone. Design your interface in Figma for your mobile device’s screen size. Prototype your interface with Principle including animations and states. Your interface can be hypothetical, we just need to see proof of concept. When we interact with your interface it should look and feel real.

Consider how seconds, minutes, hours, days and years can influence your design. Time is relative and can be displayed in an infinite amount of ways. Watches form and function relate to the gears which turn their hands. Sundials display time based on the position of our planet relative to the sun. Sand clocks show the passage of a specific amount of time through a vessel. Different cultures have different calendars, like the aztec, mayan, celtic, astrological, etc.

Timeline

2.25.20 — Research, Sketches & Animation Tests
Bring 3 printed slides on 8.5×11" about what’s driving your concept or subject. First, describe your concept in 3-5 sentences. Next, using bullet points explain your interaction step-by-step. Lastly, create a mood board citing references and other visual material that is influencing you. These will help you explain your ideas and give you some support while describing your interface.
Next bring your website sketches printed on 8.5×11". Print them out landscape, make sure to include the device shape for context. If your website scrolls then tile it together. Think through the various states your interface will need to inform the user a response is happening. If you have any animations or interaction tests and other ideas you’re thinking about start testing them and bring them on your phone.
Along with watching the Rafaël Rozendaal lecture below, read Hover States by Rob Giampietro.



3.11.20 — Prototype
Bring your interface prototype to class on your phone. Incorporate animation and other interactive elements, fully functional. Watch this DWP 2016 lecture by Andy Pressman, and read What Screens Want by Frank Chimero.

3.17.20 — Prototype
🦠 Schedule has shifted, a week has been added to this assignment to accomidate for any issues we face while transitioning to online sessions. This week show your prototype as a Principle app. Screenshare your interactions with your interface. Incorporate animation and other interactive elements.

3.24.20 — Final
Screenshare final principle app, including various interactions and states with the interface. Incorporate animation and other elements, make the interface feel alive.

BACKGROUND
Watch the above lecture by Rafaël Rozendaal (NewRafael). In this talk, Rafaël explains how he uses the web not as a portfolio, but as a stage for his art.

Designing for screen combines basic graphic design skills like composition, typography and layout with time based media and interaction. It lives on our desktops and in our pockets. The added value of computation can organize and manipulate data at will. Screens and devices can calculate endless amounts of information instantly thanks to the internet. Interfaces can be a living, breathing thing, constantly changing and evolving.

Websites can be utilitarian, performance, poignant, art, generative, informative, funny...