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: Prepare a presentation exploring two different collections of texts you're interested in developing. 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, collected using are.na (https://www.are.na). Present your ideas as a slideshow for class critique.

Create an interactive sitemap for your website, mapping out all the pages and how they connect to one another. Use Figma to build the interactions and any tools you're comfortable with for design sketches. Your sitemap should be shareable via link so we can navigate it together and provide real-time feedback. Post Figma link to class Discord.

Choose a website you love and recreate it pixel-perfect in Figma. You must use auto layout and maintain organized design in your Figma file. Post the link to your Figma file in the Discord channel.

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

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.

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

Implement mobile responsiveness with multiple breakpoints across your website. Post the 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.

What We've Learned from Dieter Rams—and What We've Ignored (PDF) – Group 1 will present next class. Also review: Dieter Rams' 10 Principles of Good Design

Participate in a second round of blind reads, reviewing both mobile and desktop views. 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.

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.

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.

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

Charles Broskoski on self-discovery upon revisiting things you've accumulated over time – Group 2 will present next class.

Build a desktop-first prototype of your homepage in Figma, Webflow, or code. Focus on layout, typography, and core interactions. Also include a basic sitemap showing how pages will connect across your website.

Based on feedback from the blind read session, 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.

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.

Write a detailed review of a randomly assigned classmate's website. Provide constructive feedback on design, usability, content organization, and responsiveness.

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.