SlideShare a Scribd company logo
NAUGHTY LITTLE SCAMPS
e ‘art’ of sketching interfaces
Anatomy of a sketch
Line up
At a fundamental level, sketches are made up of lines
(and a little bit of shading, but that’s just more lines, right?)
Basic line technique

Smooth action




Go further than you need to




Start light, then build up thickness
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.
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.
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]
Tip #1
 icker lines can hide mistakes, as well as lending weight and highlighting
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 #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 confident in the
idea (mistakes/over-drawings are fine, it’s not a polished drawing)
Are you sitting comfortably?
If you're not comfortable, you won't sketch well

If you can, spread out


Find your angle


Have your stuff in reach


Light is important
Activity 1: Warm up
Parallel lines
Intersecting lines
Squares
Squares in squares
What is a sketch (and what is not)?
<opinion><rant>
“Wiggly Wireframes” (not a sketch)
Hand-drawn wireframes (not a sketch)
</rant></opinion>
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)
Why Sketch?
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 fly’
Example: sketch and text working in tandem
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)
“Like sign-language, but more better”
Activity 2: Capture it
Sketch as many concepts as you can
Explain (using your sketches)
Interpret (without explanation)
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
Tools of the Trade
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
Tip #1
Any pen/paper is better than no pen/paper
(capture the idea first, then come back to it and refine it later)
Tip #1
Any pen/paper is better than no pen/paper
(capture the idea first, then come back to it and refine 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 #1
Any pen/paper is better than no pen/paper
(capture the idea first, then come back to it and refine 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)
“Pens should be avoided unless you are practiced with them”
Bill Buxton
“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
e devil is in the
(lack of) detail
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.
Can you tell what it is yet?
Can you tell what it is yet?
Can you tell what it is yet?
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.
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
Focus on the bits that are relevant
No need to draw the whole thing


Vary the level of detail/finesse (high = relevant, low = less important)


Use low-fi sketches of the whole thing and ‘pull out’ the detail
Activity 3: Focus
Show me just as much as you need to
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
Give us a clue (Labelling)
Good labels saved many a bad sketch
Copyright © Night Beacon (www.taehok.com)
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)
Activity 4: Writing
AAAAA
AN ARMY OF ANTS
ANNOTATE
A sketch not a scribble
A few flourishes and the rest basic
Learn (by practicing) how to make one or two stylistic flourishes 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 difference)


Lines and frames


Arrows


Hands (for touch-based gestures)
Hands can be a right bugger ...
... but they don’t have to be
Activity 5: Adding style
Hands / Shading / Lettering / Arrows
Sketching Interaction
Activity 6: Interaction
Show me:
What happens?
How is it initiated?
Take-away tips
Get it down first, 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
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
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
ank You
         Sam (@pub)
Jason (@jasonmesut)




                      RMA
                      Design Driven Innovation

More Related Content

What's hot

Graphic Design For non graphic designers
Graphic Design For non graphic designersGraphic Design For non graphic designers
Graphic Design For non graphic designers
shira73
 
User Centred Design (UCD) Presentation
User Centred Design (UCD) PresentationUser Centred Design (UCD) Presentation
User Centred Design (UCD) Presentation
Vinai Kumar
 
Right Way to Wireframe
Right Way to WireframeRight Way to Wireframe
Right Way to Wireframe
William Evans
 
InDesign: Colors
InDesign: ColorsInDesign: Colors
InDesign: Colors
Sam Georgi
 
Wireframes and Interaction Design Documents
Wireframes and Interaction Design DocumentsWireframes and Interaction Design Documents
Wireframes and Interaction Design Documents
piksels
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
MoodLabs
 
AutoCAD Tips, Tricks, and Delightful Drafting Techniques
AutoCAD Tips, Tricks, and Delightful Drafting TechniquesAutoCAD Tips, Tricks, and Delightful Drafting Techniques
AutoCAD Tips, Tricks, and Delightful Drafting Techniques
Donnie Gladfelter
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
Muhammad Hijazi
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
Peeyush Sahu CAPM®
 
Introduction to figma
Introduction to figmaIntroduction to figma
Introduction to figma
HuyPhmNht2
 
Ui design
Ui designUi design
Ui design
Bart Van Hecke
 
3D printing information session for kids and early teens
3D printing information session for kids and early teens3D printing information session for kids and early teens
3D printing information session for kids and early teens
Cassidy Silbernagel
 
