Week 8: Feb 20 and 22

Lab: Visual design critique
Due Feb 18: examine your peer’s wireframes and send reflection to me (email to gmail or Slack message)
Due Feb 18: step one, style-palette.html 
Due Feb 20: step two, style-palette.html
Due Feb 20: 05: Visual design studies & visual design

 

Discussion, Th

Tonight’s agenda

  • Review deliverable schedule and next week’s plan (revised)
  • Report, publicly in Slack, what you’re working on tonight when we start class; then report on completion at the end of class. Priority work sequence:
    1. Everyone should have their style palette finalized before leaving tonight (three sets of identified colors and three sets of identified type). Update the file on the server.
    2. Everyone should have their three sets of desktop mockups finished tonight. If you haven’t done this, then that’s the second thing you need to do after.
    3. Then comes mobile with the revised schedule.
  • We’ll use Slack for interaction/chat

 

Discussion, Tue

Reflection

  • Most of you have not done this. If you sent me an email, please copy&paste as a Slack DM.

Color palettes

Take a few moments and look at the variety here.

Reminder: three sets of type (minimum: H1, H2, next, navigation) and three sets of color (minimum: background, text, links – visited and unvisited – H1 and H2).

Reminder from last week: how to give an effective design critique

Design critiques occur in groups small enough for collaboration (3-5). In general, the designer should have three or four questions/areas for group review and feedback. For example: “I would like feedback on if the navigation is clear.”

Another resource:
A List Apart, Design criticism and the creative process

In this critique, I’d like the groups to focus on

  1. color effectiveness (this includes contrast)
  2. type readability and choice (remember last week’s best practices)
  3. conformance with expectations (genre, form, web norms)

Process

We’re going to practice on a live website of your choice. (It can be someone’s competitor site.)

We’ll look at two-three pages, develop a consensus on site audience/goals, and then talk about the three points above.

For our in-class design critique, the designer will provide us with a short statement of audience/goals/assumptions.

  • We will break into two groups
  • Participants should consider creator intent and how well the design performs in the three areas above
  • Focus on problems (what is not working, but don’t offer a solution)
  • A scribe will take notes and share them in Slack (channel: design-critique-feb20). The sharing can be done after class but should be posted before midnight.
  • Please avoid emotionally charged comments (and the word “you”)

Then the next designer, with a different group of students each time and a different notetaker each time, and so on. Everyone should be a scribe only twice (hopefully); no one should scribe more than three times.

Staging links

  1. Chris: http://chrisavdesign.com/web200/
  2. Colin: http://www.colinmccrate.com/halms/staging.html
  3. Elizabeth: http://elizabethmbarney.com/simplyflawless/
  4. Ghada: http://edison.seattlecentral.edu/~gmessaoudi/web200/Visual_Design1.pdf
  5. Jessica: http://jesspandesign.com/web200/project/stagingarea.html
  6. Ken: http://rpcvjet.github.io/
  7. Ling: http://edison.seattlecentral.edu/~lge/web200/200Theoryofwebdesign.html
  8. Lisa: http://lisajhickey.com/web200/
  9. Mark: http://markmendez.net/web200/WhiskerCity/
  10. Mariam: https://miminaz.com/mimi/web200/jodeesStage.html
  11. Shelly: http://www.ih-o.com/web200/Visual_Design.pdf

Thursday class time will be devoted to working on your design mockups for mobile.

  • If you are using a tool that is unavailable on the lab PC, either bring a laptop to class or work from home. Please tell me tonight which you will be doing. Regardless, we will be working synchronously (ie, at the same time).

Next week we will be coding in class. Think about which parts of your design repeat from page-to-page (generally, header and footer). We will use HTML5 to structure this information and we will use PHP to minimize code (and make it easier to make future changes).

 

Assignments

See the assignment page.