Use js events to create interactive/experiential design. The goal is to get your audience to interact with your interface and learn more about you through a collection of images that represent a personal archive
Option: Scan five random objects that you brought with you to class and create
a visual strategy to connect all objects in a visually appealing interface
When you are designing interactivity, ask yourself what you would expect if you were using this site. Would the buttons highlight when clicked? Would you want to see hover feedback (but remember that touch devices, such as smartphones and
tablets do not have hover states)? What kind of response/behavior would you expect from the user interaction? And what would really irriate you? What do you want to make sure doesn’t happen?
For example, when the user clicks an image, a new div could load over the interface with text about the object (or do something much more creative, engaging and interesting). You are designing the interface and the experience. Have fun
You, as the maker, must define every aspect and every detail of the UI (User Interface), IxD (Interaction Design) and UX (User Experience)
Create a folder called "studio3" inside your main web folder
index.html, style.css, and script.js (inside the studio3 folder)
Sketch on paper first and label the sketch with semantic html elements
Recommended: After your paper sketch, create a digital sketch in PS, AI or Sketch
Note: Always use a reset at the start of your css documents for this class
Make sure to add an appropriate <title> tag
Create a visual strategy to present all images in 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 (optionally including animations, transitions and transforms)
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>
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 studio3 folder (keep the html, css and js on the main level of the studio3 folder)
Update the portal to link to studio 3
blog.html
Add a blog entry (including header, subheader, and date) to your blog, that includes a screen capture of your final design of studio 3 and an explanation of how you connected your various visual elements in the user interface with the interactive/experiential
design. List three aspect 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 (studio3 folder, updated portal and updated blog)
Submit the URL for this studio to the Canvas Assignment
