Project 1: Manuscript

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.

You will then create three type directions 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.

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⁠—think header , main , article , blockquote , footer , and so on. The more (appropriate) structure, the better.

You’ll begin from the template 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.

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.

Finally, you will refine your work⁠—based on our continued feedback, 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’ll rationalize the implementation into a deliberate, intentional design system.

You’ll also update your README.md in the root/​base of your repo⁠—describing the project, your readings, how you made it, things you want to remember, etc.

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