Sketch!

Due: Tues, Mar 1, 11:59PM
Point Total: ~10% of your IA grade (3.5% overall)

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 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.

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

Smartwatch

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

Travel

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

Omnitouch

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

Acknowledgements

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.

Deliverables

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

Rubric

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.

IA06-Sketch-GradingRubric_v1_MLM_cropped_650w.png

Best of

Here are some of the best sketches from your peers. 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.