DES 157 / STUDIO 4: TIME IS ON MY SIDE / 5 POINTS

Objectives

• Explore the concept of time-base through a creative interface that considers time
  as a concept (such as revolutionary time).
• There are many ways you could approach this…looking outward (for example
  creating timelines, visualizing poetry or considering politics), or inward
  (for example exploring your own personal daily schedule). Consider visual interfaces that are indicators of time in metaphoric ways, such as tree rings, marks on children's walls tha record height, the accumulation of snow
• A practical alternative is to create an interface for the upcoming Valentine's holiday
• When you are designing interactivity, ask yourself
  what you would expect if you were using this site
• You, as the maker, must define every aspect and every detail of the
  UI (User Interface), IxD (Interaction Design) and UX (User Experience)

File structure

• Note: Use the template files found here
• Create a folder called "studio4" inside your main web folder

index.html, style.css, and script.js (inside the studio4 folder)

• Sketch on paper first and label each sketch with semantic html elements
• Recommended: After your paper sketch, create a digital sketch in PS, AI or Sketch
• Create a visually appealing interface
• Consider building the interface in a way that intrigues visitors, and also is visually cohesive
• Use js to define behavior. Code events such as mouseover, mouseout
  and click to change css (including animations, transitions and transforms)
• Include at least three timers using setTimeout() that show "tooltips" delayed feedback
  on mouseover an interactive element without clicking by setting timers
• Creatively include at least one time-based element from the following list:
  setInterval() , requestAnimationFrame(), Date(), <audio> or <video>
• Add a <footer> that includes an html validation link and a css validation link:
• <a href="https://validator.w3.org/check?uri=referer">Valid HTML 5</a>
• <a href="https://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
• Example: valid html | valid css
• Note: The validation links will not work until the page is uploaded
• Use external css and external js. Save files as index.html, style.css, script.js,
  in the studio4 folder (keep the html, css and js on the main level of the studio4 folder)
• Update the portal to link to studio 4

blog.html

• Add a blog entry (including header, subheader, and date) to your blog, that includes a screen capture of your final design for studio 4 and an explanation of how you connected your various visual elements in the user interface with the interactive/experiential design. List three aspects
  about your solution that you think support effective and interesting interface design

Upload

• Make sure your code is well formatted (beautified) before uploading
• Submit the URL for this studio to the Canvas Assignment
• Commit all changes to your github repository (studio4 folder, updated portal and updated blog)

GRADING:

• sketches: .5
• semantic markup (validates): .5
• proper css (validates): .5
• validation links: .5
• js: 1.5
• tool tips: .5
• time-based element: .5
• blog: .5
• total points: 5