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
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:
Thoroughly read both new texts, and then write an introduction/
Due November 9.
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:
And when you are done, submit a link directly to your organized/finalized directions:
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
When you are done, submit a link to the repo and live URL:
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.
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:
- As before, final projects should submitted as live, public URLs
- These should work on any computer with Chrome
- All of your pages should be responsive for mobile, desktop, and print
- Your presentation should demonstrate all of this behavior, and is part of the project
Show us what you can do! We’re looking forward to it.