Project 2: Spread

Due October 26

Students will now work in pairs—with a new reading from those selected by the class in Manuscript—to express a text consistently across devices.

The goal of this project is twofold: both a successful responsive design and also an effective collaboration between partners. Each duo will sketch cooperatively and then implement a joint execution together, via pair programming. The final web page will be responsive for mobile, desktop, and print layouts.

Your partners

Design is rarely practiced on your own—same for most software development. So collaboration is integral to this work, and is the structure for this project—conceptually, visually, and then in code. We’ve assigned you partners from our presentation groups:

Group 1

  • Andre, Fahila
  • Kinjal, Abhishek
  • Shanshan, Giselle
  • Azra, Mariia
  • Vasu, Jocelyn
  • Dhruv, Ina
  • Sandra, Amaya
  • Keren, Chi

Group 2

  • Kendall, Sarah
  • Caroline, Myriam
  • Madhura, Hamza
  • Tanvi, Sanjana
  • Dayna, Vidushi
  • Lucine, Bobby
  • Shivi, Dusha, Sushanto

Students will first meet with their partner, exchange necessary contact information, and figure out co-working times and availability. You are going to be working very closely together for this whole unit, so please be courteous and respectful throughout the process.

Rules for collaboration

Reading selection

Each pair will choose a text that was selected by their classmates for Manuscript. Importantly, we want you to choose one from the other presentation group—so you will be working from a text that is new to both of you. And again, we don’t want any repeats—first come, first serve. When you’ve agreed on a text, add it to this document:

Read your text and discuss it, thoroughly, with your partner. We won’t have written responses as part of this project—your design is your response. We expect to see this in your work (and later, have you explain it to us in your presentation).

Due October 12.


You will then sketch together, in a single/shared Figma document, to develop your design for this new text.

As with our last project, include the full reading (or your chapter/excerpt, if it is lengthy) and its title, author, date, and other associated elements. Again any figures, images, or other decoration should be excluded; this is still all about the form of the text itself. Keep in mind that your design should reflect your combined response to the text—it should be appropriate for what you have selected.

Some initial sketching may be done individually/asynchronously, but we expect you to primarily work on and refine these together into discrete directions.

We’d like to see three distinct, well-developed design directions from each team—all with mobile, desktop, and print forms sketched out. You can follow the example document with these dimensions:

Create your document in our class project, so we aren’t dealing with permissions issues:

And when you are done, submit a link directly to your organized/finalized directions:

Due October 12.

Pair programming

As a team, you will decide on a single design direction (or composite) and take this into code. You should start, as we did before, with semantic HTML structures appropriate to your text and design. In this phase, we will also expect you to begin your mobile and desktop styles, using media queries and CSS variables to structure this work—taking a mobile first approach.

All of this work should be done synchronously together, as outlined above. Each team will create a shared GitHub repository for their project, titled spread with an index.html file inside. It doesn’t matter who’s GitHub the repo originates/lives in, but both students should be collaborators. Make sure this repo is set to public.

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

Due October 19.

Next, you will add styles for your print layout—modifying your CSS, as necessary, to manifest this physical form. This could be done as a separate CSS file, or in the same stylesheet.

You will also continue to refine your overall project design and code execution, integrating the feedback from your classmates and instructors in the previous phase. This work should also all be done together.

Finally, you will jointly present your completed page, along with your thinking and process to get there, to the class.

Due October 26.

Our expectations

We’re looking for a successful design and development collaboration—with refined and appropriate layout design, incorporation of feedback, and your effective use of responsive media queries.

Our specific considerations, for this project:

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.)