With the interaction, layout, and information hierarchy nailed down, it's time to focus on the details of visual design.

Revised mock

Reflect on the feedback you got on your mocks in studio. Try to understand what the feedback is intending, and 
why the staff are reacting to your designs the way they are. Write one paragraph reporting back the main idea of your critiques.

This is your chance to update your design based on the feedback. Remember, critiques aren't intended to just give you usability feedback; they aim to question deeper aspects of your design. If you think you can address the feedback with a different solution than the one the instructor or your peers suggested, go for it. However, it is your responsibility to address the critique with your revision.

Your end goal is to produce a revised interactive (HTML) mock of the design. Start back in Sketch 3, and move to HTML when you have something you're happy with. When you're done, write a paragraph explaining how you aimed to address the critique (and any additional criteria you had) with your revision.

Create a mood board

Now, it's time to focus in on a visual design style by collecting a mood board. Remember, a mood board must have a mood of some sort; it can't be just a collection of stuff you like. Example themes might be 1) soft watercolor art, 2) UNIX terminal, or 3) dominant use of negative space. Refer to lecture for more detail.

To create the mood board, collect concepts, photos, color swatches, illustrations, shapes, and anything else that conveys the identity you want to get across. Collect the ones you like into a page that is at least 8.5"x11". Powerpoint and Keynote should be plenty powerful for this purpose, but pick any digital layout tool you like.

There are two common errors that previous CS 247 students have made when creating mood boards. The first error is a mood board that has no clear concept behind it. A mood board must be more targeted than full web pages: it must be small clippings, headlines, images, and other very specific media that evoke your concept. The second error is that they don't communicate a single mood or concept. If you're going for a punk aesthetic, find pieces of media that feel punk!

Pixel-perfect mocks

Having explored the options, you are ready to refine and create pixel-perfect mocks that represent different instantiations of the visual style. We'll talk later in the class about why going for breadth with three different ideas is a good idea, but for now suffice it to say that an experienced designer would never walk into a meeting with only one concept. Your mocks should capture exactly what the application will look like when you implement the application using web technology. We recommend making these mocks in Sketch, because it is a far more fluid platform for messing with visual design.

Once you have three, and have gotten feedback on them, choose one to refine further into a final pixel-perfect mock.


Here are some good submissions from this quarter:


Pull everything together into your P2 Part II submission folder. That means one PDF that includes:

  • Your Part I crit synthesis and revised mock, starting with Sketch and then moving to an HTML implementation (include both screenshots and a link to the live HTML).
  • Your mood board.
  • Your three pixel-perfect mocks in Sketch, and your one final, revised mock also in Sketch.
  • Also submit a team assessment form (one for every member of the team). You will only get credit for P2-2 when every member of your team submits a form.

Bring a color printout of your final mock with you to class.

Grading rubric

Part II is worth fifteen points. This assignment will be graded on a rubric.

Category Unsatisfactory Adequate Good Very good Excellent
1: Design is not anchored in a concrete user scenario. 2: User needs are extant but buried or not driving the design. 3: User needs are accounted for, but only at the surface level. 4: User needs are well-understood and generally driving the design, with minor exceptions. 5: User needs are excellently accounted for and used to inform the design.
Interaction design
e.g., user flow, clarity, details of interactive elements of the design
1: Interaction design concepts are ignored or misused. 2: Interaction design concepts are attempted but not achieved. 3: Interaction design concepts generally appropriate, but have at least one major execution issue. 4: Interaction design concepts are executed competently, with only minor issues. 5: Interaction design concepts are carried out excellently.
Visual design
e.g., negative space, color, typography, layout
1: Visual design concepts are ignored or misused. 2: Visual design concepts are attempted but not achieved. 3: Visual design concepts generally appropriate, but have at least one major execution issue. 4: Visual design concepts are executed competently, with only minor issues. 5: Visual design concepts are carried out excellently.

If any of the deliverables are missing (e.g., no wireframes), we will reduce your score by 25% per deliverable.