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 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:
Due November 8 Due November 15.
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 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:
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/
Submit a link to the issue you created, and also confirm that we have your own URLs:
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:
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:
- Still no images are allowed!
- Projects will be submitted as live, public URLs
- We won’t go chasing down links; use the forms, above
- These should work, as intended, on any computer (not just the student’s)
- The page should be (fluidly) responsive across breakpoints
and print - Presentations are considered a part of the final, not just the page itself
Show us what you can do! We’re looking forward to it.
Notes on format
-
We will all be together here as one group—so that everyone can see each other’s work. Practically, this will spread the presentations over our last two class sessions.
-
In the interest of fairness, everyone’s projects are due on the first day, November 29. You should be prepared to and expect to present your work then, next week.
-
We will give you the random presentation order on the start of class that day, not before. We won’t be taking requests or volunteers for which day you present.
-
As everyone’s projects are due on the first day, you are not to work on your project after the start of class next week—even if don’t end up presenting that day. If you draw into the second day, we don’t want to see any revisions to your deck or commits to your repo. Any efforts after this point will be seen as you seeking an advantage over your peers, and that is not a look you want.
-
If you present on the first day, you are still expected to be in class on the second. Your classmates sat through your work; you should do the same for them.
-
We’ll be slightly more formal about our presentations—you will each come up to the podium to present. You’ll still be presenting from your own machine, and we’ll still use Zoom for the recording/projector.
-
You will will have about 6–7 minutes to present your work. (We’ll give you a heads-up at five.) Make sure we see your whole project, taking us through all the pages, concepts, and functionality. This is less time than your last (pair) project, so practice using the time efficiently—we all got better at this, but there is still room for improvement. Your presentation, as before, is part of the project.
-
Each presentation will be followed by the usual several minutes of feedback and critique from your classmates and from us.
-
You will again receive feedback from both instructors, averaged out for your final evaluation.