Project 1, Manuscript

Due October 4

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:

Project 1 reading selection

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 unclear 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. You‚Äôll¬†know (and we‚Äôll know) what feels right. Do this in¬†your own Google Doc. Here are some questions to¬†consider:

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

Assignment submission

Due September 13.


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:

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:

Project 1 sketches

When you are done, submit a link:

Assignment submission

Due September 13.

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:

Assignment submission

Due September 20.

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‚ÄĒwith typeface, sizing, and color. In¬†this translation, your web page will reflect the decisions and intent behind your text, response, and design.

You will create a style.css stylesheet, and update your repository with it. You will present your completed page, along with your process to get there, to the class.

Assignment submission

Due September 27.

Spacing and refinement

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 hierarchy, readability, and legibility within its form.

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

Assignment submission

Due October 4.

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:

Notes on format