SlideShare ist ein Scribd-Unternehmen logo
1 von 27
rface design
                   F or inte
                             ^
Sketching
   101
 by jack
         son Fox


                             june 9, 2009
Sketching is not the
 same as drawing
Drawing
Sketching   soxiam @ flickr
How To
Sketch
Basic Shapes

 Circles    Rectangles   Arrows




Triangles   Squiggles
Techniques
•   Line Thickness     •   Depth
•   Size               •   Notation
•   Shading
•   Selective Detail
•   Isolation
Give emphasis to
            parts of the design
            by increasing the
            weight of the lines
            you’re drawing




Line Thickness
Size can also be used
       to draw aention to
       parts of your sketch




Size
Sometimes you want
          to de-emphasize part
          of your sketch —
          shading an area can
          draw aention away
          from it




Shading
Filling in details only
              for the important
              bits saves time and
              shows what’s
              important




Selective Detail
You can take
            selective detail
            even further, and
            only sketch in
            certain areas,
            leaving the rest
            prey fuzzy




Isolation
Adding just a bit of
        depth and perspective
        helps make UI bits in
        your sketches look
        “clickable”




Depth
Don’t be scared to
        annotate the crap out
        of your sketches to
        help explain what’s
        going on




Notes
Sketching
Interfaces
•   Drawing buons
•   Showing states
•   Headings & text
Drawing Buttons
The secret to good buttons is thickening the right and bottom lines on the the rectangle to give the button some depth. Feel free to go
wild with rounded borders and shading, but an extra two lines are all you really need.
Showing States
Storyboards are a handy way to show the progression of states for an element. To keep sketches clean, you can sketch out these
alternate states on a separate page (sketch templates like the one above are handy).
Headings and Text
The only real difference between headings and body text is line weight. As always, the key is to put in only as much detail as you need,
and most of the time, that means you don’t really need to show the actual text on the page. Some squiggles will do.
What To
Sketch
Sketching 201
Exploratory Sketching                                                                                             ugleah @ slideshare

The informality of sketching makes it a great medium for exploring alternative design ideas. There are a lot of ways to generate new
ideas: inspiration libraries, word association, conceptual models, etc.
Sketchboards                                                                                                       ssumers1 @ flickr

Sketchboards are an iterative & interactive approach to exploring design problems. Design alternatives are quickly sketched out and
placed on the board, organized, then critiqued by participants. Kind of a collaborative storyboard combined with a design studio.
Sketching Components                                                                                                  ryan singer @ 37s

Start your design by sketching out the individual bits of the interface the user will need in order to complete their task. Focus on
designing each one separately, then arrange them into a final cohesive design.
Sketching
  Tools
Superfine & Medium Tip
Ultra Fine Sharpie
                      Pi Markers




                                  Dorky pen
                                  holder


        Brush Tip
        Warm Gray
        Pi Markers

                           Pen & Pencil


The Basics
Sketch Templates
             From Adaptive Path, includes 6-up and
             1-up sketch templates




             Markers
             •   Pentel Sign Pens are good for thick
                 lines, and won’t stink up the joint
             •   Micron pens seem to be built a bit
                 beer than my usual Pi markers




Other Handy Tools

Weitere ähnliche Inhalte

Was ist angesagt?

Design and sketching workshop
Design and sketching workshopDesign and sketching workshop
Design and sketching workshopRakesh Kumar Das
 
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)Shawn Calvert
 
One and Two- Point Perspective
One and Two- Point PerspectiveOne and Two- Point Perspective
One and Two- Point PerspectiveEmily Valenza
 
Design elements and principles
Design elements and principlesDesign elements and principles
Design elements and principlesMaged A. Morsy
 
One point perspective
One point perspectiveOne point perspective
One point perspectivecisenberg2
 
Principles of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryPrinciples of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryAbanoub Hanna
 
1 point perspective drawing
1 point perspective drawing1 point perspective drawing
1 point perspective drawingRajat Nainwal
 
3rd gesture drawing lesson
3rd gesture drawing lesson3rd gesture drawing lesson
3rd gesture drawing lessonDevon Inglee
 
Still life drawing
Still life drawingStill life drawing
Still life drawingJason Eoff
 
Perspective Power Point
Perspective  Power PointPerspective  Power Point
Perspective Power Pointbambam242
 
Graphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationGraphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationShahria Hossain
 
Perspective
PerspectivePerspective
Perspectivej Nourry
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design compositionsuniltalekar1
 
Understanding Graphic Design
Understanding Graphic DesignUnderstanding Graphic Design
Understanding Graphic DesignFrank Curkovic
 

Was ist angesagt? (20)

Design and sketching workshop
Design and sketching workshopDesign and sketching workshop
Design and sketching workshop
 
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
 
