Project 1

Non-linear Space

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 – 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.
• Phase 2: Site Map – 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.
• 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, this time reviewing both mobile and desktop views. Document the feedback you receive and implement revisions to refine your project.
• 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

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 – Build a desktop-first prototype of your homepage in Figma, Webflow, or code. Focus on layout, typography, and core interactions. Include a basic sitemap showing how pages will connect.
• 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

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)