Quick, Useful UI Sketches

Lane Goldstone
Lane GoldstoneDigital Product Designer at Philosophie Group
Quick, Useful
UI Sketches
Quick, Useful UI Sketches
Lane Halley
What’s a sketch?
“A sketch is a rapidly executed freehand
drawing that is not usually intended as
a finished work.”
— Wikipedia
• Record what you see
• Explore ideas quickly
• Demonstrate ideas to others
Why sketch?
Sketches are “sketchy”
Sketching is a
core design skill.
Many kinds of sketches
• Visual recording
• Sketchnotes
• Storyboards
• Concept sketches
• UI sketches
Visual Recording
Sketch by C Todd Lombardo @iamctodd
Concept sketches
UI sketch
Sketch by Ray DeLaPena @rayraydel
UI sketching is a
core skill for
product teams.
“When a designer and PM are out of
sync, it’s because one of them has
gotten ahead of the other in some
way. ...The way to fix this is
deceptively simple: product people
should sketch together. “
— Joshua Porter (@bokardo)
Sketching helps
everyone get on
the same page.
UI sketches help teams
• Explore options quickly
• Externalize thinking
• Share understanding
• Feel ownership
Everyone can draw.
Be fearless!
Your supplies
• Pencil (eraser & sharpener)
• Paper (plain or grid)
• Timer (for the exercises)
Basic concepts
• The pencil is powerful!
• Primitives
• Container and grid
• Functional groupings
• Your personal visual shorthand
The pencil has great dynamic
range. Your lines can be faint
or strong. Thick or thin.
You can draw almost
anything using basic shape
primitives (circle, square,
line, squiggle)
12 column grid
functional groupings
Visual shorthand
Sketch by Chris Risdon @chrisrisdon
Reverse wireframing
• Quickly sketch an existing interface
• See and understand UIs better
• Develop sketching skills in isolation
from solving design problems
Warm-up time.
Let’s draw some shapes.
• Draw a page of squares
• Draw a page of circles
• Draw a page of short parallel lines
Get your pencils ready!
Reverse wireframe sketches
30-seconds each.
Tip: Work from the outside in
• Draw the outside box first
• Create guides or a grid
• Place large elements first
• Add details and emphasis last
Here’s exercise #1
Quick, Useful UI Sketches
Tip: Plan your sketch
• Aspect ratio
• Grid or columns
• Functional groupings
Basic vocabulary
How will you quickly draw
• Headings (big, medium, small)
• Body copy
• Images
• Buttons and links
Use your new vocabulary
to sketch exercise #2
Quick, Useful UI Sketches
Now you’re warmed up
Do three in a row!
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Extended vocabulary
How will you quickly draw
• Text input & label
• Combo box
• Checkboxes & radio buttons
• Scrollbar
Let’s practice form
elements. Here are three
more screens.
Quick, Useful UI Sketches
Quick, Useful UI Sketches
Title Text
Extra Line
The next one’s tricky, but
you’re ready for it!
Quick, Useful UI Sketches
Here’s the last one.
Focus on the structure.
Quick, Useful UI Sketches
Keep sketching and you’ll
continue to improve.
Further vocabulary
• Accordion
• Carousel
• Media player
• And ...?
Here are some of the
ways I use sketching.
Talking sketch
Show and discuss alternatives
Designer / developer pairing
Wireframe walkthrough
How do you use UI sketches?
Share your photos with us!
A few books that have
inspired me.
Quick, Useful UI Sketches
Thank you!
Carbon Five
Lean UX & Agile
Development for Web
and mobile products
1 of 60

More Related Content

What's hot(20)

Sketching MattersSketching Matters
Sketching Matters
Paul Goode9.4K views
Visual ThinkingVisual Thinking
Visual Thinking
Patrick van Abbema, PMP, CBAP, CSP3.9K views
Good Design Faster at UX SofiaGood Design Faster at UX Sofia
Good Design Faster at UX Sofia
Peter Boersma7.9K views
Zentangle portraitsZentangle portraits
Zentangle portraits
Bruce Black Art 1.1K views
Graphic Design Workshop, 2018Graphic Design Workshop, 2018
Graphic Design Workshop, 2018
Clearly Blue Digital Pvt. Ltd.263 views
mistpaul276 views
Principles of Design for Web (2006)Principles of Design for Web (2006)
Principles of Design for Web (2006)
Matteo Wyllyamz427 views
Designing a font_enDesigning a font_en
Designing a font_en
dephub520 views
Good design faster slides   failcon 2010Good design faster slides   failcon 2010
Good design faster slides failcon 2010
Cass Phillipps26.4K views
Crew 430 group presentationCrew 430 group presentation
Crew 430 group presentation
Zoe Lauckner209 views
Visual Design ElementsVisual Design Elements
Visual Design Elements
Marketplace Nigeria377 views
10 Rules to Improve your Slide Deck 10 Rules to Improve your Slide Deck
10 Rules to Improve your Slide Deck
Slide-a-licious11K views

Viewers also liked(16)

