fundamentals of sketching

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

Rachel Glavesglaves@adaptivepath.com

Thank you!

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