IA06: Sketch!

Due: Tues, Oct 11, 11:59PM

Assignment Overview
Sketching plays a critical role in design. It's a way of capturing otherwise ineffable ideas, it's a way of expressing our ideas visually (the core channel in IxD), it's a way of thinking through design, and it's a way of communicating our ideas to others (as well as, often, back to ourselves). The onus of clear visual communication is on the designer--if the viewer/user doesn't rapidly get it, then the interface (sketch) needs to be tweaked. The goal of this assignment is to give you practical experience with different forms of sketching. Your goal is to communicate your ideas through sketch clearly to other designers (me and Matt!).

What To Do

Using techniques from the lecture and from the following readings, you will sketch in your sketchbook a series of single-panel sketches (Part One) and a series of multi-panel sketches (Part Two). Remember, your sketches should maximize clarity, not careful detail. Try to capture the essence of the interface/interaction. Capturing the right details and knowing what to leave out is key to an effective sketch. Draw big. Each sketch should use at least half a (if not the entire) page in your sketchbook. Please label and number each sketch.

The Readings

Before you begin this assignment, please read the following excerpts from Greenberg et al.'s Sketching User Experiences:
  1. Some paper-based sketching techniques and guidelines including a sketching vocabulary, the basic elements of a sketch, collaborative sketching, and using sticky notes [link]
  2. How to tell a story using a narrative storyboard sketch [link]

Optional Readings

While the above readings are required, the following are supplementary that you may read out of your own interest and time:

  1. Pages 104-125 covering sketching benefits and attributes of sketching in design. Buxton, B. (2007). Sketching User Experiences: Getting the Design Right and the Right Design (Interactive Technologies) (p. 448). Morgan Kaufmann. [source link].

  2. Chapter 8 of Colin Ware's book Visual Thinking for Design, 2008 entitled "Creative Meta-Seeing" [source link].

  3. Johnny Holland's three part series on Storyboarding and UX Design--part one and part two (part three is optional).

  4. Khai N. Truong, Gillian R. Hayes, and Gregory D. Abowd. 2006. Storyboarding: an empirical determination of best practices and effective guidelines. In Proceedings of the 6th conference on Designing Interactive systems (DIS '06). ACM, New York, NY, USA, 12-21. [source link,official link].

Part One: Single Panel Sketches

Each of the following should be sketched three times using different styles, angles, techniques. Star your favorite one. Note: your goal is not to create a sketch that just rehashes the image but in sketchform (e.g., a perfect trace); instead, use the image as a provocation for a certain kind of interface/design and create sketches around that provocation. See the examples listed in the Acknowledgments if this is not clear.

You can click on each image below to expand.

Social Media

external image messages.jpg
Source: https://s3.amazonaws.com/vines/static/blog/messages.jpg

Slate Email

external image slate.png
Source: https://dribbble.com/shots/829195-Slate


external image sony-smartwatch-2-g02.jpg
Source: http://www.laptopmag.com/images/uploads/3992/g/sony-smartwatch-2-g02.jpg

Augmented-Reality Directions

external image _76747836_sapvuzix2.jpg
Source: http://ichef-1.bbci.co.uk/news/624/media/images/76747000/jpg/_76747836_sapvuzix2.jpg

Part Two: Multi-Panel Sketches

Each of the following should be sketched two times using different styles, angles, techniques in a multi-panel format. You can use three-panel, four-panel, or six-panel designs. Use the multiple panels to more clearly communicate motion, time, interactions, etc. Again, star your favorite one.

Simple Radial Menu

external image circle-menu-github-open-source-ramotion.gif
Source: https://dribbble.com/shots/2534780-Circle-Menu-Swift-Open-Source


external image lp-mobile-loc-cg-151130.gif
Source: https://dribbble.com/shots/2524463-Guides-by-Lonely-Planet-Selecting-City


Source: Harrison et al., UIST 2011, https://youtu.be/Pz17lbjOFn8


This assignment is based on the "That's Pretty Sketchy" assignment in Stanford's CS247 class (HCI Design Studio) taught by Professor Michael Bernstein. Though our assignment has been modified, the CS247 assignment page lists two examples of sketches "that demonstrate strength and variety of the visual communication strategies." I strongly suggest that you look at them: example1 and example2.


Scan or take high quality photos of your sketches. Submit them as one combined PDF to Canvas.


You can download the rubric as an Excel file below:

We've also taken a screenshot of the rubric for your convenience. You can click on the image below to enlarge.

Best of
Here are some of the best sketches from previous versions of this class. Note that this assignment changes each semester so these are offered simply as examples. Pay attention to the amount of detail, the selected viewpoint, the overall 'sketchiness,' the ability to capture the essence of the interface, the use of annotations and titles, and the different techniques used for sketching the same interface multiple times.