Project 2, Spread

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:

Rules for collaboration

• You are going to be working very closely together for this whole unit, so please be courteous and respectful throughout the process.

• Students will first meet with their partner, exchange necessary contact information, and figure out co-working times and general availability.

• Students must always work at the same time—whether in-person, on Zoom, in a Slack huddle, what have you. This is not an asynchronous collaboration.

• In Figma, students may sketch on their individual computers but should always be in the same document, at the same time, working together.

• In Code, students should work on one computer at a time (for simplicity). One person “drives” with the other watching, and they should switch regularly—maybe every half-hour.

• It doesn’t matter if you’re at a desk or in a Live Share; the rules are the same.

• Each team will have one shared project repository for their code, and we should see balanced commits/work from both students. (We’ll demo this.)

• Your group will receive the same grade for this project, however this nets out. So it is in everyone’s interest to work together effectively.

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:

• Mobile: 375px wide
• Desktop: 1280px wide
• Print: 612px × 792px (8.5ʺ × 11″ @ 72pt / inch)

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.

Print and refinement

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:

• No images, still—but be expressive with your text
• Final projects will be submitted as live, public URLs
• We won’t go chasing down links; use the forms, above
• These should work, as intended, on any computer (not just the student’s)
• Presentations are considered a part of the final, not just the page itself

And then specific to this project:

• Your group’s interpretation should be entirely distinct from the first project’s
• There should be sketches and commits from both students—show us balanced work
• The page should be responsive for mobile (~375px), desktop (~1280px), and print
• Your print styles should work without color, and be cognizant of their ink use
• The final presentation should demonstrate these different distinct forms
• We should hear from both students equally during the presentation
• You will be evaluated, together, as a group

Notes on format

• We’ll be in two groups again. Since we’re in pairs (and a trio), we’ll have much more time for each project—but you also have more work to show!

• Each team will have about 10–15 minutes to present their work. (We’ll give you notice at the ten-minute mark, this time.) As before, you’ll do this from (just) one of your own machines, signed into Zoom for recording and the projector. The final page should be shown from the live URL you have submitted, as we do.

• Use your time to introduce us to your reading and then talk about how your design responds to it. Show us your final page, and be sure to thoroughly demonstrate its responsive behavior. Be sure to do this fluidly, not just at discrete dimensions.

• For demonstrating your print styles, we’d like you to “print” us a PDF and take us through it in Preview, during your presentation.

• Tell us what your challenges were, but also your triumphs! And how you’d keep it going, with more time or experience.

• We should hear from both students—again, not with some balanced precision—but convince us that both of you contributed to the project and care about it. We’d also like to hear specifically about how your collaborative process worked—and what you learned from one another.

• Be prepared to use your time effectively—not less than 10, not more than 15 minutes. As before, this doesn’t have to be in a deck—and after Project 1, we’d like everyone to de-emphasize this some. Show, don’t tell wherever possible; thread your story through your finished work. Don’t read us a script, divided in half—or at least don’t let it feel that way. The presentation, as always, is part of the project.

• Each presentation will be followed by around 10 minutes of feedback and critique from your classmates and from us. (It may not work with our groupings, but we’d like to specifically hear from the students who previously tackled the text in Project 1.) We’ll add that your meaningful participation in this discussion factors into your own evaluation.

• Per our community agreement (and courtesy), the presenting student “has the floor.” Everyone else will close their laptops and turn off their phones—and nobody should come-and-go from the room during a presentation. (Disruptions will count against the offender.)

• And as before, your in-person instructor will evaluate the work and presentation; the other one of us will look at the URL and code, afterwards. We then average our scores for your overall project grade—and in this case, each team will receive a shared/joint evaluation.