Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Quick, Useful
UI Sketches
September 18, 2013
Opodz offers desk space and bandwidth in a well-designed collaborative work
environment serving Downtown LoS Angeles in th...
Lane Halley
lane@lanehalley.com
@thinknow
• Why sketch?
• Types of sketches
• Sketching materials
• Grids, containers and functional groupings
• Your personal UI sh...
What’s a sketch?
“A sketch is a rapidly executed freehand
drawing that is not usually intended as
a finished work.”
— Wiki...
• 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
http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/
Visual Recording
Sketchnote
Sketch by C Todd Lombardo @iamctodd
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg
Storyboard
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg
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...
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!
Drawing tools
Surfaces
• Printer paper
• Grid paper
• Whiteboard
• Notebook(s)
The right notebook?
Let’s cover the basics...
• The pencil is powerful!
• Primitives
• Container and grid
• Functional groupings
• Your person...
You can draw almost
anything using basic shape
primitives (circle, square,
line, squiggle)
The pencil has great dynamic
range. Your lines can be faint
or strong. Thick or thin.
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 wireframing
• Quickly sketch an existing interface
• See and understand UIs better
• Develop sketching skills in i...
Visual shorthand
Sketch by Chris Risdon @chrisrisdon
Semantic sketching
• Headings
• Body copy
• Images
• Form elements
• Controls
12 column grid
http://twitter.github.io/bootstrap/examples/hero.html
http://alefeuvre.github.io/foundation-grid-displayer/
functional groupings
http://twitter.github.io/bootstrap/examples/hero.html
http://alefeuvre.github.io/foundation-grid-disp...
functional groupings (responsive)
Tip: Work from the outside in
• Draw the outside box first
• Create guides or a grid
• Place large elements first
• Add de...
Ready?
Here’s exercise #1
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
Now you’re warmed up
Do three in a row!
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.
Title Text
Extra Line
The next one’s tricky, but
you’re ready for it!
Here’s the last one.
Focus on the structure.
Congratulations!
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
Making your mark
• Notebooks
• Drawing kit
• Tablet software
A few books that have
inspired me.
Show off your new skillz!!
#uisketch
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches
Upcoming SlideShare
Loading in …5
×

http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg Concept sketches How to Draw Quick, Useful UI Sketches

39,398 views

Published on

http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpg
Concept sketches

Published in: Design, Technology, Art & Photos
  • Just got my check for $500, Sometimes people don't believe me when I tell them about how much you can make taking paid surveys online... So I took a video of myself actually getting paid $500 for paid surveys to finally set the record straight. I'm not going to leave this video up for long, so check it out now before I take it down! ■■■ https://tinyurl.com/realmoneystreams2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Like to know how to take easy surveys and get huge checks - then you need to visit us now! Having so many paid surveys available to you all the time let you live the kind of life you want. learn more...◆◆◆ https://tinyurl.com/realmoneystreams2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Kate, you're a huge sketching inspiration to me. I value your compliment tremendously.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @pradnayar Thank you for your comment. I believe people learn faster and better when they have a hands-on activity. Please try the activities and let me know how it goes!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • As always, fascinating stuff! There are a million presentations that talk about the benefits of sketching but not that many that make you do it. Good idea to make it more like a workshop. I am definitely going to try this approach next time.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

×