SlideShare ist ein Scribd-Unternehmen logo
1 von 73
NAUGHTY LITTLE SCAMPS
e ‘art’ of sketching interfaces
Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)
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
Sketching Interfaces Workshop - Interactions12 (Dublin)
What is a sketch (and what is not)?
Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)
<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”
Sketching Interfaces Workshop - Interactions12 (Dublin)
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
Sketching Interfaces Workshop - Interactions12 (Dublin)
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)
Sketching Interfaces Workshop - Interactions12 (Dublin)
Hands can be a right bugger ...
... but they don’t have to be
Activity 5: Adding style
Hands / Shading / Lettering / Arrows
Sketching Interaction
Sketching Interfaces Workshop - Interactions12 (Dublin)
Sketching Interfaces Workshop - Interactions12 (Dublin)
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

Weitere ähnliche Inhalte

Was ist angesagt?

Ach 111 Intro To Sketching Techniques
Ach 111 Intro To Sketching TechniquesAch 111 Intro To Sketching Techniques
Ach 111 Intro To Sketching TechniquesRichard Luxenburg
 
Still life drawing
Still life drawingStill life drawing
Still life drawingJason Eoff
 
Collage: An Exploration
Collage: An ExplorationCollage: An Exploration
Collage: An ExplorationFrank Curkovic
 
Ppt on gesture drawing
Ppt on gesture drawingPpt on gesture drawing
Ppt on gesture drawingSwasat Dutta
 
Prototipado Agil por Mateu Batle Sastre
Prototipado Agil por Mateu Batle SastrePrototipado Agil por Mateu Batle Sastre
Prototipado Agil por Mateu Batle SastreIPAE_INNOVA
 
Sketching workshop for Google London
Sketching workshop for Google LondonSketching workshop for Google London
Sketching workshop for Google Londonpubsmith
 
Painting Shapes and Notan Two Value Studies
Painting Shapes and Notan Two Value StudiesPainting Shapes and Notan Two Value Studies
Painting Shapes and Notan Two Value StudiesMalcolm Dewey Fine Art
 
Grid Drawing Project
Grid Drawing ProjectGrid Drawing Project
Grid Drawing Projectmklaber
 
Bring Fibers Into Your Art Curriculum
Bring Fibers Into Your Art CurriculumBring Fibers Into Your Art Curriculum
Bring Fibers Into Your Art CurriculumChristine Miller
 
Line drawing and Mark making
Line drawing and Mark makingLine drawing and Mark making
Line drawing and Mark makingmissfcmay
 
Facial prop self portrait
Facial prop self portraitFacial prop self portrait
Facial prop self portraitTarang Agarwal
 
Portraitdrawing
PortraitdrawingPortraitdrawing
Portraitdrawingcjoyce104
 

Was ist angesagt? (20)

Ach 111 Intro To Sketching Techniques
Ach 111 Intro To Sketching TechniquesAch 111 Intro To Sketching Techniques
Ach 111 Intro To Sketching Techniques
 
Still life drawing
Still life drawingStill life drawing
Still life drawing
 
Gesture drawing
Gesture drawingGesture drawing
Gesture drawing
 
Collage: An Exploration
Collage: An ExplorationCollage: An Exploration
Collage: An Exploration
 
Sketching
SketchingSketching
Sketching
 
Watercolor Painting Tips
Watercolor Painting TipsWatercolor Painting Tips
Watercolor Painting Tips
 
Sketching Basics- Part 1
Sketching Basics- Part 1Sketching Basics- Part 1
Sketching Basics- Part 1
 
Ppt on gesture drawing
Ppt on gesture drawingPpt on gesture drawing
Ppt on gesture drawing
 
Prototipado Agil por Mateu Batle Sastre
Prototipado Agil por Mateu Batle SastrePrototipado Agil por Mateu Batle Sastre
Prototipado Agil por Mateu Batle Sastre
 
Sketching workshop for Google London
Sketching workshop for Google LondonSketching workshop for Google London
Sketching workshop for Google London
 
Forced Perspective
Forced PerspectiveForced Perspective
Forced Perspective
 
Painting Shapes and Notan Two Value Studies
Painting Shapes and Notan Two Value StudiesPainting Shapes and Notan Two Value Studies
Painting Shapes and Notan Two Value Studies
 
Grid Drawing Project
Grid Drawing ProjectGrid Drawing Project
Grid Drawing Project
 
Watercolor landscape powerpoint
Watercolor landscape powerpointWatercolor landscape powerpoint
Watercolor landscape powerpoint
 
Designing Comic Book Covers
Designing Comic Book CoversDesigning Comic Book Covers
Designing Comic Book Covers
 
Introduction to Drawing
Introduction to DrawingIntroduction to Drawing
Introduction to Drawing
 
Bring Fibers Into Your Art Curriculum
Bring Fibers Into Your Art CurriculumBring Fibers Into Your Art Curriculum
Bring Fibers Into Your Art Curriculum
 
Line drawing and Mark making
Line drawing and Mark makingLine drawing and Mark making
Line drawing and Mark making
 
Facial prop self portrait
Facial prop self portraitFacial prop self portrait
Facial prop self portrait
 
Portraitdrawing
PortraitdrawingPortraitdrawing
Portraitdrawing
 

Ähnlich wie 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 Landscapeulcerd
 
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 sketchTay Jit Ying
 
E-CONCEPTS / E-DESIGN / Sketching
E-CONCEPTS / E-DESIGN / SketchingE-CONCEPTS / E-DESIGN / Sketching
E-CONCEPTS / E-DESIGN / SketchingJames 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 workshopsOliver Feldwick
 
Sharpie UX @ Fluxible 2013
Sharpie UX @ Fluxible 2013Sharpie UX @ Fluxible 2013
Sharpie UX @ Fluxible 2013Leah Buley
 
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 2010Peter Boersma
 
Processing essay
Processing essayProcessing essay
Processing essayvaylu
 
Lu siau vay_616_wds_
Lu siau vay_616_wds_Lu siau vay_616_wds_
Lu siau vay_616_wds_Vay Lu
 
Good Design Faster at UX Sofia
Good Design Faster at UX SofiaGood Design Faster at UX Sofia
Good Design Faster at UX SofiaPeter Boersma
 
Sketching across the design process
Sketching across the design processSketching across the design process
Sketching across the design processRay 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 SKETCHJaclyn Hwang
 
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 2015Boon 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 1hongbinng
 
Ap studio art 2021-2022 introduction
Ap studio art 2021-2022 introductionAp studio art 2021-2022 introduction
Ap studio art 2021-2022 introductionBrenda Robson
 
How to produce an attractive sketch
How to produce an attractive sketchHow to produce an attractive sketch
How to produce an attractive sketchOng Seng Peng Jeff
 

Ähnlich wie 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
 
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
 
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
 
Ap studio art 2021-2022 introduction
Ap studio art 2021-2022 introductionAp studio art 2021-2022 introduction
Ap studio art 2021-2022 introduction
 
How to produce an attractive sketch
How to produce an attractive sketchHow to produce an attractive sketch
How to produce an attractive sketch
 

Kürzlich hochgeladen

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 

Kürzlich hochgeladen (20)

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 

Sketching Interfaces Workshop - Interactions12 (Dublin)

  • 1. NAUGHTY LITTLE SCAMPS e ‘art’ of sketching interfaces
  • 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
  • 17. What is a sketch (and what is not)?
  • 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”
  • 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
  • 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)
  • 63. Hands can be a right bugger ...
  • 64. ... but they don’t have to be
  • 65. Activity 5: Adding style Hands / Shading / Lettering / Arrows
  • 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