Wireframe
WireframeWireframe
Understanding Graphic Design
Understanding Graphic DesignUnderstanding Graphic Design
Understanding Graphic Design
Frank Curkovic
 
Graphic Design Workshop, 2018
Graphic Design Workshop, 2018Graphic Design Workshop, 2018
Graphic Design Workshop, 2018
Clearly Blue Digital Pvt. Ltd.
 
Introduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience DesignIntroduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience Design
Deb Aoki
 
UX/UI Workshop Slides
UX/UI Workshop SlidesUX/UI Workshop Slides
UX/UI Workshop Slides
GDSC UofT Mississauga
 
Gestalt Principles in UI Design
Gestalt Principles in UI DesignGestalt Principles in UI Design
Gestalt Principles in UI Design
T-Design Center
 
Personas Bootcamp - Where Product Meets User Needs
Personas Bootcamp - Where Product Meets User NeedsPersonas Bootcamp - Where Product Meets User Needs
Personas Bootcamp - Where Product Meets User Needs
Mauricio Perez
 
Compositing, Composing Worlds
Compositing, Composing WorldsCompositing, Composing Worlds
Compositing, Composing Worlds
Nelson Zagalo
 

What's hot (20)

Graphic Design For non graphic designers
Graphic Design For non graphic designersGraphic Design For non graphic designers
Graphic Design For non graphic designers
 
User Centred Design (UCD) Presentation
User Centred Design (UCD) PresentationUser Centred Design (UCD) Presentation
User Centred Design (UCD) Presentation
 
Right Way to Wireframe
Right Way to WireframeRight Way to Wireframe
Right Way to Wireframe
 
InDesign: Colors
InDesign: ColorsInDesign: Colors
InDesign: Colors
 
Wireframes and Interaction Design Documents
Wireframes and Interaction Design DocumentsWireframes and Interaction Design Documents
Wireframes and Interaction Design Documents
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
 
AutoCAD Tips, Tricks, and Delightful Drafting Techniques
AutoCAD Tips, Tricks, and Delightful Drafting TechniquesAutoCAD Tips, Tricks, and Delightful Drafting Techniques
AutoCAD Tips, Tricks, and Delightful Drafting Techniques
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
Introduction to figma
Introduction to figmaIntroduction to figma
Introduction to figma
 
Ui design
Ui designUi design
Ui design
 
3D printing information session for kids and early teens
3D printing information session for kids and early teens3D printing information session for kids and early teens
3D printing information session for kids and early teens
 
Wireframe
WireframeWireframe
Wireframe
 
Understanding Graphic Design
Understanding Graphic DesignUnderstanding Graphic Design
Understanding Graphic Design
 
Graphic Design Workshop, 2018
Graphic Design Workshop, 2018Graphic Design Workshop, 2018
Graphic Design Workshop, 2018
 
Introduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience DesignIntroduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience Design
 
UX/UI Workshop Slides
UX/UI Workshop SlidesUX/UI Workshop Slides
UX/UI Workshop Slides
 
Gestalt Principles in UI Design
Gestalt Principles in UI DesignGestalt Principles in UI Design
Gestalt Principles in UI Design
 
Personas Bootcamp - Where Product Meets User Needs
Personas Bootcamp - Where Product Meets User NeedsPersonas Bootcamp - Where Product Meets User Needs
Personas Bootcamp - Where Product Meets User Needs
 
Compositing, Composing Worlds
Compositing, Composing WorldsCompositing, Composing Worlds
Compositing, Composing Worlds
 

Similar to Sketching Interfaces Workshop - Interactions12 (Dublin)

10 Steps To Sketching In The Landscape
10 Steps To Sketching In The Landscape10 Steps To Sketching In The Landscape
10 Steps To Sketching In The Landscape
ulcerd
 
English essay steps involved in producing an attractive sketch
English essay   steps involved in producing an attractive sketchEnglish essay   steps involved in producing an attractive sketch
English essay steps involved in producing an attractive sketch
Tay Jit Ying
 
E-CONCEPTS / E-DESIGN / Sketching
E-CONCEPTS / E-DESIGN / SketchingE-CONCEPTS / E-DESIGN / Sketching
E-CONCEPTS / E-DESIGN / Sketching
James Norwood
 
The thrills and spills of presenting and workshops
The thrills and spills of presenting and workshopsThe thrills and spills of presenting and workshops
The thrills and spills of presenting and workshops
Oliver Feldwick
 
