UX Foundations : Sketching UI

Sketching UI Workshop • 2020 • @katerutter
Sketching UI
Workshop
A tasty menu of basic concepts in interaction design & UX
2020 @katerutter
Concept Cafe

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

thinking communicating
sketch via @ugleah

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

Fidelity & feedback
rough
polished
general/directional 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

WARM-UPS

Tools } Our kit

30
seconds

Rapid practice
Creating focus
Key screen
Wire flows
Sketching Screens

Screens} Rapid practice

Sketch a quick
thumbnail of each
screen.
20
seconds
Rapid Rounds!
2 sheets, divided in 4
Screens } Mobile UI

screenshot via Workshop Cafe

screenshot via Instacart

screenshot viaYelp

screenshot via Moodle

screenshot via PS Express

screenshot via Meetup

screenshot via Southwest

screenshot via Instagram

BREATHE….

Screens } Web UI
Sketch a quick
thumbnail of each
screen.
20
seconds
Rapid Rounds!
2 sheets, divided in 4
Grab another 
2 sheets…

screenshots via BackerKit

screenshot via Google Slides

screenshots via Slack

screenshot via lyft.com

screenshots via @twitter

screenshots via Trello

screenshot via alibaba.com

screenshots via @cars.com

WHEW!
Shake it out…

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

DEMO

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

Screens} Key screen

Activity:
1. Basic idea
2. Line weight
3. Shading
4. Highlighting
5. Labels
6. Person
sketch via @adaptivepath
Screens } Key screen

Prep:
Clean sheet of paper
Draw a rectangle
Follow along with the
example…

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

Screens } 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

Remember this?
Practice sketching
different UI
•elements,
•components
•templates
•pages
Screens } Common Elements

Screens} Wireflows

Wireflows show how
at the interactions in
your product connect
and play out over time.
sketch via @ladylexy
sketch via Adaptive Path
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

Sketching UI Workshop • 2020 • @kateruttersketch via @ladylexy
Start with a  
Key Screen.
Sketch a screen that
comes after.
Sketch a screen that
comes before.
3rd 2nd1st
Screens } Wireflows

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

Sketching UI Workshop • 2020 • @kateruttersketch via @ladylexy
Screens } Wireflows
1st
Email
Compose new 
email screen
2nd
Email
screen showing 
after sent
3rd
Email
screen showing 
before compose
Practice
Mobile Email
1. Start with a  
Key Screen.
2. Sketch the screen
that comes after.
3. Sketch the screen
that comes before.
4. Put the people in
the picture
“I’m nervous
about this email.”
5 minutes
“Okay, writing
it now…” “Whew! Glad
that’s done!”

Post your work on the
assignment for 
UI Sketching Practice. 
(You just did all the work. ;)
Now it’s your turn

Sample Work

Kate Rutter
@katerutter
http://intelleto.com
Yay!

‣ @adaptivepath: Adaptive Path [http://adaptivepath.com]
‣ @glaves: Rachel Glaves [http://about.me/rachelglaves]
‣ @katerutter: Kate Rutter [http://intelleto.com]
‣ @ladylexy: Alexa Andrzejewski [http://flavors.me/ladylexy]
‣ @luxrco: Luxr [http://luxr.co]
‣ @ugleah: Leah Buley [http://ugleah.tumblr.com/]
Credits

UX Foundations : Sketching UI

Recommended

Recommended

More Related Content

Similar to UX Foundations : Sketching UI

Similar to UX Foundations : Sketching UI (20)

More from Kate Rutter

More from Kate Rutter (20)

Recently uploaded

Recently uploaded (20)

UX Foundations : Sketching UI