Sketchapalooza [UX Week 2018, August 2018]

2 min
Let’s get to know
each other!

tweet-friendly
@katerutter

When was the last
time you sketched?

How do you currently
use sketching in your
team?

why sketch?
‣Generate a lot of new ideas quickly
‣Figure out how an idea works
‣Collaborate with others
‣Communicate ideas to others
‣Make informed decisions & move forward

See Understand Share
Can you see it?
Can you understand it?
sketch via @glaves
It’s not about being “bad” or “good”, it’s about...

“
We humans often need to see something to clearly
understand it, and so those of us with the ability to
effectively convey an experience in a visual way
possess a special and
important skill indeed.
~ Julie Zhuo

Features
Users
Uses
Product
Needs
Company
Purpose
sketches,
prototypes,
pixels
UI
1. UX Stack
Via Janice Fraser, LUXr
People
Product

Users
Features
Uses
Product
Needs
Company
Purpose
sketches,
prototypes,
pixels
UI
2. UX Stack +

3. Fidelity & feedback
rough
polished
high-level detailed
fidelity
feedback
the type of visuals you
show effects the kind
of feedback you get.

“ The more human the
picture, the more human
the response.
~ Dan Roam

Sketching
for UX
Build a
Visual
Vocabulary
Sketching
for Notes

Tools } Our kit

Tools } Our kit
Paper tip
portrait
landscape

Build a Visual Vocabulary
Warm-ups
Basics
• Lettering
• Things & Ideas
• Spacials

WARM-UPS

30
seconds

Lettering
Things & Ideas
Spacials
BASICS

Basics } Lettering

• Legibility
• Hierarchy
• Speed!
3 Key things
Basics } Lettering

Doug Neil
http://www.thegraphicrecorder.com/2013/01/25/sketchnotes-of-on-being-interview-with-seth-godin/
Basics } Lettering

basic
serif
double
bubble
block
Basics } Lettering } 5 from 1

basic
tall
wide
Basics } Lettering } Tall & Wide

Overhead gallery!

Basics } Things & Ideas

Via Mike Rhode
https://www.ﬂickr.com/photos/rohdesign/sets/72157651742277291

Graphic Jam prep
Basics } Things & Ideas } Graphic Jam
~thing or idea
~ single word
word
On the index card:
Write a thing or idea you
want visualized.
Hand to our room volunteer.
5

Basics } Things
20
seconds
Rapid Rounds
THINGS!

smart phone

airplane

laptop

anchor

paper airplane

toolbox

Basics } Ideas
30
seconds
Rapid Rounds
IDEAS!

brainstorm

collaborate

adapt

interaction

engagement

success

Basics } Things & Ideas } Graphic Jam
25
seconds
Graphic Jam!

3 minutes!
quick-share!
table harvest!
&
Hand your graphic jams
to our room volunteer.

Basics } Spacials

Basics } Spacials
Sunni Brown
http://sunnibrown.com/wp-content/themes/sunni/images/managing-conﬂict11x17.jpg
Use spacials
to structure
content.
(Even basic lists.)

Basics } Spacials
Great for
bullet
journaling*
*Google it. It’s
pretty cool. The Chic Cupcake
http://chiccupcake1.blogspot.com/2017/05/bullet-journaling-101.html

Basics } Spacials
dividers connectors & arrowsbullets
Draw-along!

Basics } Spacials
frames & banners
Draw-along!

Basics } Spacials
Before After

Basics } Spacials
5
minutes
Transform a list
Use lettering (5 from 1)
and specials to visually
enhance the list.
Break out the c o l o r !

mini-break
be back in 
3:22!
We’ll post your work!
Browse what’s 
been created in the
room so far…

Questions
Noticings
Discussion

People
Scenarios
Screens
Sketching for UX

Features
Users
Uses
Product
Needs
Company
Purpose
sketches,
prototypes,
pixels
UI
UX Stack
People,
expressions,
context & 
moments of need.

Expressions Matrix
Faces
Block People
Star People
People
Places
Indicia*
* movement & emanata

People } Expressions Matrix

smile frown
up brows
neutral
down
brows
no brows
add a mouth...
add eyebrows...
Draw-along!
People } Expressions Matrix

People } Block people

People } Block People
Draw-along!

People} Star people

People } Star People
Draw-along!

You can draw a person in 4 simple steps....
Star People

You can draw a person in 4 simple steps....
Video Examples here
http://bit.ly/sketchingpeople

The annual 1 Week 100 People
project happens every year in
March. Super fun.
People } Fun fact

People } Places

People } Places
Draw-along!
Use simple shapes
to put a person in a
place.
inside
outside

People } Indicia

People } Indicia }

Agitrons • Blurgits • boozex • Briffits •
crottles • digitrons • Dites • doozex •
Emanata • farkles • Grawlixes • Hites
• Indotherm • jarns • Lucaflect •
maledicta balloons • nittles • oculama •
Plewds • Quimps • Solrads •
sphericasia • spurls • Squeans •
staggeration • swalloops • that-a-tron •
Vites • waftaroms • whiteope •
People } Indicia