English 1 Project 1
English 1 Project 1English 1 Project 1
English 1 Project 1
Michael Chang
 
Sharpie UX @ Fluxible 2013
Sharpie UX @ Fluxible 2013Sharpie UX @ Fluxible 2013
Sharpie UX @ Fluxible 2013
Leah Buley
 
The Writing ProcessWelcome to The Writing Pr.docx
The Writing ProcessWelcome to The Writing Pr.docxThe Writing ProcessWelcome to The Writing Pr.docx
The Writing ProcessWelcome to The Writing Pr.docx
pelise1
 
Ea12
Ea12Ea12
Ea12
Yung Kai
 
Good Design Faster at Design by Fire 2010
Good Design Faster at Design by Fire 2010Good Design Faster at Design by Fire 2010
Good Design Faster at Design by Fire 2010
Peter Boersma
 
Processing essay
Processing essayProcessing essay
Processing essay
vaylu
 
Lu siau vay_616_wds_
Lu siau vay_616_wds_Lu siau vay_616_wds_
Lu siau vay_616_wds_
Vay Lu
 
Presentation Tips
Presentation TipsPresentation Tips
Presentation Tips
Alshimaa Aboelmakarem Farag
 
Drawing Kawaii
Drawing KawaiiDrawing Kawaii
Drawing Kawaii
Jennifer Cruz
 
Good Design Faster at UX Sofia
Good Design Faster at UX SofiaGood Design Faster at UX Sofia
Good Design Faster at UX Sofia
Peter Boersma
 
Sketching across the design process
Sketching across the design processSketching across the design process
Sketching across the design process
Ray DeLaPena
 
FIRST ASSIGNMENT STEPS ON PRODUCING AN ATTRACTIVE SKETCH
FIRST ASSIGNMENT STEPS ON PRODUCING AN ATTRACTIVE SKETCHFIRST ASSIGNMENT STEPS ON PRODUCING AN ATTRACTIVE SKETCH
FIRST ASSIGNMENT STEPS ON PRODUCING AN ATTRACTIVE SKETCH
Jaclyn Hwang
 
Basic sketching
Basic sketchingBasic sketching
Basic sketching
UAM Xochimilco
 
Visual thinking workshop — Interaction South America 2015
Visual thinking workshop — Interaction South America 2015Visual thinking workshop — Interaction South America 2015
Visual thinking workshop — Interaction South America 2015
Boon Yew Chew
 
See->Sort->Sketch : Pen & Paper Tools to get from Research to Design : IA Sum...
See->Sort->Sketch : Pen & Paper Tools to get from Research to Design : IA Sum...See->Sort->Sketch : Pen & Paper Tools to get from Research to Design : IA Sum...
See->Sort->Sketch : Pen & Paper Tools to get from Research to Design : IA Sum...
Kate Rutter
 
Taylors English 1 Project 1
Taylors English 1 Project 1Taylors English 1 Project 1
Taylors English 1 Project 1
hongbinng
 

Similar to Sketching Interfaces Workshop - Interactions12 (Dublin) (20)

10 Steps To Sketching In The Landscape
10 Steps To Sketching In The Landscape10 Steps To Sketching In The Landscape
10 Steps To Sketching In The Landscape
 
English essay steps involved in producing an attractive sketch
English essay   steps involved in producing an attractive sketchEnglish essay   steps involved in producing an attractive sketch
English essay steps involved in producing an attractive sketch
 
E-CONCEPTS / E-DESIGN / Sketching
E-CONCEPTS / E-DESIGN / SketchingE-CONCEPTS / E-DESIGN / Sketching
E-CONCEPTS / E-DESIGN / Sketching
 
The thrills and spills of presenting and workshops
The thrills and spills of presenting and workshopsThe thrills and spills of presenting and workshops
The thrills and spills of presenting and workshops
 
English 1 Project 1
English 1 Project 1English 1 Project 1
English 1 Project 1
 
Sharpie UX @ Fluxible 2013
Sharpie UX @ Fluxible 2013Sharpie UX @ Fluxible 2013
Sharpie UX @ Fluxible 2013
 
The Writing ProcessWelcome to The Writing Pr.docx
The Writing ProcessWelcome to The Writing Pr.docxThe Writing ProcessWelcome to The Writing Pr.docx
The Writing ProcessWelcome to The Writing Pr.docx
 
Ea12
Ea12Ea12
Ea12
 
Good Design Faster at Design by Fire 2010
Good Design Faster at Design by Fire 2010Good Design Faster at Design by Fire 2010
Good Design Faster at Design by Fire 2010
 
