Project 2, Spread

Due November 1

Students will now work together—with a new reading from those selected by the class in Manuscript—to express a text consistently and deliberately 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—the same is true for most software development. So collaboration is integral to this work, and is the basic structure for this project—conceptually, visually, and then in code. You’ll be working with a partner:

  • Angelica & Sabrina

  • Xinyi & Zil

  • Cristina & Shaoran

  • Alexis & Rodrigo

  • Dhruvil & Hana

  • Lucy & Vicky

  • Kritika & Kirsten

  • JC & Vera

  • Emily & Hannah

  • Sachi & Shaurya

  • Bhroovi & Rebecca

  • Hao & Sarah & Wenny

Rules for collaboration

Keep in mind here we aren’t looking for mathematical division, here—all of these things are proxies for us seeing you collaborate with your partner. We want a good-faith effort at this. You will learn from each other, and your work will be more than what you bring alone.

Reading selection

Each pair will choose a text that was used by their classmates for Manuscript. Importantly, this text should not be either of your own selections. And again, we don’t want any repeats—first come, first serve. When you’ve agreed on a text, add it to this document:

Project 2 reading selection

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

Cooperative sketching

You will then sketch together, in a single/shared Figma document, to develop your design for this new text. Keep in mind that your design should reflect your combined response to the text—it should be appropriate for what you have selected.

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.

You’ll both work on and refine these together into three discrete directions—catalyzed into distinct, well-developed design approaches. You might recall your classmates’ work from Project 1—but your sketches should be unquestionably your own response to the material. Consider this a constraint; go a different way.

Each of your three directions should have their basic 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:

Project 2 sketches

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

Assignment submission

Due October 18.

Pair programming

As a team, you will decide on a single design direction (or hybrid/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 their 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 URL:

Assignment submission

Due October 25.

Next, you will layer in the styles for your print layout—modifying your CSS, as necessary, to manifest this physical form. This interpretation should work without color—as print is often done in black and white. The styles 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, as before—balancing the commits between both students.

When you are done, submit your links:

Assignment submission

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

Due November 1.

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. The feeling of your text should manifest across its forms.

Our same considerations from before:

And then specific to this project:

Notes on format