Project 3, Binding

Due November 29

Students will now create a “book,” assembling a collection of texts from their previous work into a cohesive whole—responding via their curation/selections, in writing, and with their design itself.

The goal of this project is to apply the skills you have now developed across multiple web pages—creating your first website. This “book” will include a homepage (its cover), navigation (table of contents), individual pages for each text (chapters), and your introduction (a colophon). It will house your texts and allow a reader to move between them all. The final website will be responsive for mobile, desktop, and print layouts across all the pages.

Reading selections

Revisit your reading from Project 1: Manuscript. This will be your core, primary text. You will now choose two other selections from readings.design that you feel resonate with or respond to your original selection. The goal is to develop a theme for your book—situating the texts in relationship to one another, as a whole.

It’s okay if these overlap with someone else’s. These texts, together, will form your reader. Add your links to this document, as before:

Project 3 reading selections

Due November 8 Due November 15.


You will then sketch three distinct directions in Figma. These directions should each include your landing page and enough of a text page to get a feel for your design. They should include mobile, desktop, and print sketches, as with last project.

You should aim to have the design of your website reflect the overall tone of your collection, and not any specific text alone. The landing/cover page should include an introduction (that you write), as well as a title for your reader, and a brief colophon about you. From this landing page, you should be able to navigate to the other pages, and vice-versa—exploring typographic concepts here, before resorting to any iconography.

Consider how someone travels between pages, as well as the typography of the individual texts themselves. Your design should be an umbrella across them all, while still allowing expression within each text.

Due November 8.

Move into code Sketching in code

Begin coding, as always, by writing the semantic DOM for your website—now with the addition of your navigational and interface elements. As you move into CSS, your stylesheet should present a consistent design across all your pages. You may find that using shared classes and designing more generally will help you here.

Start with your landing page and at least some of one text, making sure that the design and execution have a good foundation. With a semantic structure in place, develop three distinct typographic treatments—focusing solely on typefaces, their hierarchy, vertical spacing, and your use of color. Do not use the same fonts in multiple directions. At this point, we will only be concerned with these base (effectively, mobile) styles, stacked—this isn’t about overall page layout or any responsiveness.

Use multiple, separate stylsheets (direction-1.css, …2.css, etc.) to organize your treatments, commenting out/in their link elements to toggle between them.

When you are done, submit a link to the repo and URL:

Assignment submission

Due November 15.

Develop the system

Based on feedback, you will now narrow and then build out the foundation across all your pages—adding in your remaining texts within the design’s overall system. You will now also progressively-enhance your layout for larger breakpoints.

Each text’s page should still be unique—with the semantic elements and styles needed and reflecting their individual content. We should be able to easily tell them apart. But they should balance their individual expression with a cohesive whole, across your website—three flavors of the same dish. Consider the entire experience, moving through the pages, as a user will.

We’re also going to have you each help your former partner from Project 2—now, by creating a GitHub Issue in their repo (as we did in the first projects). Use this to help them improve their code—and offer comments/feedback/encouragement on their design.

Submit a link to the issue you created, and also confirm that we have your own URLs:

Assignment submission

Due November 22.

Finalize your “book” and presentation

In the final phase, we’d like to see a particular focus on addressing feedback from us and from your peers—and a deliberate polishing of your typographic executions. Here you’ll also layer in your print styles, as before.

Finally, as with your previous projects, you will present your work to the group, and discuss the conceptual backing for your reader and its design.

Again, make sure that we have your final links:

Assignment submission

Due November 29.

Our expectations

We want to see effective multi-page design and easy navigation, with advanced, deliberate typographic layouts, consistency across your pages and content, and ultimately, polish and nuance.

This is your final—it is worth a considerable part of your grade and should tie everything we’ve covered this semester into a well-designed and thoroughly-executed website. Demonstrate what you’ve learned about this medium, by making something at home in it.

Our (compounding) considerations, as before:

Show us what you can do! We’re looking forward to it.

Notes on format