Web Unit Workshop

Work to bring in: a complete-as-possible draft of your website project, shared where we can find it

Plan for the Day:

  1. Workflow Reminder: Describe -> Evaluate -> Suggest (5 min)
  2. Evaluation reminder: our shared criteria (5 min)
  3. Peer Review Workshop (3 times 10-12 min)
  4. Evaluation revisited (10 min)

1. Workflow Reminder: Describe -> Evaluate -> Suggest (5 min)

Remember that providing attentive feedback not only helps your peers revise, it also helps you practice seeing as a designer.

Here are those steps again for maximizing concrete, actionable feedback:

  1. First, describe what you see, without judging whether it's good or not. What is this project? What stands out? What seems to be the focus?
  2. Next, evaluate according to shared criteria, in light of the focus you perceive in the project.
  3. Finally, suggest some revision possibility that you think might help take the project to the next level: assume a revision is on the way. Given the goals, the focus, and the criteria, what might be next?
NB: Because a website has multiple pages and parts, we might want to re-think the "describe" step. Option one: think about what's emphasized by the navigation. Where does the site seem to want you to go? What does it want you to do there? Option two: think about what's emphasized by the home page. What's immediately available with no extra clicks or scrolling?

2. Evaluation reminder: our shared criteria (5 min)

We set up a few shared goals and constraints to meet the baseline requirements. Let’s try to help everyone get at least to there!

Baseline criteria For a minimum grade of B, all projects for this unit must:

  • Use arrangement, size, color, visual rhythm, and/or contrast to focus viewers’ attention.
  • Include at least {two? three?} separate navigation locations (urls, pages, html files, etc).
  • Have a clear mode of navigation among the pages
  • Include at least one css stylesheet.
  • Include at least one image, with alt text
  • Successfully display locally in a web browser
  • Argue in reflection why you did what you did
  • Explain at least two CSS classes

And, as always,

  • Use only source material you have fair rights to use (and cite where appropriate)

3. Peer Review Workshop (3 times 10-12 min)

Let’s do this!

Before you leave your seat, (1) load up your website (ideally in Chrome or Firefox), (2) also load up your project folder in Atom (or equivalent), so we can see the code producing that website, and (3) label three index cards For: {yourname}.

Then…

Switch to your _mirror-image seat_ in the other monitor-island: i.e. Aliyah switch with Jenny H, Beth switch with Aba, and so on. Starting there, we'll rotate clockwise. Label one index card From: {yourname}. View / read through the project fully at least once, then
  1. Describe what you see as the focus,
  2. Evaluate where it meets or misses the criteria,
    3. and
  3. Suggest ways to meet and exceed the criteria!
Use the code in Atom to help you with steps 2 and 3.

I’ll keep track of time.

On subsequent loops, note that after viewing the project first, you may also want to read and/or refer to the previous index cards.

4. Evaluation revisited (10 min)

Head back to your seats and take a minute to read and photograph the notes you’ve received. (Make sure your photos are legible; I’ll be collecting the cards at the end of class.)

Based on your viewing, would anyone like to propose new criteria, whether baseline or aspirational?

Homework for Next Time

Tuesday’s class (March 26th) will be one more studio for this unit, so bring headphones. The final draft will be due at 11:59 pm that night, and the accompanying reflection by Thursday’s class.

Don’t forget to review the criteria!