SlideShare ist ein Scribd-Unternehmen logo
1 von 73
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

Weitere ähnliche Inhalte

Was ist angesagt?

Design thinking - Empathy
Design thinking - EmpathyDesign thinking - Empathy
Design thinking - EmpathyTimothy Evans
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explainedCraft Design
 
Adobe Illustrator Basics
Adobe Illustrator BasicsAdobe Illustrator Basics
Adobe Illustrator BasicsChris Maxwell
 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesThink 360 Studio
 
Drawing A Mind Map From Start To Finish
Drawing A Mind Map From Start To FinishDrawing A Mind Map From Start To Finish
Drawing A Mind Map From Start To FinishPaul Foreman
 
Design Thinking : Empathising
Design Thinking : Empathising Design Thinking : Empathising
Design Thinking : Empathising Sankarshan D
 
Iteration and prototyping
Iteration and prototypingIteration and prototyping
Iteration and prototypingHafizMImran1
 
Study Jam - Batch 1 UI/UX #2: Design Thinking - Empathize And Define
Study Jam - Batch 1 UI/UX #2: Design Thinking - Empathize And DefineStudy Jam - Batch 1 UI/UX #2: Design Thinking - Empathize And Define
Study Jam - Batch 1 UI/UX #2: Design Thinking - Empathize And DefineGDSC2
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design ProcessesMuhammad Hijazi
 
Artificially Intelligent chatbot Implementation
Artificially Intelligent chatbot ImplementationArtificially Intelligent chatbot Implementation
Artificially Intelligent chatbot ImplementationRakesh Chintha
 
Design Thinking 2017: New to Design Thinking
Design Thinking 2017: New to Design ThinkingDesign Thinking 2017: New to Design Thinking
Design Thinking 2017: New to Design Thinkingbrightspot
 
What is UX Design?
What is UX Design?What is UX Design?
What is UX Design?Baris Erkol
 
TechTalk 77 UI & UX Presentation
TechTalk 77 UI & UX PresentationTechTalk 77 UI & UX Presentation
TechTalk 77 UI & UX PresentationEvan Purnama
 

Was ist angesagt? (20)

Design thinking - Empathy
Design thinking - EmpathyDesign thinking - Empathy
Design thinking - Empathy
 
Hci activity#1
Hci activity#1Hci activity#1
Hci activity#1
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explained
 
Adobe Illustrator Basics
Adobe Illustrator BasicsAdobe Illustrator Basics
Adobe Illustrator Basics
 
Design thinking
Design  thinkingDesign  thinking
Design thinking
 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny Quotes
 
Drawing A Mind Map From Start To Finish
Drawing A Mind Map From Start To FinishDrawing A Mind Map From Start To Finish
Drawing A Mind Map From Start To Finish
 
Graphic Design
Graphic DesignGraphic Design
Graphic Design
 
Design Thinking : Empathising
Design Thinking : Empathising Design Thinking : Empathising
Design Thinking : Empathising
 
Iteration and prototyping
Iteration and prototypingIteration and prototyping
Iteration and prototyping
 
Study Jam - Batch 1 UI/UX #2: Design Thinking - Empathize And Define
Study Jam - Batch 1 UI/UX #2: Design Thinking - Empathize And DefineStudy Jam - Batch 1 UI/UX #2: Design Thinking - Empathize And Define
Study Jam - Batch 1 UI/UX #2: Design Thinking - Empathize And Define
 
Introduction to AI
Introduction to AIIntroduction to AI
Introduction to AI
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
 
Ui design
Ui designUi design
Ui design
 
Design Thinking
Design ThinkingDesign Thinking
Design Thinking
 
Artificially Intelligent chatbot Implementation
Artificially Intelligent chatbot ImplementationArtificially Intelligent chatbot Implementation
Artificially Intelligent chatbot Implementation
 
Design Thinking 2017: New to Design Thinking
Design Thinking 2017: New to Design ThinkingDesign Thinking 2017: New to Design Thinking
Design Thinking 2017: New to Design Thinking
 
