Project 3: Binding

Due November 30

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 and introduction

Revisit your reading from Project 1: Manuscript. This will be your core, primary text. Now choose two other selections from readings.design that you feel resonate with or respond to your original selection. It’s okay if these overlap with someone elses. These, together, will form your reader. Add your links to this document, as before:

Project 3 reading selections

Thoroughly read both new texts, and then write an introduction/response/overview that explains why you chose the original and your new selections to go along with it. Again, we aren’t going to be prescriptive about length, here—do what it needs, and no more. Add a link to your response, in your own Google Doc, above.

Due November 9.

Sketches

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

You should aim to have the design of the website reflect the overall tone of your collection, and not any specific text alone. The landing/cover page should include your introduction, 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 iconography. Consider how someone travels between pages, as well as the typography of the individual texts themselves. The design should be an umbrella across them all.

You are now allowed one image per page (landing and each text).

Create your document in our class project, so we aren’t dealing with permissions shenanigans:

Project 3 sketches

And when you are done, submit a link directly to your organized/finalized directions:

Assignment submission

Due November 9.

Move into code

Begin coding, as before, by writing the semantic DOM for your website—now with the addition of your navigational/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 one full text, making sure that the design and execution have a good foundation, before moving on. At this point, we’d like to see the landing and a text page—with mobile-first variables and styles for mobile/desktop, to start.

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

Assignment submission

Due November 16.

Refine across all pages

You will now build your foundation out across all the pages—adding in your remaining texts within the design’s overall system. Each text should still be unique—with the semantic elements and styles reflecting their individual content. But they should balance their individual expression with a cohesive whole, across your website—three flavors of the same dish.

Here you’ll also layer in your print stylesheets, as before, and integrate the feedback from your classmates and instructors in the previous phase.

Confirm that we have your repo and URL.

Due November 23.

Finalize your “book” and presentation

For this project you will have an additional working week—in which we expect to see continued refinement in your overall project design and code execution. Here 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.

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.

Due November 30.

Our expectations

We want to see effective multi-page design and easy navigation, 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.

Our usual technical requirements:

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