Post your least favorite and most favorite websites to the class Discord. Be prepared to discuss your choices with the class next meeting.

Project 1 Brief: Design and build a website that presents multiple texts in a non-linear reading experience. Identify meaningful cross-linking relationships within the content and develop visual strategies to represent these connections. For Phase 1: Collect and organize your texts in an Are.na channel (https://www.are.na). Prepare a design proposal presentation exploring two different directions you're interested in developing—pitch these to the class so we can help you decide which direction to pursue. For each concept, include your vision for typography, layout, and overall visual identity, as well as at least 10 example websites with specific aspects you'd like to take inspiration from, also collected using Are.na. Post both your presentation and your Are.na channel link to the class Discord.

Create an interactive sitemap for your website, mapping out all the pages and how they connect to one another. Include a Figma mockup of your home page showing your initial design direction. Use Figma to build the interactions and any tools you're comfortable with for design sketches. Post your Figma link to the class Discord.

"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.

Build the first live version of your website using code in the browser. Your site should be accessible via a shareable link, allowing for real-time review and feedback. Post the link in Discord.

Sign up for a free Webflow student account at webflow.com/for/classroom. You'll need this for Project 2.

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.

Write a summary of the feedback you received during the blind read session. Identify key insights and implement changes based on that feedback into your project. Post your written response and updated site link in Discord.

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.

Implement mobile responsiveness with multiple breakpoints across your website. Post the link in Discord.

Participate in a second round of blind reads, reviewing both mobile and desktop views. Before submitting, ensure your site has a proper page title (the <title> tag), a favicon, and sharing icons (Open Graph meta tags) so your site displays correctly when shared on social media. Test your sharing appearance using the Facebook Sharing Debugger. Document the feedback you receive and implement revisions to refine your project. Post your written response and updated site link in Discord.

Incorporate feedback from the blind read session and finalize your website for Thursday's critique. Submit thoughtful documentation explaining your design decisions along with a live link to your completed site.

Prepare a presentation with two distinct concepts for your collection. For each idea, describe what you are collecting, your vision for the visual direction including typography, color palette, layout, and interaction elements. Include reference imagery and inspiration. The class will help you determine which direction to pursue.

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.

Based on feedback from classmates, finalize your topic and begin collecting your information. Prepare a brief presentation of your findings including the content you've gathered and design refinements such as typeface, color palette, and layout decisions.

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().

Create a Figma mockup of your homepage focusing on layout, typography, and core interactions—include a basic sitemap showing how pages will connect across your website. Then take a first pass at building your homepage in Webflow. Post both links to Discord: (1) your Figma file with sitemap and (2) your Webflow live site link. You can share them separately or together in a single presentation.

Implement design refinements to your homepage. Additionally, incorporate at least one more page design into your site beyond the homepage.

Design an error message for a website—this could be a 404 page, form validation error, or other error state. Post link to Discord.

Have your project ready for in-class blind reads. Ensure your site is live and accessible for classmates to review.

Based on feedback from the blind read session, implement design refinements to your site. Create your first implementation or mockup of the mobile design for your site. Consider how your layout, typography, and interactions translate to smaller screens.

Based on feedback from the mobile blind read session, implement design refinements across your site for both desktop and mobile views.

Complete the first full draft of your website, including all pages, content, and responsive design across breakpoints.

Incorporate feedback from critiques and finalize your website. Submit thoughtful documentation explaining your design decisions along with a live link to your completed site.

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.

Prepare a presentation with two distinct concepts for your dynamic system. For each idea, describe the data source or API you plan to use, your vision for how the data will influence the interface, and the overall visual direction. Include reference imagery and inspiration.

Helpful API resources: Open-Meteo Weather API, Airtable, Public APIs List, NASA Open APIs, The Color API, Quotable API, New York Times APIs, Google MediaPipe, ml5.js

Create your first working implementation of your chosen API. Focus on successfully fetching and displaying data—this is about understanding how the API works, not final design. Be prepared to demo and discuss any challenges.

Create your first design draft for your dynamic system. This can be mocked up in Figma or coded—focus on layout, typography, and how the API data integrates into your visual design.

Incorporate feedback from the blind read into your revised site. Additionally, prepare a small presentation explaining how you plan to incorporate user data or real-world input into your site's design and functionality.

Create your first mobile implementation or mockup for your dynamic system. Consider how your layout, API data display, and interactions translate to smaller screens.

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.

Complete the first full draft of your website, including all pages, content, API integration, and responsive design. Be prepared for a cold read and class review.

Incorporate feedback from reviews and finalize your website. Submit thoughtful documentation explaining your design decisions along with a live link to your completed site.