Project Nº 3: “Binding”

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 first reading from 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.

You should not use your Spread text, but it is okay if your additional selections overlap with someone else’s. These texts, together, will form your reader. Add your links to our document, as before.

Due Nov. 14

readings.design
Choose again from these!
Project Nº 3: Reading Selection
List all three readings here.

Sketching in Code

Begin coding, as always, by writing the semantic DOM for your website. Start with a landing page that links to another page with of your initial text, so your design and execution have a good foundation to experiment and build on.

Each text will ultimately live in its own subfolder, such as repo/text-name/index.html, with its own sibling style.css. For your initial sketching, you will be duplicating this HTML three times⁠—in order to develop distinct typographic treatments for each instance.

Here we are focusing solely on typefaces, their hierarchy, vertical spacing, and your use of color. Focus on building “up” from your base paragraph reading experience, and do not use the same fonts in multiple directions. You should aim to have the designs of your website reflect the overall tone of your collection, and not any specific text alone.

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, yet. When you are done, submit a link to the repo and URL.

Also due Nov. 14

Submission Form
Send us a link!

Develop the System

Based on feedback, you will now narrow and then build out the foundation across all your pages⁠—adding your additional two texts, incorporating them within the design’s overall system. You will now also progressively-enhance your layout for larger breakpoints, and add functional navigational and interface elements throughout.

The landing/cover page should include an introduction (that you write), as well as a title for your reader, and a brief colophon. From this landing page, you should be able to navigate to the other texts’ pages, and vice-versa⁠—exploring typographic concepts here, before resorting to iconography.

Your three sketch direction subpages will be replaced with pages for your three texts. 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⁠—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.

You will also each check in with your partner from Spread⁠—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 also offer comments/feedback/encouragement on their design.

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

Due Nov. 21

Submission Form
Link to your issue, as well.

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. We’d like to see thorough, fluid responsive considerations. ~~Here you’ll also layer in your print styles, as before.~~

New for this year:

You will also incorporate one distinct image element (though it could be reused/repeated), as well as one inlined/embedded SVG (styled with CSS). Both uses should be in service of your texts!

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 Dec. 5

Submission Form
Last time! (For the Fall.)

Our Expectations

We want to see effective, wholistic 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 truly at home in it!

Our (compounding) considerations, as before:

~~Still no images⁠—but be even more expressive with your text!~~
~~Still a single page! Websites are our next project.~~
Add a meaningful README.md overview/explainer to your repo.
Final projects will again be submitted as live, public URL⁠s.
We won’t go chasing down links; use the forms, above.
These should work, as intended, on any device (not just the student’s).
The page should be (fluidly) responsive across breakpoints ~~and print~~, not targeted to specific devices.
Presentations are considered a part of the final, not just the page itself.

And specific to this project:

Your site should have a minimum four pages: a landing and your three texts, all linked together.
File a useful issue for your Spread partner.
Be sure to incorporate your single <img> and inline <svg>.

We will discuss the presentation format closer to the date.

Notes on Format

“New for Nº 3”

As we’ve mentioned⁠—we want everyone to see each other’s work. (And it’s more fun when we’re all together!) Practically, this will spread the presentations over our last two class sessions. Half will go on December 5; the other half will go on December 12, our last class.
In the interest of fairness, everyone’s projects are due together on the first day, December 5. You should be prepared to and expect to present your work then.
We will give you the random presentation order at the start of class that day, not before. We won’t be taking requests or volunteers for which day you present. It’s random! And as equitable as we can be.
Since everyone’s projects are due on the first day, you are not to work on your project after the start of class on the 5th⁠—even if you 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, commits to your repo, etc.
Any efforts after this point will be seen as you seeking an advantage over your peers, and that is quick way to fail the project (and likely, the class). “Pencils down” is December 5.
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. Missing the last class will also reflect poorly on your grade.
We’re going to make this a bit more formal, using our other room down the hall⁠—which has a podium, which you will go up to to present.

“The usual”

Each of you will have the same 6–7 minutes to present your projects. (We’ll give you notice at the five-minute mark.) You’ll do this from one of your machines, signed into Zoom for recording and the projector. The final page should be shown from the live URL you have submitted. Same as it ever was.
Use your time to (briefly) introduce us to your set of readings and then talk about how your design responds to them⁠—but focus on your final result. We want the balance of your time to be in the work itself⁠—this was again feedback for many of you, and there is still lots of room to improve here.
We should also see, at least briefly, all the pages and behaviors of your site. Many of you “ran out of time” for things in your last presentation. The first time we see something shouldn’t be when we’re on our own! And there is more to show now. You take us through and frame it for us.
Be sure to fully demonstrate your page’s responsive behavior, using your DevTools. Do this fluidly, not just at discrete/device dimensions. ~~For demonstrating your print styles, we’d like you to “print” us a PDF and take us through it quickly in Preview, during your presentation.~~
Again, you can tell us what your challenges and triumphs were. Here too, you could unpack how it was to revisit a previous work (your first text) or how it is to work across a larger surface area. Balance specifics with the Big Picture. Be prepared to use your time fully and effectively⁠—shoot for that 6-minute mark, and don’t go too long here.
Each presentation will be followed by a few minutes of quick feedback and critique from your classmates and from both of us.
Per our community agreement (and courtesy), the presenting student “has the floor.” Everyone else will close their laptops and turn off their phones⁠—and nobody should come-and-go from the room during a presentation. (We collectively did not do a good job of this, last project; many of you were dinged.)
And as always, we will both evaluate your work and presentation, as well as your live URL and code afterwards against our expectations. (Look over these again!) We’ll then average these scores for your overall project grade, which we will share on slack⁠—along with your overall course grade for the semester.

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