Agitrons • Blurgits • boozex • Briffits •
crottles • digitrons • Dites • doozex •
Emanata • farkles • Grawlixes • Hites
• Indotherm • jarns • Lucaflect •
maledicta balloons • nittles • oculama •
Plewds • Quimps • Solrads •
sphericasia • spurls • Squeans •
staggeration • swalloops • that-a-tron •
Vites • waftaroms • whiteope •
People } Indicia
action,
emotion,
animations &
atmosphere

Motion marks and
arrows communicate
complex movement.
People } Indicia } Action

Use the nature of
the line to show
the nature of the
action.
Motion Lines
Arrows
Wiggle Lines
Ghosting
People } Indicia } Action

People } Indicia } Emanata & action
Draw-along!
Lines and clouds
show direction &
action
Symbols, shapes &
lines combine to make
expressive sketches.

2
minutes
Rapid practice!
People } Bring it together!
Draw 20 people.
Block, star or a
combo. Go fast!

Break!
be back at 
4:06!
Post your work!
Browse what’s 
been created in the 
room so far…
& fill in some 
Graphic Jams!

Features
Users
Uses
Product
Needs
Company
Purpose
sketches,
prototypes,
pixels
UI
UX Stack
Scenarios
Key uses
Storyboards

Key uses
Storyboards
Scenarios

Scenarios} Key uses

A key use shows your
customer experiencing
the value of your
product.
ASK: 
“What can this person
DO with this product
that they can’t do
now?”
sketch via @ladylexy
Scenarios } Key Use
sketch via Alexa Andrzejewski

A key use shows your
customer experiencing
the value of your
product.
ASK: 
now?”
Scenarios } Key Use

Sketch a Key Use
now?”
Scenarios } Key Use
3
minutes

Scenarios} Storyboards

A storyboard shows
how a customer
experience plays out
over time.
Scenarios } Storyboards
sketch via Adaptive Path

UX Week 2018 | Sketch-a-palooza | @katerutter | August 22, 2018sketch via @ladylexy
image via Airbnb

6
minutes
Start with your Key Use.
Sketch a scenario that
comes before.
Sketch a scenario that
comes after.
Keep it focus on the
human, not the UI.

3 minutes!
pair-share!
Offer feedback or ask questions.

Features
Users
Uses
Product
Needs
Company
Purpose
sketches,
prototypes,
pixels
UI
UX Stack
Screens
Key screens
Wire flows

Creating focus
Key screen
Wire flows
Screens

Screens} Creating focus

Yellow marker or pencil
Fat
Regular
Small
Gray marker or pencil
Sharpie markers
Start here
More attention
Depth: 
Push back
Look at me! highlighter or
yellow pencil
shading lines or
grey pencil
Screens } Creating focus

ACTIVITY ONE:
Via Rachel Glaves
http://www.rachelglaves.com/

Screens} Key screen

thinking communicating
sketch via @ugleah

Screens } Key screen } Common Elements
Header
Tab
User
Picture
Photo
Video
Filler text
Pop-up
Module
Arrows
Larger ones can
communicate weight, or
act as labels
Side-scrolling Module
Drop Shadows
Communicate depth and
bring attention to callouts or
popup boxes
Calendar
Page curl
Mouse Cursor
Quietly indicates a rollover
state
Callouts
Can show alerts, help,
guidance or sketch
annotations
Via Rachel Glaves & Adaptive Path © 2011

Draw-along!
1. Basic idea
2. Line weight
3. Shading
4. Highlighting
5. Labels
6. Person
sketch via @adaptivepath
Screens } Key screen

1. Capture the
basic idea

2.Add line weight
for contrast

3.Add shading to
push back

highlights
4.Add highlights
to draw
attention

5.Add labels to
show more info

6.Keep the person
in the picture
Add your customer in
the sketch: 
 
What are they feeling?  
What are they doing? 
Where are they?
Looks like
Jordan fits
my criteria…
I’ll email him

5
minutes
Homework:
Sketch a key screen
in your product, using
all the principles of
clarity.

Screens} Wireflows

Wireflows show how
at the interactions in
your product connect
and play out over time.
sketch via Adaptive Path
Screens } Wireflows
Use them to prototype
interactions and to
identify and fill gaps
early in the design
process.

ASK:
How does the
interaction flow work
for the user?
Screens } Wireflows

Via Rachel Glaves & Adaptive Path © 2011
Perspective
Overlap & Size Reﬂection Shadows
Screens } Wireflows } Communicating depth & movement

Start with your  
Key Screen.
Sketch a screen that
comes before.
Sketch a screen that
comes after.
Screens } Wireflows
2nd 3rd1st

Sketching for Information
Sketchnoting & Graphic Recording