Processing essay
Processing essayProcessing essay
Processing essay
 
Lu siau vay_616_wds_
Lu siau vay_616_wds_Lu siau vay_616_wds_
Lu siau vay_616_wds_
 
Presentation Tips
Presentation TipsPresentation Tips
Presentation Tips
 
Drawing Kawaii
Drawing KawaiiDrawing Kawaii
Drawing Kawaii
 
Good Design Faster at UX Sofia
Good Design Faster at UX SofiaGood Design Faster at UX Sofia
Good Design Faster at UX Sofia
 
Sketching across the design process
Sketching across the design processSketching across the design process
Sketching across the design process
 
FIRST ASSIGNMENT STEPS ON PRODUCING AN ATTRACTIVE SKETCH
FIRST ASSIGNMENT STEPS ON PRODUCING AN ATTRACTIVE SKETCHFIRST ASSIGNMENT STEPS ON PRODUCING AN ATTRACTIVE SKETCH
FIRST ASSIGNMENT STEPS ON PRODUCING AN ATTRACTIVE SKETCH
 
Basic sketching
Basic sketchingBasic sketching
Basic sketching
 
Visual thinking workshop — Interaction South America 2015
Visual thinking workshop — Interaction South America 2015Visual thinking workshop — Interaction South America 2015
Visual thinking workshop — Interaction South America 2015
 
See->Sort->Sketch : Pen & Paper Tools to get from Research to Design : IA Sum...
See->Sort->Sketch : Pen & Paper Tools to get from Research to Design : IA Sum...See->Sort->Sketch : Pen & Paper Tools to get from Research to Design : IA Sum...
See->Sort->Sketch : Pen & Paper Tools to get from Research to Design : IA Sum...
 
Taylors English 1 Project 1
Taylors English 1 Project 1Taylors English 1 Project 1
Taylors English 1 Project 1
 

Recently uploaded

Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 

Recently uploaded (20)

Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 

Sketching Interfaces Workshop - Interactions12 (Dublin)

  • 1. NAUGHTY LITTLE SCAMPS e ‘art’ of sketching interfaces
  • 2.
  • 3.
  • 4. Anatomy of a sketch
  • 5. Line up At a fundamental level, sketches are made up of lines (and a little bit of shading, but that’s just more lines, right?)
  • 6. Basic line technique Smooth action Go further than you need to Start light, then build up thickness
  • 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 confident in the idea (mistakes/over-drawings are fine, it’s not a polished drawing)
  • 13. Are you sitting comfortably?
  • 14. If you're not comfortable, you won't sketch well If you can, spread out Find your angle Have your stuff in reach Light is important
  • 15. Activity 1: Warm up Parallel lines Intersecting lines Squares Squares in squares
  • 16.
  • 17. What is a sketch (and what is not)?
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 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 fly’
  • 31. Example: sketch and text working in tandem
  • 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)
  • 33. “Like sign-language, but more better”
  • 34.
  • 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
  • 37. Tools of the Trade
  • 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 first, then come back to it and refine it later)
  • 40. Tip #1 Any pen/paper is better than no pen/paper (capture the idea first, then come back to it and refine 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 first, then come back to it and refine 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
  • 44. e devil is in the (lack of) detail
  • 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.
  • 46. Can you tell what it is yet?
  • 47. Can you tell what it is yet?
  • 48. Can you tell what it is yet?
  • 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/finesse (high = relevant, low = less important) Use low-fi sketches of the whole thing and ‘pull out’ the detail
  • 52. Activity 3: Focus Show me just as much as you need to
  • 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
  • 54. Give us a clue (Labelling)
  • 55. Good labels saved many a bad sketch
  • 56. Copyright © Night Beacon (www.taehok.com)
  • 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)
  • 58. Activity 4: Writing AAAAA AN ARMY OF ANTS ANNOTATE
  • 59.
  • 60. A sketch not a scribble
  • 61. A few flourishes and the rest basic Learn (by practicing) how to make one or two stylistic flourishes 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 difference) Lines and frames Arrows Hands (for touch-based gestures)
  • 62.
  • 63. Hands can be a right bugger ...
  • 64. ... but they don’t have to be
  • 65. Activity 5: Adding style Hands / Shading / Lettering / Arrows
  • 67.
  • 68.
  • 69. Activity 6: Interaction Show me: What happens? How is it initiated?
  • 70. Take-away tips Get it down first, 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