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
Rules for collaboration
-
Students must be together—whether in-person or on Zoom (or a Slack huddle).
-
In Figma, students may sketch on their individual computers but should be in the same document, at the same time, working together.
-
In Code, students should work on one computer at a time—one person “drives” with the other watching, and they should switch regularly, every half-hour.
-
Each team will have one shared project repository for their code, and we should see commits from both students. (We’ll demo this.)
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.
Sketches
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:
- 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:
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.
Print and refinement
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:
- There should be sketches and commits from both students—show us equal work
- Final projects will be submitted as live, public URLs—no presenting off local files
- These should work, as you intend, on any computer with Chrome (not just the student’s)
- The page should be responsive for mobile (~
375px
), desktop (~1280px
), and print - The final presentation should demonstrate these different forms
- We should hear from both students equally during the presentation
- Presentations are again considered a part of the final, not just the work 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.)