Sharpie UX  

LEAH BULEY | FLUXIBLE 2013

How I Learned to Fake Being a

Sketcher—And How You Can Too�

or

Graphic Recording

Sketchnotes

Good Magazine

Obsessive Consumption Blog

The Universe of Sketches

AGENDA

2:15-2:30 Intro 2:30-3:15 Confidence Games 3:15-3:45 Sketching The User 3:45-4:15 Sketching Product Ideas 4:15-4:45 Sketching User Experiences 4:45-5:15 Validating With Sketches

Confidence Games�

PART 1

Exercise

INSTRUCTIONS

1.  Spend 2 minutes drawing this image

INSTRUCTIONS

1.  Spend 2 minutes drawing this image

2.  Now, spend 2 minutes drawing this image

1.  Use markers and pens, not pencils; be fast, not �

2.  Our : if you mess up, keep going

3.  If you really mess up, grab a new page

perfect  

Rules of Thumb for Pen & Paper

Tools for Sketching

Start Here

I’m important!

Background / depth

Complex shapes

To Create Gray Effect

Warm Gray

Hatching

Stippling

INSTRUCTIONS

1.  Fill a page with overlapping rectangles using the thing end of the sharpie

2.  Hold the page up for everyone to see

3.  Pass it to your neighbor, then choose one rectangle and color it yellow

4.  Pass it to your neighbor, then outline 3-4 rectangles with the fat end of the sharpie

5.  One more pass! Shade in 3-4 rectangles with hatching or stippling ... or add some shadows

Sketching�the User �

PART 2

Sketching Facial Expressions

Eyes & MouthEyes & Mouth

EyebrowsEyebrows & Mouth

Face Shape

Calm Happy Sad Mad/Disgusted

Neutral Worried Angry Surprised Angry Surprised

Worry Surprised

Why the long face?

Creepy

Sketching Simple Bodies

Swoosh People

Bell People

Clothespin People

Star People

Making Bodies Expressive

Point of Focus

Surprised or Averse

Withdrawn or Sad

Neutral Engaged or Aggressive

Thoughtful or Questioning

Overlapping Shapes

From the Usborne Art Ideas Big Book of Things to Draw

Artist’s Manikin

Artist’s Manikin

point of focus

Artist’s Manikin

Exercise

But first, think about a bad habit  

INSTRUCTIONS

1.  Do a rough “overlapping

shapes” sketch of this manikin

2.  Trace back over your rough sketch, and turn it into a semi-realistic sketch of your bad habit in action.

3.  Be sure to give the sketch a facial expression.

Sketching�Product Ideas�

PART 3

Header

Tab

User Picture

Photo

Video

Filler textPop-up

Module

ArrowsLarger ones can

communicate weight, or act as labels

Side-scrolling Module

Drop ShadowsCommunicate depth and

bring attention to callouts or popup boxes

Calendar

Page curl

Mouse CursorQuietly indicates a

rollover state

CalloutsCan show alerts,

help, guidance or sketch annotations

Interface Elements

Highlighting

Sketches by Rachel Graves

Warm Gray S

ketc

hes

by R

ach

el G

rave

s

Line Weight

The Magical 6-Up Template

INSTRUCTIONS

1.  Draw 6 boxes on a page.

2.  Sketch 6 mutally independent ideas for products or interfaces that could help with your bad habit.

IDEA 1 IDEA 2 IDEA 3

IDEA 4 IDEA 5 IDEA 6

Sketching to Refine an Idea

INSTRUCTIONS

1.  Pick your favorite idea (or combination of ideas) from your 6-up template

2.  Re-sketch it in more detail on a new page FAVORITE IDEA

Sketching�User Experiences�

PART 4

Basic Elements of Shape

from Drawing With Children by Mona Brooks

Dots Circles Lines Angled Lines Curved Lines

Circle!

Line!

Dot!Angled !Line!

Curved!Lines!

Lines!

Line!

Circle!

Curved Lines!

Angled Lines!

Image from placeit.breezi.com

INSTRUCTIONS

1.  Sketch this image. 2.  Look for lines, circles,

dots, angled lines, and curved lines.

3.  Add your favorite idea from your 6 up to the mobile phone

You have 5 minutes.

INSTRUCTIONS

1.  Do it again.

This time, you have 2 minutes

INSTRUCTIONS

1.  Do it again.

This time, you have 30 seconds

thosepeskyusers.com/ux-storyboarding-tip-using-omnigraffle/

Storyboard Template

Start by showing the context or problem in the first few panels

Next, show how the solution would work (high level)

Show the outcome or positive effect in final panels

Exercise

INSTRUCTIONS

1.  Draw a storyboard that shows how your concept would fit into your life and help you with your bad habits

2.  In the first few panels, show the bad habit in action

3.  In the middle panels, show the product solution

4.  In the final few panels, show positive effect

Validating & Improving Through

Sketches �

PART 5

Edward De Bono’s 6 Thinking Hats

Discernment

Process Emotions

Creativity Optimism

Information

Black Hat Session

INSTRUCTIONS

1.  Share your 1-up sketch and your storyboard with a partner

2.  Partner, take a minute to say what you like about the idea

3.  Now, both of you, look at the 1-up sketch and storyboard, and think about what you don’t like about it

4.  Place a sticky note for every issue you see or concern you have

INSTRUCTIONS

1.  Switch and repeat

Pro Tips for UX Sketching

1.  Have nice pens and pencils.

2.  Trace. Copy. Steal.

3.  Find a font you like and practice tracing it.

4.  Use interface templates and 6 up templates.

5.  When in doubt, give it a thick outline.

6.  Keep a sketchbook.

RESOURCES

Books An Illustrated Life, by Danny Gregory

Drawing With Children, by Mona Brooks

Drawing on the Right Side of the Brain, by Betty Edwards

The Big Book of Realistic Drawing Secrets, by Carrie Stuart Parks & Rick Parks

Cartooning: Philosophy and Practice, by Ivan Brunetti

Drawing Lab for Mixed-Media Artists, by Carla Sonheim

Me leah_buley@intuit.com

www.uxteamofone.com

www.leahbuley.com

@ugleah

uxteamofone.com discount code FLUXIBLEBULEY for 20% off