One and Two- Point Perspective
One and Two- Point PerspectiveOne and Two- Point Perspective
One and Two- Point Perspective
 
Design elements and principles
Design elements and principlesDesign elements and principles
Design elements and principles
 
One point perspective
One point perspectiveOne point perspective
One point perspective
 
Gesture drawing
Gesture drawingGesture drawing
Gesture drawing
 
Composition Tips
Composition TipsComposition Tips
Composition Tips
 
Contour line drawing
Contour line drawingContour line drawing
Contour line drawing
 
Principles of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryPrinciples of Design - Graphic Design Theory
Principles of Design - Graphic Design Theory
 
1 point perspective drawing
1 point perspective drawing1 point perspective drawing
1 point perspective drawing
 
3rd gesture drawing lesson
3rd gesture drawing lesson3rd gesture drawing lesson
3rd gesture drawing lesson
 
Still life drawing
Still life drawingStill life drawing
Still life drawing
 
Perspective Power Point
Perspective  Power PointPerspective  Power Point
Perspective Power Point
 
Graphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationGraphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspiration
 
Perspective
PerspectivePerspective
Perspective
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design composition
 
Understanding Graphic Design
Understanding Graphic DesignUnderstanding Graphic Design
Understanding Graphic Design
 
Sketching Basics- Part 1
Sketching Basics- Part 1Sketching Basics- Part 1
Sketching Basics- Part 1
 
2 point perspective
2 point perspective2 point perspective
2 point perspective
 
Design Elements
Design ElementsDesign Elements
Design Elements
 

Andere mochten auch

How to "Do" Lean UX in 5 Easy Steps
How to "Do" Lean UX in 5 Easy StepsHow to "Do" Lean UX in 5 Easy Steps
How to "Do" Lean UX in 5 Easy StepsJeff Gothelf
 
Users' Story: UX Storyboarding
Users' Story: UX StoryboardingUsers' Story: UX Storyboarding
Users' Story: UX StoryboardingFrank Garofalo
 
SMS-SMPP-Concepts
SMS-SMPP-ConceptsSMS-SMPP-Concepts
SMS-SMPP-ConceptsDuy Do Phan
 
Designing with Sketch App
Designing with Sketch AppDesigning with Sketch App
Designing with Sketch AppIan Soper
 
App介面設計要點
App介面設計要點App介面設計要點
App介面設計要點Ya Qiao Wu
 
Engineering Graphics-Free Hand sketch
Engineering Graphics-Free Hand sketchEngineering Graphics-Free Hand sketch
Engineering Graphics-Free Hand sketchDr. Ramesh B
 
Lesson 14-freehand-sketching-i
Lesson 14-freehand-sketching-iLesson 14-freehand-sketching-i
Lesson 14-freehand-sketching-ieglive
 
Freehand sketching
Freehand sketchingFreehand sketching
Freehand sketchinghizam1911
 
Freehand drawing
Freehand drawingFreehand drawing
Freehand drawingEddie Abug
 
Laravel - 系統全攻略(續)
Laravel - 系統全攻略(續)Laravel - 系統全攻略(續)
Laravel - 系統全攻略(續)Vincent Chi
 
Grade 2 mtap reviewer
Grade 2 mtap reviewerGrade 2 mtap reviewer
Grade 2 mtap reviewerEclud Sugar
 
Lecture 3 A Isometric And Orthographic Sketching 2009
Lecture 3 A   Isometric And Orthographic Sketching 2009Lecture 3 A   Isometric And Orthographic Sketching 2009
Lecture 3 A Isometric And Orthographic Sketching 2009nttf
 
Isometric projections for engineering students
Isometric projections for engineering studentsIsometric projections for engineering students
Isometric projections for engineering studentsAkshay Darji
 
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技Will Huang
 

Andere mochten auch (17)

Basic sketching
Basic sketchingBasic sketching
Basic sketching
 
How to "Do" Lean UX in 5 Easy Steps
How to "Do" Lean UX in 5 Easy StepsHow to "Do" Lean UX in 5 Easy Steps
How to "Do" Lean UX in 5 Easy Steps
 
Users' Story: UX Storyboarding
Users' Story: UX StoryboardingUsers' Story: UX Storyboarding
Users' Story: UX Storyboarding
 
SMPP
SMPPSMPP
SMPP
 
SMS-SMPP-Concepts
SMS-SMPP-ConceptsSMS-SMPP-Concepts
SMS-SMPP-Concepts
 
Designing with Sketch App
Designing with Sketch AppDesigning with Sketch App
Designing with Sketch App
 
App介面設計要點
App介面設計要點App介面設計要點
App介面設計要點
 
Engineering Graphics-Free Hand sketch
Engineering Graphics-Free Hand sketchEngineering Graphics-Free Hand sketch
Engineering Graphics-Free Hand sketch
 
