Transaction Management in Database Management System
UX Foundations : Sketching UI
1. Sketching UI Workshop • 2020 • @katerutter
Sketching UI
Workshop
A tasty menu of basic concepts in interaction design & UX
2020 @katerutter
Concept Cafe
2. Sketching UI Workshop • 2020 • @katerutter
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
4. Sketching UI Workshop • 2020 • @katerutter
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...
5. Sketching UI Workshop • 2020 • @katerutter
Fidelity & feedback
rough
polished
general/directional detailed
fidelity
feedback
the type of visuals you
show effects the kind
of feedback you get.
6. Sketching UI Workshop • 2020 • @katerutter
“ The more human the
picture, the more human
the response.
~ Dan Roam
33. Sketching UI Workshop • 2020 • @katerutter
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
38. Sketching UI Workshop • 2020 • @katerutter
Activity:
1. Basic idea
2. Line weight
3. Shading
4. Highlighting
5. Labels
6. Person
sketch via @adaptivepath
Screens } Key screen
39. Sketching UI Workshop • 2020 • @katerutter
sketch via @adaptivepath
Prep:
Clean sheet of paper
Draw a rectangle
Follow along with the
example…
Screens } Key screen
40. Sketching UI Workshop • 2020 • @katerutter
sketch via @adaptivepath
1. Capture the
basic idea
Screens } Key screen
41. Sketching UI Workshop • 2020 • @katerutter
sketch via @adaptivepath
2.Add line weight
for contrast
Screens } Key screen
42. Sketching UI Workshop • 2020 • @katerutter
sketch via @adaptivepath
3.Add shading to
push back
Screens } Key screen
44. Sketching UI Workshop • 2020 • @katerutter
sketch via @adaptivepath
5.Add labels to
show more info
Screens } Key screen
45. Sketching UI Workshop • 2020 • @katerutter
sketch via @adaptivepath
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 } Key screen
49. Sketching UI Workshop • 2020 • @katerutter
Wireflows show how
at the interactions in
your product connect
and play out over time.
sketch via @ladylexy
sketch via Adaptive Path
Screens } Wireflows
50. Sketching UI Workshop • 2020 • @katerutter
Wireflows show how
at the interactions in
your product connect
and play out over time.
sketch via @ladylexy
sketch via Adaptive Path
Screens } Wireflows
Use them to prototype
interactions and to
identify and fill gaps
early in the design
process.
51. Sketching UI Workshop • 2020 • @katerutter
ASK:
How does the
interaction flow work
for the user?
sketch via @ladylexy
Screens } Wireflows
52. 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
54. 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!”
55. Sketching UI Workshop • 2020 • @katerutter
Post your work on the
assignment for
UI Sketching Practice.
(You just did all the work. ;)
Now it’s your turn