Embed Size (px)
Citation preview
Sketching FundamentalsRachel GlavesExperience DesignerAdaptive Path
Types of (Design) Sketches
informationinterface structureflow
Interactions
narrativeexperiencecontext
Storyboards
relationshipsvisual bullet points
Diagrams & Symbols
Elements of Effective Sketching
See Understand Talk
Can you see it?Can you understand it?
It’s not about being “bad” or “good”, it’s about...
What today looks like
Some examples...
Some examples...
Warm up!
ACTIVITY ONE:
1. Fill the page with overlapping rectangles
2. Pass to your neighbor
3. Outline 3-4 rectangles with the big sharpie
4. Pass to your neighbor
5. Shade in 3-4 rectangles with the gray marker
INSTRUCTIONS
Practicing Lines & Rectangles
ACTIVITY ONE:
1. Draw a template of 6 rectangles
2. Think of a challenge you’re facing in a project right now. Fill the rectangles with 6 ideas for how to solve that challenge.
3. Add labels, line weight and shading
INSTRUCTIONS
Brainstorming
ACTIVITY ONE:Brainstorming | demo sketch
Helpful Sketching Patterns
Header
Tab
User Picture
Photo
Video
Filler text
Pop-upModule
ArrowsLarger ones can
communicate weight, or act as labels
Side-scrolling Module
Drop ShadowsCommunicate depth and
bring attention to callouts or popup boxes
Calendar
Page curl
Mouse CursorIndicates a rollover state
CalloutsCan show alerts, help, guidance or
sketch annotations
Flows
Telling a story
Exploring Flow | demo sketch
Telling a story
Making Comics by Scott McCloud
ACTIVITY ONE:
1. Draw a template of 3 rectangles
2. Choose one idea from the previous brainstorming activity
3. Decide if your idea fits first, middle or last
4. Draw the flow: How do you get from one screen to the next?
6. Add labels, line weight and shading
INSTRUCTIONS
Exploring Flow
People!
Some examples...
Some examples...
ACTIVITY ONE:
1. Grab an earlier drawing with some space in the corner
2. Add some people:What are they feeling? What are they doing?
INSTRUCTIONS
Practicing People
Ways to Draw People
Hands!
Ways to Draw Hands
Keep it simple
http://www.flickr.com/photos/pepperlime/2603598952/
Motion!
ACTIVITY ONE:
1. Imagine a motion or animation within an interface
2. Draw it using one or more of our 4 techniques
3. Can your group guess what motion you intended?
INSTRUCTIONS
Practicing Motion
Ways to Draw Motion
Motion Lines
Arrows
Wiggle Lines
Ghosting
Motion
Sketching: Drawing Techniques for Product Designers by Roselien Stuer and Koos Eissen : http://sketching.nl/
Motion
Sketching: Drawing Techniques for Product Designers by Roselien Stuer and Koos Eissen : http://sketching.nl/
Motion
http://www.google.com/patents?id=mM5dAAAAEBAJ&dq=1853567
Depth!
Depth
Example | Perspective
Essential Elements by Matt Tweed
Ways to Draw Depth
Perspective
Overlap & SizeReflection
Shadows
Layouts!
Tell the story
Butterfly Flows
Semi-circle Diagonal Yours!
Place + Person Backdrop
Layout | An example
ACTIVITY ONE:
1. Choose a layout (or think of a different one!)
2. Choose one technique we learned earlier:People, Hands, Motion, Depth
3. Choose a sketch from earlier
4. Put them all together:re-interpret the sketch using layout and technique30 Minutes
5. Share what we learned15 Minutes
INSTRUCTIONS
Putting it all together
More Examples
Arrows, labels and perspective direct the camera
http://www.myamericanartist.com/2008/05/coen-brothers-m.html
Example | Movie Storyboards
Example | Perspective
A more detailed drawing of planes in perspective
Sketching: Drawing Techniques for Product Designers by Roselien Stuer and Koos Eissen : http://sketching.nl/
Example | Color
Drawing for Designers by Alan Pipes, p. 66
Example | Color and Layout
Sketching: Drawing Techniques for Product Designers by Roselien Stuer and Koos Eissen : http://sketching.nl/
Example | Layout - semi-circle
From Word to Image: Storyboarding and the Filmmaking Process by Marcie Begleiter, p. 28
