Project Nº 1: “Manuscript”

Students will choose a seminal design text from readings.design, read and respond to it, and typeset their selection and reply together.

The goal of this project is to hone your basic skills in typography, focusing on expression, hierarchy, and form appropriate to a work. You will do this through exploration, trial and error, and responding to critical feedback. And then you will execute this typesetting in code, as a web page.

Reading Selection and Response

Select a reading that resonates with you. We’d like to avoid any duplicates, so please indicate your selection to us and your classmates.

Read the text you’ve selected thoroughly. Some of the selections there are entire books⁠—if this is the case, you should select a specific chapter. We want you to have enough material to both respond to and design with, so ask us if you are unsure on length. We will also consider other design texts, if you have something in mind⁠—please ask.

You will then write a response. We’re not going to set a specific length requirement here⁠—do what it takes to adequately address your thoughts on the piece. (It probably isn’t bullet points, here.) You’ll know (and we’ll know) what feels right. Do this in your own Google Doc. Here are some questions to consider:

How does the reading fit into the canon of design as a whole?
Do you think the reading holds up to a contemporary practice of interaction design?
If the reading is older or print-focused, how do you think its ideas translate to digital?
What does the author succeed in conveying in this reading?
What do you strongly disagree with in the reading?
What did you learn from the reading that impacted how you will approach design?

Once you’re done, submit a link to your document.

Due Sep. 12

readings.design
Choose from these!
Project Nº 1: Reading Selection
First come, first served⁠—no repeats!
Submission Form
Link to your written response.

Sketches

You will then create three sketches in Figma. These sketches should include the reading (or your chapter/excerpt) and also your response, together. Make it clear which part is which. Each sketch direction should be distinct, and should consider/include these elements:

Title of the reading
Author
Date of publication
Table of Contents (if part of the text)
Chapter heading
The main text itself

Any figures, images, or other decoration should be excluded; we are focusing here on the form of text, alone.

The sketches should all contain the same content, while experimenting with hierarchies and heading styles, typeface selection and combinations, color, and the placement and relationship of the elements to one another.

Consider how each exploration will be perceived differently. Each should be unique⁠—we don’t want to see three layouts all in Helvetica, unless you could make them very unique within that limitation. Use only type, color, and spacing to achieve this.

Create (or move) your Figma document in the project (folder) and name it with your first name. And when you are done, submit a link.

Also due Sep. 12

Project Nº 1: Sketches
Use your first/preferred name for your Figma document.
Submission Form
Send us a link!

Semantic DOM

Next, you will move your work into code. You’ll take the text content from your sketches and layer it into HTML structures⁠—focusing on appropriate, semantic elements that reflect the usage in your selection. This won’t yet be a styling exercise; instead we will think about grouping and nesting the content. You should use a range of HTML elements to achieve this.

You’ll do this in a GitHub repository for your project, which will contain an index.html file with your work.

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

Due Sep. 19

Submission Form
Repo and live URL!

Styled Markup

You will meld style with your code. Select one of your refined sketched directions as an aim. You will then use basic CSS to approximate this intention⁠—beginning with simple changes in typeface, sizing, and color. In this translation, your web page will reflect the decisions and intent behind your text, response, and design.

Your abilities here will be limited⁠—but use this as a lens to focus on your type readability, hierarchy, and legibility. Your design should be successful within this limited vocabulary!

You will create a style.css stylesheet, and update your repo with it.

Due Sep. 26

Submission Form
Submit your repo/URL again; this is “turning it in.”

Finally, you will refine your work⁠—based on the feedback of your peers and instructors, while utilizing more rigorous box-model CSS for intentional spacing and layout. Your work should show progression towards your sketched or evolving goals⁠—within its form, now beyond the type and color.

You will present your completed page, along with your process to get there, to the class.

Due Oct. 3

Submission Form
Your final repo/URL, one last time.

Our Expectations

We’ll be looking at your understanding of the reading and quality of your responses, experimentation, appropriate type selection and hierarchy, use of semantic HTML, and your approach in basic CSS. You should have enough time with this text to manifest these things thoroughly.

We recognize we’re early in our journey into coding, so our technical requirements here will be somewhat limited:

No images are allowed!
For this project (just this one), only desktop breakpoints need to be considered.
Also this should be a single webpage; no websites yet.
Students should incorporate at least ten different semantic HTML elements.
Make thorough use of font, color, margin, padding, border, etc.
Final projects will 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 computer (not just the student’s).
Presentations are considered a part of the final, not just the page itself.

Notes on Format

We will split into two groups, for time/space: half will be in here; half will be just down the hall in Room 458. We’ll post the (random) groups/order the morning of class.
Your final page should be shown from the live URL you have submitted! Be sure to resubmit this so we know we have your final work, even if the paths are the same. This submission is turning it in.
Each of you will have about 6–7 minutes to present your work. (We’ll give you a notice at the five-minute mark.) You’ll do this from your own machine/setup, signed into Zoom for recording and the projector. Be prepared when it is your turn!
In this time, introduce us to your reading, talk briefly about your response, and explain how you wanted to reflect both of these in your design. And then show us your final page. You can also explain what your challenges were, and how you’d improve on the execution with additional time or more experience.
This doesn’t have to be in a deck, but be prepared to use your full amount of time to take us through the work⁠—how you want to do that is up to you. You don’t want to be way over, nor way under. Again, keep in mind the presentation is, always, part of the project.
Each presentation will be followed by several minutes of feedback and critique from your classmates and from us. This is a chance to show your engagement⁠—but let’s avoid “it’s cool” (fluff).
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. (Disruptions will count against the offender!)
Both instructors will evaluate your work and presentation, as well as your live URL and code afterwards. We grade each of these categories⁠—work (as-shown), presentation, work (in-browser), and code⁠—discretely based on the project expectations, aesthetics, usability, quality, and engagement.
Each category is individually graded per CD letter standards. We then average our scores together (via their grade points) for your overall project grade, and then share this (and our feedback) with you via Slack DM.