The Collaborative UX Designer's ToolboxThe Collaborative UX Designer's Toolbox
The Collaborative UX Designer's Toolbox
Lane Goldstone26.6K views
Do you have founder myopia?Do you have founder myopia?
Do you have founder myopia?
Lane Goldstone5.2K views
Balanced craftBalanced craft
Balanced craft
Lane Goldstone6.3K views
Lean UX WorksheetsLean UX Worksheets
Lean UX Worksheets
Lane Goldstone5.6K views
Are You Ready to GOOB? LSM Jan '13Are You Ready to GOOB? LSM Jan '13
Are You Ready to GOOB? LSM Jan '13
Lane Goldstone5.8K views
Sketching across the design processSketching across the design process
Sketching across the design process
Ray DeLaPena7.3K views
Designing for BearsDesigning for Bears
Designing for Bears
Lucy Spence16.1K views
Using RssUsing Rss
Using Rss
Britt Watwood7.2K views
Sketch your Geography!Sketch your Geography!
Sketch your Geography!
Simon Jones9.6K views
Asami Yamamoto36.3K views

Similar to Quick, Useful UI Sketches(20)

More from Lane Goldstone(20)

Balanced CraftBalanced Craft
Balanced Craft
Lane Goldstone856 views
Balanced Team LeanUX NYC SocialBalanced Team LeanUX NYC Social
Balanced Team LeanUX NYC Social
Lane Goldstone1.4K views
UX Recipe CardsUX Recipe Cards
UX Recipe Cards
Lane Goldstone7.8K views
The Balanced Team MovementThe Balanced Team Movement
The Balanced Team Movement
Lane Goldstone13K views
Hands-on Lean UX for Digital DesignersHands-on Lean UX for Digital Designers
Hands-on Lean UX for Digital Designers
Lane Goldstone2.4K views
Lean UX Recipe Cards (set 02)Lean UX Recipe Cards (set 02)
Lean UX Recipe Cards (set 02)
Lane Goldstone2K views
Lean UX Recipe Cards (set 01)Lean UX Recipe Cards (set 01)
Lean UX Recipe Cards (set 01)
Lane Goldstone5K views
Conversation, Cadence & CultureConversation, Cadence & Culture
Conversation, Cadence & Culture
Lane Goldstone6.7K views
User Experience & Lean StartupUser Experience & Lean Startup
User Experience & Lean Startup
Lane Goldstone2.7K views
I (heart) uglyI (heart) ugly
I (heart) ugly
Lane Goldstone1.6K views
Are you ready to GOOB? LSM Sep '12Are you ready to GOOB? LSM Sep '12
Are you ready to GOOB? LSM Sep '12
Lane Goldstone2.4K views
UX for Lean Startups Sep 15UX for Lean Startups Sep 15
UX for Lean Startups Sep 15
Lane Goldstone9.2K views
Personas for CodersPersonas for Coders
Personas for Coders
Lane Goldstone6.3K views

Recently uploaded

Task 3.pptxTask 3.pptx
Task 3.pptxZaraCooper2
17 views22 slides
evidence .pptxevidence .pptx
evidence .pptxnpgkddpbpd
9 views4 slides
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdfhjksa
16 views5 slides

Recently uploaded(20)

Task 3.pptxTask 3.pptx
Task 3.pptx
ZaraCooper217 views
evidence .pptxevidence .pptx
evidence .pptx
npgkddpbpd9 views
Nomor Meja RUANG-4.docNomor Meja RUANG-4.doc
Nomor Meja RUANG-4.doc
ssuserc40b916 views
3 Dark Design Templates3 Dark Design Templates
3 Dark Design Templates
Pixeldarts14 views
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
Atiqur Rahaman13 views
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa16 views
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
Atiqur Rahaman258 views
Viking passive.pdfViking passive.pdf
Viking passive.pdf
Matis Velt15 views
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28213 views
Here_Process bookHere_Process book
Here_Process book
nykimstudio15 views
Big Deal Curmel Moton ShirtBig Deal Curmel Moton Shirt
Big Deal Curmel Moton Shirt
brandshop18 views
Task 3 copy.pptxTask 3 copy.pptx
Task 3 copy.pptx
ZaraCooper216 views
scribddarkened352233 views
The Last GrainsThe Last Grains
The Last Grains
pulkkinenaliisa36 views
Anti-Cancer Drugs-Medicinal ChemistryAnti-Cancer Drugs-Medicinal Chemistry
Anti-Cancer Drugs-Medicinal Chemistry
NarminHamaaminHussen7 views
Rabius Sany38 views
Anti -Parkinsonian Drugs-Medicinal ChemistryAnti -Parkinsonian Drugs-Medicinal Chemistry
Anti -Parkinsonian Drugs-Medicinal Chemistry
NarminHamaaminHussen9 views
UX Camp Nov 2023_upload.pptxUX Camp Nov 2023_upload.pptx
UX Camp Nov 2023_upload.pptx
Amir Ansari49 views
Doing Footwear - Footwear FactoryDoing Footwear - Footwear Factory
Doing Footwear - Footwear Factory
Doing Footwear8 views

Quick, Useful UI Sketches