Lesson 14-freehand-sketching-i
Lesson 14-freehand-sketching-iLesson 14-freehand-sketching-i
Lesson 14-freehand-sketching-i
 
Freehand sketching
Freehand sketchingFreehand sketching
Freehand sketching
 
Freehand drawing
Freehand drawingFreehand drawing
Freehand drawing
 
Laravel - 系統全攻略(續)
Laravel - 系統全攻略(續)Laravel - 系統全攻略(續)
Laravel - 系統全攻略(續)
 
Grade 2 mtap reviewer
Grade 2 mtap reviewerGrade 2 mtap reviewer
Grade 2 mtap reviewer
 
Lecture 3 A Isometric And Orthographic Sketching 2009
Lecture 3 A   Isometric And Orthographic Sketching 2009Lecture 3 A   Isometric And Orthographic Sketching 2009
Lecture 3 A Isometric And Orthographic Sketching 2009
 
Isometric projections for engineering students
Isometric projections for engineering studentsIsometric projections for engineering students
Isometric projections for engineering students
 
Sketch Thinking
Sketch ThinkingSketch Thinking
Sketch Thinking
 
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技
 

Ähnlich wie Sketching for Design

See => Sort => Sketch: Pen & Paper Techniques for Getting From Research to De...
See => Sort => Sketch: Pen & Paper Techniques for Getting From Research to De...See => Sort => Sketch: Pen & Paper Techniques for Getting From Research to De...
See => Sort => Sketch: Pen & Paper Techniques for Getting From Research to De...BayCHI
 
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
 
Pen & Paper Tools for getting from Research to Design
Pen & Paper Tools for getting from Research to DesignPen & Paper Tools for getting from Research to Design
Pen & Paper Tools for getting from Research to DesignKate Rutter
 
Basic Technical Drawing and Sketching.ppt
Basic Technical Drawing and Sketching.pptBasic Technical Drawing and Sketching.ppt
Basic Technical Drawing and Sketching.pptmnafis
 
Graphic Designing Course in Rohini | Graphic Designing Course in Pitampura
Graphic Designing Course in Rohini | Graphic Designing Course in PitampuraGraphic Designing Course in Rohini | Graphic Designing Course in Pitampura
Graphic Designing Course in Rohini | Graphic Designing Course in Pitampurakhushboo4894
 
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
 
Sketching workshop for Google London
Sketching workshop for Google LondonSketching workshop for Google London
Sketching workshop for Google Londonpubsmith
 
Gsmst foe 04 sketching and dimensioning part 3 07
Gsmst foe 04 sketching and dimensioning part 3 07Gsmst foe 04 sketching and dimensioning part 3 07
Gsmst foe 04 sketching and dimensioning part 3 07Abhishek Yagnik
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principlesDzung Nguyen
 
Class 3 presentation posted
Class 3 presentation postedClass 3 presentation posted
Class 3 presentation postedlaura_gerold
 
Element of design
Element of designElement of design
Element of designRahul Gupta
 
Good Graphic design and an Introduction to Inkscape
Good Graphic design and an Introduction to InkscapeGood Graphic design and an Introduction to Inkscape
Good Graphic design and an Introduction to InkscapeOmar Mohammad
 
Habits of Effective Designers - Handout
Habits of Effective Designers - HandoutHabits of Effective Designers - Handout
Habits of Effective Designers - HandoutDUSPviz
 
Becoming a Web Design Champion
Becoming a Web Design ChampionBecoming a Web Design Champion
Becoming a Web Design ChampionMeagan Fisher
 
Good Design Faster at UX Sofia
Good Design Faster at UX SofiaGood Design Faster at UX Sofia
Good Design Faster at UX SofiaPeter Boersma
 

Ähnlich wie Sketching for Design (20)

3 d modeling (mac 2013)
3 d modeling (mac 2013)3 d modeling (mac 2013)
3 d modeling (mac 2013)
 
See => Sort => Sketch: Pen & Paper Techniques for Getting From Research to De...
See => Sort => Sketch: Pen & Paper Techniques for Getting From Research to De...See => Sort => Sketch: Pen & Paper Techniques for Getting From Research to De...
See => Sort => Sketch: Pen & Paper Techniques for Getting From Research to De...
 
Penandpapertools
PenandpapertoolsPenandpapertools
Penandpapertools
 
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...
 
Pen & Paper Tools for getting from Research to Design
Pen & Paper Tools for getting from Research to DesignPen & Paper Tools for getting from Research to Design
Pen & Paper Tools for getting from Research to Design
 
Basic Technical Drawing and Sketching.ppt
Basic Technical Drawing and Sketching.pptBasic Technical Drawing and Sketching.ppt
Basic Technical Drawing and Sketching.ppt
 
