7. Boxes
If we get away from the idea of a box as a square or a rectangle,
we can start to think about an interface as a box containing a series
of other boxes.
8. Boxes
If we get away from the idea of a box as a square or a rectangle,
we can start to think about an interface as a box containing a series
of other boxes.
So we need to be able to draw boxes. Even if they are invisible.
9. Boxes
If we get away from the idea of a box as a square or a rectangle,
we can start to think about an interface as a box containing a series
of other boxes.
So we need to be able to draw boxes. Even if they are invisible.
[invisible box]
10. Tip #1
icker lines can hide mistakes, as well as lending weight and highlighting
11. Tip #1
icker lines can hide mistakes, as well as lending weight and highlighting
Tip #2
Do all your verticals at the same time, then your horizontals
12. Tip #1
icker lines can hide mistakes, as well as lending weight and highlighting
Tip #2
Do all your verticals at the same time, then your horizontals
Tip #3
Start light and build up weight and thickness as you get more con๏ฌdent in the
idea (mistakes/over-drawings are ๏ฌne, itโs not a polished drawing)
28. Sketches do not have to be pretty, beautiful or even immediately understandable by
others. However, you should be able to explain your sketches and ideas when anyone
asks about them.
Sketching User Experiences: e Workbook
(Saul Greenberg,ย Sheelagh Carpendale,ย Nicolai Marquardt & Bill Buxton)
30. I use sketches as a prop; a visual aid to explanation:
ey donโt often
work as
standalone
objects
SKETCH
ey are ey are
supplementary to a often created
(written or verbal) as a response
explanation or โon the ๏ฌyโ
32. Why use sketches?
(paraphrasing Bill Buxton and my Dad)
Sketches give you the freedom to make mistakes and think openly
ey can be done at speed - explore lots of ideas quickly
You can record ideas without getting lost in the detail
ey are easy to discuss, share and critique with others
To have fun (too often forgotten)
35. Activity 2: Capture it
Sketch as many concepts as you can
Explain (using your sketches)
Interpret (without explanation)
36. Quickly sketch something that describes:
Sliding/swiping to scroll or page through a series of โpagesโ
Portrait to landscape orientation on a phone
Switching from list to grid view (or vice versa)
A pull-down (or drop-down) menu
Click to download
Re-ordering a list
A slide out toolbox or panel
Showing or hiding content
38. My Kit
Hard graphite pencil (H or HB)
Blue โno photocopyโ pencil
Good eraser/rubber
Layout pad
Black pens (various thickness/nibs)
Markers for shading and depth
(3 tones only, 20% apart) + 1 colour
Scanner
Pencil sharpener/sharp knife
39. Tip #1
Any pen/paper is better than no pen/paper
(capture the idea ๏ฌrst, then come back to it and re๏ฌne it later)
40. Tip #1
Any pen/paper is better than no pen/paper
(capture the idea ๏ฌrst, then come back to it and re๏ฌne it later)
Tip #2
Avoid fancy sketch pads and notebooks if you have a fear of the blank page
(full notebooks and sketchbooks are beautiful, even if their covers arenโt)
41. Tip #1
Any pen/paper is better than no pen/paper
(capture the idea ๏ฌrst, then come back to it and re๏ฌne it later)
Tip #2
Avoid fancy sketch pads and notebooks if you have a fear of the blank page
(full notebooks and sketchbooks are beautiful, even if their covers arenโt)
Tip #3
Donโt throw away old pens, but donโt just keep using the same one
(sharpie pens are called โsharp-iesโ for a reason)
42. โPens should be avoided unless you are practiced with themโ
Bill Buxton
43. โPens should be avoided unless you are practiced with themโ
Bill Buxton
โMistakes are ok. Keeping them makes it a sketch rather than a drawingโ
Sam Smith
45. Sketches as impressionism
As soon as you start to get into detail you are drawing (not sketching) and in danger
of you, and the people you share your sketches with, focusing on the wrong thing.
49. Lorem ipsum dolor sit amet
Pellentesque rhoncus rhoncus arcu, vitae blandit libero ultrices vitae.
Praesent vulputate augue sed justo tempor sed lobortis orci mollis. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Cras in velit at nisl vulputate hendrerit in nec libero.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec iaculis convallis tortor vel tincidunt. Morbi
varius sem ac leo tristique ac gravida erat adipiscing. Sed ac velit et urna
viverra viverra vitae vestibulum tortor. Nullam fringilla commodo
commodo.
Aliquam gravida, nulla eu sagittis tempor, dolor tortor gravida enim,
elementum hendrerit ipsum mi sed nisl. Praesent tristique, erat vel rhoncus
porta, felis velit cursus erat, sed commodo sem lacus semper orci.
Suspendisse potenti. Sed dignissim placerat nisi egestas molestie. In a
dolor at magna molestie rhoncus a vel nulla. In sed varius dolor. Phasellus
quis suscipit leo. Maecenas odio ante, semper a elementum id, ultricies.
50. Lorem ipsum dolor sit amet
I can still read it, even if I canโt understand it
Alternatives:
Lines Squiggles
If headers and labels are real text they will stand out
51. Focus on the bits that are relevant
No need to draw the whole thing
Vary the level of detail/๏ฌnesse (high = relevant, low = less important)
Use low-๏ฌ sketches of the whole thing and โpull outโ the detail
53. How did you plan/book your journey here? Use your sketch to describe that process
(If you can think of how to do it better, great, but donโt spend too long designing solutions)
Donโt try to sketch the whole thing
ink about how to show:
- the device/s you used
- interactions
- the output/display
- how you used the info
Only show as much as you need to
57. A good note is worth a thousand pictures
Labels must be readable (and not just by you)
Donโt make me turn my head to read it (stay on the horizontal)
CAPS ARE YOUR FRIENDS (itโs not shouting in a sketch)
Make your guides into part of the label
Donโt write it tiny
Take your time (sketch quick, write slower)
61. A few ๏ฌourishes and the rest basic
Learn (by practicing) how to make one or two stylistic ๏ฌourishes and apply them
consistently to your sketches to build up a style, and to go from scribble to sketch.
Examples:
Handwriting (it really can make a big di๏ฌerence)
Lines and frames
Arrows
Hands (for touch-based gestures)
70. Take-away tips
Get it down ๏ฌrst, worry about the presentation later
Donโt throw sketches away
Mistakes are ok (and can often be hidden)
Donโt try to draw everything - focus
Donโt get bogged down in doing detail
Keep it consistent
Practice your handwriting
Remember what youโre trying to achieve
Donโt hold back - bust out a sketch if you think itโll help
71. See how the experts do it*
Eva-Lotta Lamm - www.evalotta.net
Bill Buxton - http://billbuxton.com
Sunni Brown - http://sunnibrown.com
Mike Rohde - http://rohdesign.com/sketchnotes/
Peiter Buick - http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching
* en practice until you become one
72. A call to arms
A lot of us spend precious hours creating heavy documentation that is dated before it is
completed. Sometimes this is appropriate, but most times it isnโt.
is year, re-imagine the way you work. Resolve to develop your prototyping skills. Get
good at sketching in front of people. Learn to facilitate design conversations.
Experiment. Question old methods ... ese are exciting timesโshape the future!
Sarah B. Nelson - Tapir and Tine
73. ank You
Sam (@pub)
Jason (@jasonmesut)
RMA
Design Driven Innovation