sharpie ux @ fluxible 2013
DESCRIPTION
This workshop focuses on basic sketching skills for user experience, with an emphasis on sketching users in context.TRANSCRIPT
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
www.uxteamofone.com
www.leahbuley.com
@ugleah
uxteamofone.com discount code FLUXIBLEBULEY for 20% off