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 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, and then add a link to your selection, above. 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?
Due September 14.
Sketches
You will then create five sketches in Figma (or another design tool, if you prefer). These sketches should include the reading (or your chapter/excerpt) and also your response, together. We should be able to tell which part is which. Each sketch direction should be distinct from the others, and consider 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.
When you are done, submit a link to your Figma document:
Due September 14.
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 live URL:
Due September 21.
Style the markup
Finally, 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, spacing, 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.
Due September 28.
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.
- For this project, only desktop breakpoints need to be considered
- Final projects will be submitted as live, public URLs
- We won’t go chasing links down; use the forms, above
- These should work, as intended, on any computer with Chrome (not just the student’s)
- Students should incorporate at least five different semantic HTML elements in their page
- Presentations are considered a part of the final, not just the page itself
Students should make every effort to use the technical skills they’ve learned in the class up to that point, and of course, are encouraged to go beyond. However if code is presenting an undue barrier—whether practically or conceptually—students may discuss this with the instructors. (Not the night before.)