Graphic design
Graphic designGraphic design
Graphic design
 
What is UX Design?
What is UX Design?What is UX Design?
What is UX Design?
 
TechTalk 77 UI & UX Presentation
TechTalk 77 UI & UX PresentationTechTalk 77 UI & UX Presentation
TechTalk 77 UI & UX Presentation
 

Ä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
 
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.docxpelise1
 
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
 

Ä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
 
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
 

Kürzlich hochgeladen

Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufisiyoufihoussam
 
Rescindant (Part 1) - Personal Storyboard
Rescindant (Part 1) - Personal StoryboardRescindant (Part 1) - Personal Storyboard
Rescindant (Part 1) - Personal Storyboardsinghnishant0917
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfCristobalHeraud
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVAAnastasiya Kudinova
 
White Label Solutions for Digital Agencies | DevOut Labs.pdf
White Label Solutions for Digital Agencies | DevOut Labs.pdfWhite Label Solutions for Digital Agencies | DevOut Labs.pdf
White Label Solutions for Digital Agencies | DevOut Labs.pdfDevOut Labs
 
Midjourney AI Text to Image AI Art Prompts
Midjourney AI Text to Image AI Art PromptsMidjourney AI Text to Image AI Art Prompts
Midjourney AI Text to Image AI Art PromptsVanishasNews
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Yantram Animation Studio Corporation
 
Interior design for a neoclassical villa
Interior design for a neoclassical villaInterior design for a neoclassical villa
Interior design for a neoclassical villaadamsboxes
 
Dressmaking 7 Lesson 1- History of Dressmaking.pptx
Dressmaking 7 Lesson 1- History of Dressmaking.pptxDressmaking 7 Lesson 1- History of Dressmaking.pptx
Dressmaking 7 Lesson 1- History of Dressmaking.pptxMichelleMercado36
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Pranav Subramanian
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesVellyslav Petrov
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
Designing for Inclusion - Morgenbooster
Designing for Inclusion -  MorgenboosterDesigning for Inclusion -  Morgenbooster
Designing for Inclusion - Morgenbooster1508 A/S
 
eCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfeCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfswdukle
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Pranav Subramanian
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersCre8iveskill
 
A complete guide to the design thinking process
A complete guide to the design thinking processA complete guide to the design thinking process
A complete guide to the design thinking processRndexperts
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Thomas Schielke
 

Kürzlich hochgeladen (20)

Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
 
Rescindant (Part 1) - Personal Storyboard
Rescindant (Part 1) - Personal StoryboardRescindant (Part 1) - Personal Storyboard
Rescindant (Part 1) - Personal Storyboard
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVA
 
White Label Solutions for Digital Agencies | DevOut Labs.pdf
White Label Solutions for Digital Agencies | DevOut Labs.pdfWhite Label Solutions for Digital Agencies | DevOut Labs.pdf
White Label Solutions for Digital Agencies | DevOut Labs.pdf
 
Midjourney AI Text to Image AI Art Prompts
Midjourney AI Text to Image AI Art PromptsMidjourney AI Text to Image AI Art Prompts
Midjourney AI Text to Image AI Art Prompts
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
 
Interior design for a neoclassical villa
Interior design for a neoclassical villaInterior design for a neoclassical villa
Interior design for a neoclassical villa
 
Dressmaking 7 Lesson 1- History of Dressmaking.pptx
Dressmaking 7 Lesson 1- History of Dressmaking.pptxDressmaking 7 Lesson 1- History of Dressmaking.pptx
Dressmaking 7 Lesson 1- History of Dressmaking.pptx
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern Homes
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
Designing for Inclusion - Morgenbooster
Designing for Inclusion -  MorgenboosterDesigning for Inclusion -  Morgenbooster
Designing for Inclusion - Morgenbooster
 
eCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfeCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdf
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering Portfolio
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's Matters
 
A complete guide to the design thinking process
A complete guide to the design thinking processA complete guide to the design thinking process
A complete guide to the design thinking process
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
 

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