Users
UX Stack
Features
Uses
Product
Needs
Company
Purpose
sketches,
prototypes,
pixels
UI

Sketchnoting
Graphic Recording
Visual Notetaking

Doug Neill
http://www.thegraphicrecorder.com/
2013/08/12/sketchnotes-of-austin-
kleons-creative-mornings-talk-on-
showing-your-work/
Visual Notetaking } Sketchnoting

Doug Neill 
http://www.thegraphicrecorder.com/2013/02/20/
sketchnotes-of-the-sketchnote-handbook-video-series/

Eva-Lotta Lamm

Trend Sketcher (future of work) http://www.trendsketcher.com/services/graphicrecording_en/
Visual Notetaking } Graphic Recording

Jessamy: http://www.think-in-colour.com.au/gallery/jessamy-in-action/a8wtqlrcuamqoq6-jpg-large/

Visual Notetaking

Remember this?
dividers connectors & arrowsbullets frames & banners
Visual Notetaking

Layouts
Linear
Vertical
Radial
Path
Modular
Popcorn

linear
vertical
Jessica Eldredge
http://www.ﬂickr.com/photos/jessabean/8705360625
Visual Notetaking } Layouts

radial
Jason Alderman
http://www.ﬂickr.com/photos/jalderman/10039867503

Alexis Finch
http://www.ﬂickr.com/photos/agentﬁn/10986121516/in/set-72157637923005334
path

Scott Torrence
http://www.ﬂickr.com/photos/100566070@N06/9727471316
modular

Timothy Reynolds
http://www.ﬂickr.com/photos/turnislefthome/8525651030/in/faves-11769275@N00/
popcorn

Visual Notetaking } Get set up
Wanna work big?
Step up to a spot at the wall…

Ready?

Interaction Design Questions
Bill Verplank, 2001
https://www.youtube.com/watch?v=C3rxCLhzmXY
Label or Title
• Title of talk
• speaker name
• speaker portrait
• event
• date
• your name +  
contact

Post your
work!

Collaborative Critique
7
minutes

Put it all together
Assemble
your personal
Playbook

Bring it Home
Taking sketching to your team

Bring it Home
Where are you on
the stack?
Plot the different
methods on the
maps so that you
know where you
can use sketching
in your team.

How can you use
these tools in
your team?

What’s next?
For the next 2 weeks, carry your sketchbook everywhere.
When you want to reach for your phone to fill time, try
reaching for your sketchbook instead.
When you do a crappy sketch, try drawing it 3 more times
until you like it.

Resources } My fave books

Sketchnote Army 
http://sketchnotearmy.com/
Mike Rohde
http://rohdesign.com @rhodesign
Sunni Brown
http://sunnibrown.com @sunnibrown
David Sibbet @ the Grove
http://grove.com
Dave Gray
http://www.davegrayinfo.com
@davegray
Sacha Chua
http://sachachua.com @sachachua
Alexis Finch
http://graphitemind.com @agentﬁn
Austin Kleon
http://austinkleon.com @austinkleon
Eva Lotta-Lamm
http://www.evalotta.net @evalottchen
Doug Neil
http://www.thegraphicrecorder.com/
http://www.verbaltovisual.com/
@douglaspneill
Christina Wodtke
http://eleganthack.com @cwodke
Kate Rutter
http://intelleto.com @katerutter
People to follow

People to follow - lettering
Carolyn Sewell
http://www.carolynsewell.com/ @https://twitter.com/carolynsewell
Jessica Hische
http://jessicahische.is/ @jessicahische
Joanne Fink
http://www.zenspirations.com/ @Zenspirations
Joanne Sharpe
http://joannezsharpe.blogspot.com/ @joannezsharpe
Mary Kate McDevitt
http://marykatemcdevitt.com/ @MaryKateMcD

Please share your feedback

UX Immersion : Interactions | Measure What Matters | @katerutter | March 7, 2018
Kate Rutter
@katerutter
http://intelleto.com
Thanks!

‣ @adaptivepath: Adaptive Path [http://adaptivepath.com]
‣ @austinkleon: Austin Kleon [http://tumblr.austinkleon.com]
‣ @glaves: Rachel Glaves [http://about.me/rachelglaves]
‣ @katerutter: Kate Rutter [http://intelleto.com]
‣ @ladylexy: Alexa Andrzejewski [http://flavors.me/ladylexy]
‣ @clevergirl: Janice Fraser [https://www.linkedin.com/in/janicefraser/]
‣ @ugleah: Leah Buley [http://ugleah.tumblr.com/]
Credits

Sketchapalooza [UX Week 2018, August 2018]

Recommended

Recommended

More Related Content

Similar to Sketchapalooza [UX Week 2018, August 2018]

Similar to Sketchapalooza [UX Week 2018, August 2018] (20)

More from Kate Rutter

More from Kate Rutter (20)

Recently uploaded

Recently uploaded (20)

Sketchapalooza [UX Week 2018, August 2018]