❧ Exercise 1: Favorite & Least Favorite Sites
Post your least favorite and most favorite websites to the class Discord. Be prepared to discuss your choices with the class next meeting.
Due: Tue, Jan 27
❧ Exercise 2: Interface Research
"Interface is inevitably a product of its culture. It's made in a specific time and place to be used in a specific time and place, and design decisions reflect shared conventions, assumptions and histories from that setting."
— David Reinfurt, A *New* Program for Graphic Design (2019)
For this exercise, research one specific interface design element (e.g., hamburger menus, buttons, search bars, navigation tabs, toggles, dropdowns, modals, tooltips, scroll indicators, loading animations). Collect at least 10 examples showing various approaches to your chosen element.
*Step 1:* Comment on this exercise in Discord with the specific interface element you want to research and your Are.na email address so you can be added to the group channel. (Due: 11:59pm, Jan 27)
*Step 2:* Create an Are.na channel for your research and add it to the Interface Research group channel. Post the link to your channel in Discord.
Due: Thu, Jan 29
❧ Exercise 3: Hello World
Create a hello world website introducing yourself. The website must have at least one hyperlink—this could link to favorite interests, or more in-depth pages that say more about you. Feel free to use your imagination!
Your site should also feature one specific interface element (hamburger menu, button, toggle, search bar, etc.) as a way of "introducing" yourself through that element. In class, we'll try to guess which interface element you chose to represent your "hello world."
Note: the Wikipedia page on 'Hello, World!' has some interesting backstory and is worth checking out.
Due: Thu, Feb 5
❧ Exercise 4: Easter Egg
Design an easter egg for your website—a hidden interaction, animation, or surprise for users to discover. Provide thoughtful documentation explaining your concept and how users can find it, along with a link to your site.
Due: Tue, Feb 10
❧ Exercise 5: Responsive Screensaver
Create a responsive 'screensaver'. You must use at least four elements that are animated, as well as four responsive states. Resources: CSS Animations, CSS Responsive Design.
Due: Tue, Feb 24
❧ Exercise 6: Event Listener
Create a website that responds to one of Brian Eno's Oblique Strategies. The website must include at least one event listener. Pick a strategy from the full list and interpret it through code. Post link to Discord. Resources: Introduction to Events, EventTarget: addEventListener().
Due: Thu, Feb 26
❧ Exercise 7: Error Message
Design an error message for a website—this could be a 404 page, form validation error, or other error state. Post link to Discord.
Due: Thu, Mar 5
❧ Exercise 8: Data Visualization Research
Research and find one example of an interesting, well-executed data visualization and one that is poorly done. Post both examples to Discord with a brief explanation of what makes each effective or ineffective.
Due: Thu, Apr 2
❧ Exercise 9: Everyday Object as Website
Rethink an everyday object and reimagine it as a website. This can be either practical or experimental—consider how the object's function, form, or meaning could translate into a web experience. Post link to Discord.
Due: Thu, Apr 23