sharpie ux @ fluxible 2013

60
Sharpie UX LEAH BULEY | FLUXIBLE 2013

Upload: leah-buley

Post on 11-Aug-2014

6.603 views

Category:

Art & Photos


18 download

DESCRIPTION

This workshop focuses on basic sketching skills for user experience, with an emphasis on sketching users in context.

TRANSCRIPT

Page 1: Sharpie UX @ Fluxible 2013

Sharpie UX  

LEAH BULEY | FLUXIBLE 2013

Page 2: Sharpie UX @ Fluxible 2013

How I Learned to Fake Being a

Sketcher—And How You Can Too�

or

Page 3: Sharpie UX @ Fluxible 2013

Graphic Recording

Page 4: Sharpie UX @ Fluxible 2013

Sketchnotes

Page 5: Sharpie UX @ Fluxible 2013

Good Magazine

Page 6: Sharpie UX @ Fluxible 2013

Obsessive Consumption Blog

Page 7: Sharpie UX @ Fluxible 2013

The Universe of Sketches

Page 8: Sharpie UX @ Fluxible 2013

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

Page 9: Sharpie UX @ Fluxible 2013

Confidence Games�

PART 1

Page 10: Sharpie UX @ Fluxible 2013

Exercise

Page 11: Sharpie UX @ Fluxible 2013

INSTRUCTIONS

1.  Spend 2 minutes drawing this image

Page 12: Sharpie UX @ Fluxible 2013

INSTRUCTIONS

1.  Spend 2 minutes drawing this image

2.  Now, spend 2 minutes drawing this image

Page 13: Sharpie UX @ Fluxible 2013

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

Page 14: Sharpie UX @ Fluxible 2013

Tools for Sketching

Start Here

I’m important!

Background / depth

Complex shapes

Page 15: Sharpie UX @ Fluxible 2013

To Create Gray Effect

Warm Gray

Hatching

Stippling

Page 16: Sharpie UX @ Fluxible 2013

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

Page 17: Sharpie UX @ Fluxible 2013

Sketching�the User �

PART 2

Page 18: Sharpie UX @ Fluxible 2013

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

Page 19: Sharpie UX @ Fluxible 2013

Sketching Simple Bodies

Swoosh People

Bell People

Clothespin People

Star People

Page 20: Sharpie UX @ Fluxible 2013

Making Bodies Expressive

Point of Focus

Surprised or Averse

Withdrawn or Sad

Neutral Engaged or Aggressive

Thoughtful or Questioning

Page 21: Sharpie UX @ Fluxible 2013

Overlapping Shapes

Page 22: Sharpie UX @ Fluxible 2013

From the Usborne Art Ideas Big Book of Things to Draw

Page 23: Sharpie UX @ Fluxible 2013

Artist’s Manikin

Page 24: Sharpie UX @ Fluxible 2013

Artist’s Manikin

point of focus

Page 25: Sharpie UX @ Fluxible 2013

Artist’s Manikin

Page 26: Sharpie UX @ Fluxible 2013

Exercise

Page 27: Sharpie UX @ Fluxible 2013

But first, think about a bad habit  

Page 28: Sharpie UX @ Fluxible 2013

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.

Page 29: Sharpie UX @ Fluxible 2013

Sketching�Product Ideas�

PART 3

Page 30: Sharpie UX @ Fluxible 2013

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

Page 31: Sharpie UX @ Fluxible 2013

Highlighting

Sketches by Rachel Graves

Page 32: Sharpie UX @ Fluxible 2013

Warm Gray S

ketc

hes

by R

ach

el G

rave

s

Page 33: Sharpie UX @ Fluxible 2013

Line Weight

Page 34: Sharpie UX @ Fluxible 2013

The Magical 6-Up Template

Page 35: Sharpie UX @ Fluxible 2013

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

Page 36: Sharpie UX @ Fluxible 2013

Sketching to Refine an Idea

Page 37: Sharpie UX @ Fluxible 2013

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

Page 38: Sharpie UX @ Fluxible 2013

Sketching�User Experiences�

PART 4

Page 39: Sharpie UX @ Fluxible 2013

Basic Elements of Shape

from Drawing With Children by Mona Brooks

Dots Circles Lines Angled Lines Curved Lines

Page 40: Sharpie UX @ Fluxible 2013

Circle!

Line!

Dot!Angled !Line!

Curved!Lines!

Page 41: Sharpie UX @ Fluxible 2013

Lines!

Line!

Circle!

Curved Lines!

Angled Lines!

Image from placeit.breezi.com

Page 42: Sharpie UX @ Fluxible 2013

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.

Page 43: Sharpie UX @ Fluxible 2013

INSTRUCTIONS

1.  Do it again.

This time, you have 2 minutes

Page 44: Sharpie UX @ Fluxible 2013

INSTRUCTIONS

1.  Do it again.

This time, you have 30 seconds

Page 45: Sharpie UX @ Fluxible 2013

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

Page 46: Sharpie UX @ Fluxible 2013

Storyboard Template

Page 47: Sharpie UX @ Fluxible 2013

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

Page 48: Sharpie UX @ Fluxible 2013

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

Page 49: Sharpie UX @ Fluxible 2013

Show the outcome or positive effect in final panels

Page 50: Sharpie UX @ Fluxible 2013

Exercise

Page 51: Sharpie UX @ Fluxible 2013

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

Page 52: Sharpie UX @ Fluxible 2013

Validating & Improving Through

Sketches �

PART 5

Page 53: Sharpie UX @ Fluxible 2013

Edward De Bono’s 6 Thinking Hats

Discernment

Process Emotions

Creativity Optimism

Information

Page 54: Sharpie UX @ Fluxible 2013

Black Hat Session

Page 55: Sharpie UX @ Fluxible 2013

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

Page 56: Sharpie UX @ Fluxible 2013

INSTRUCTIONS

1.  Switch and repeat

Page 57: Sharpie UX @ Fluxible 2013
Page 58: Sharpie UX @ Fluxible 2013

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.

Page 59: Sharpie UX @ Fluxible 2013

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 [email protected]

www.uxteamofone.com

www.leahbuley.com

@ugleah

Page 60: Sharpie UX @ Fluxible 2013

uxteamofone.com discount code FLUXIBLEBULEY for 20% off