Graphic Designing Course in Rohini | Graphic Designing Course in Pitampura
Graphic Designing Course in Rohini | Graphic Designing Course in PitampuraGraphic Designing Course in Rohini | Graphic Designing Course in Pitampura
Graphic Designing Course in Rohini | Graphic Designing Course in Pitampura
 
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
 
Sketching workshop for Google London
Sketching workshop for Google LondonSketching workshop for Google London
Sketching workshop for Google London
 
Gsmst foe 04 sketching and dimensioning part 3 07
Gsmst foe 04 sketching and dimensioning part 3 07Gsmst foe 04 sketching and dimensioning part 3 07
Gsmst foe 04 sketching and dimensioning part 3 07
 
Dr chapter 1
Dr chapter 1Dr chapter 1
Dr chapter 1
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
Class 3 presentation posted
Class 3 presentation postedClass 3 presentation posted
Class 3 presentation posted
 
Elements of design
Elements of designElements of design
Elements of design
 
Element of design
Element of designElement of design
Element of design
 
Good Graphic design and an Introduction to Inkscape
Good Graphic design and an Introduction to InkscapeGood Graphic design and an Introduction to Inkscape
Good Graphic design and an Introduction to Inkscape
 
Habits of Effective Designers - Handout
Habits of Effective Designers - HandoutHabits of Effective Designers - Handout
Habits of Effective Designers - Handout
 
Becoming a Web Design Champion
Becoming a Web Design ChampionBecoming a Web Design Champion
Becoming a Web Design Champion
 
Good Design Faster at UX Sofia
Good Design Faster at UX SofiaGood Design Faster at UX Sofia
Good Design Faster at UX Sofia
 
PPT3.pptx
PPT3.pptxPPT3.pptx
PPT3.pptx
 

Kürzlich hochgeladen

Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy ysrajece
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 

Kürzlich hochgeladen (20)

Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy y
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 

Sketching for Design

  • 1. rface design F or inte ^ Sketching 101 by jack son Fox june 9, 2009
  • 2. Sketching is not the same as drawing
  • 4. Sketching soxiam @ flickr
  • 6. Basic Shapes Circles Rectangles Arrows Triangles Squiggles
  • 7. Techniques • Line Thickness • Depth • Size • Notation • Shading • Selective Detail • Isolation
  • 8. Give emphasis to parts of the design by increasing the weight of the lines you’re drawing Line Thickness
  • 9. Size can also be used to draw aention to parts of your sketch Size
  • 10. Sometimes you want to de-emphasize part of your sketch — shading an area can draw aention away from it Shading
  • 11. Filling in details only for the important bits saves time and shows what’s important Selective Detail
  • 12. You can take selective detail even further, and only sketch in certain areas, leaving the rest prey fuzzy Isolation
  • 13. Adding just a bit of depth and perspective helps make UI bits in your sketches look “clickable” Depth
  • 14. Don’t be scared to annotate the crap out of your sketches to help explain what’s going on Notes
  • 15. Sketching Interfaces • Drawing buons • Showing states • Headings & text
  • 16. Drawing Buttons The secret to good buttons is thickening the right and bottom lines on the the rectangle to give the button some depth. Feel free to go wild with rounded borders and shading, but an extra two lines are all you really need.
  • 17. Showing States Storyboards are a handy way to show the progression of states for an element. To keep sketches clean, you can sketch out these alternate states on a separate page (sketch templates like the one above are handy).
  • 18. Headings and Text The only real difference between headings and body text is line weight. As always, the key is to put in only as much detail as you need, and most of the time, that means you don’t really need to show the actual text on the page. Some squiggles will do.
  • 20.
  • 22. Exploratory Sketching ugleah @ slideshare The informality of sketching makes it a great medium for exploring alternative design ideas. There are a lot of ways to generate new ideas: inspiration libraries, word association, conceptual models, etc.
  • 23. Sketchboards ssumers1 @ flickr Sketchboards are an iterative & interactive approach to exploring design problems. Design alternatives are quickly sketched out and placed on the board, organized, then critiqued by participants. Kind of a collaborative storyboard combined with a design studio.
  • 24. Sketching Components ryan singer @ 37s Start your design by sketching out the individual bits of the interface the user will need in order to complete their task. Focus on designing each one separately, then arrange them into a final cohesive design.
  • 26. Superfine & Medium Tip Ultra Fine Sharpie Pi Markers Dorky pen holder Brush Tip Warm Gray Pi Markers Pen & Pencil The Basics
  • 27. Sketch Templates From Adaptive Path, includes 6-up and 1-up sketch templates Markers • Pentel Sign Pens are good for thick lines, and won’t stink up the joint • Micron pens seem to be built a bit beer than my usual Pi markers Other Handy Tools