Project 1

Non-linear Space Jan 22 – Feb 19

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. Use tools such as sitemaps, navigation, and hyperlinks to map the web experience that allows multiple ways of exploration. Develop a cohesive visual system that unifies the texts into a digital reader with consistent, well-structured architecture.

Phases:

• Phase 1: Design Proposal – Collect and organize your texts in an Are.na channel. 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.
• Phase 2: Site Map – 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.
• Phase 3: Design Site – 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.
• Phase 4: Feedback & Iteration – 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.
• Phase 5: Mobile Implementation – Implement mobile responsiveness with multiple breakpoints across your website.
• Phase 6: Blind Read & Revisions – 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.
• Final – Incorporate feedback and finalize your website. Submit thoughtful documentation explaining your design decisions along with a live link to your completed site.

Due: Week 5, Tuesday (Feb 17)

Project 2

Ways of Arranging Feb 19 – Mar 31

Identify and think critically about collecting and arranging blocks of information—such as hyperlinks, images, text, or other media. Your task is to design and build a website that both houses this information and presents it through a clear, intentional system.

The website must include at least 30 distinct instances of information, organized using a coherent component system. You should consider hierarchy, repetition, variation, and interaction as part of how information is structured and understood.

In addition, you must research at least one HTML element—including its semantic meaning, typical use cases, and behaviors—and make a deliberate, visible reference to that research within the design or structure of your site. This reference may reinforce, reinterpret, or subvert the element’s conventional usage.

The final website must be hosted live and shared with the class. We will be using Webflow CMS in class to manage and publish content, but students who already have experience with other CMS platforms or workflows are welcome to propose an alternative approach.

Phases:

• Phase 1: Design Proposals – 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.
• Phase 2: Collection & Research – Finalize your topic and begin collecting your information. Prepare a brief presentation of your findings including the content you’ve gathered and design refinements.
• Phase 3: Homepage Prototype – Create a Figma mockup of your homepage focusing on layout, typography, and core interactions—include a basic sitemap showing how pages will connect. 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.
• Phase 4: Design Refinements – Based on feedback from the blind read session, implement design refinements to your homepage. Incorporate at least one more page design into your site beyond the homepage.
• Phase 5: Mobile Design – Create your first implementation or mockup of the mobile design for your site. Consider how your layout, typography, and interactions translate to smaller screens.
• Phase 6: Design Refinements – Based on feedback from the mobile blind read session, implement design refinements across your site for both desktop and mobile views.
• Phase 7: Full Draft – Complete the first full draft of your website, including all pages, content, and responsive design across breakpoints.
• Phase 8: Peer Review – Write a detailed review of a randomly assigned classmate’s website. Provide constructive feedback on design, usability, content organization, and responsiveness.
• Final – Incorporate feedback from critiques and finalize your website. Submit thoughtful documentation explaining your design decisions along with a live link to your completed site.

Due: Week 10, Tuesday (Mar 31)

Project 3

Dynamic Systems Apr 2 – Apr 30

Your site exists within a broader ecosystem. For this project, you will design and build a website that responds to real-world data by incorporating beginner-friendly external APIs to drive interaction and content.

The site may:

• Reimagine a ubiquitous design instrument
• Function as a platform for social interaction
• Operate as a narrative or experiential system

At least one external API must be used to update or generate content dynamically. In addition, the site should incorporate real-world data—such as user input, time-based information, or environmental conditions—to inform content, behavior, or design decisions.

You are encouraged to use beginner-safe APIs, including but not limited to:

• Weather APIs (e.g., Open-Meteo)
• Airtable or form-based APIs for collecting and publishing user submissions
• Public datasets or simple read-only APIs (text, images, timestamps, counters) — see Public APIs List
• Time-based or system data (date, time, frequency, change over time)
• Other beginner-friendly options: NASA Open APIs, The Color API, Quotable API, New York Times APIs
• Camera/ML detection: Google MediaPipe (face, hand, pose detection), ml5.js (beginner-friendly machine learning)

You are not expected to build authentication systems or complex backends. Read-only APIs or simple write-back workflows are sufficient. The emphasis is on how data influences interface logic, interaction, and design—not technical complexity.

Phases:

• Phase 1: Design Proposals – 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.
• Phase 2: API Implementation – Create your first working implementation of your chosen API. Focus on successfully fetching and displaying data to understand how the API works.
• Phase 3: Design Draft – 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.
• Phase 4: Revisions & Data Strategy – Incorporate feedback from the blind read into your revised site. Prepare a small presentation explaining how you plan to incorporate user data or real-world input into your site.
• Phase 5: Mobile Design – Create your first mobile implementation or mockup. Consider how your layout, API data display, and interactions translate to smaller screens.
• Phase 6: Full Draft – Complete the first full draft of your website, including all pages, content, API integration, and responsive design.
• Final – Incorporate feedback from reviews and finalize your website. Submit thoughtful documentation explaining your design decisions along with a live link to your completed site.

Due: Week 14, Thursday (Apr 30)