Scribd Logo
Upload

Welcome to Scribd!

  • Fundamentals of Sketching

    Uploaded by

    asims
    952 views46 pages
    This document discusses various sketching techniques for experience design. It covers types of sketches like diagrams, storyboards, and interaction flows. It also outlines elements of effective sketching like using simple lines and shapes. The document provides examples of techniques like using people, hands, motion lines, depth cues, and layouts. It describes an activity where participants practice these techniques by reworking earlier sketches. The goal is to get comfortable quickly communicating ideas through sketching.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses various sketching techniques for experience design. It covers types of sketches like diagrams, storyboards, and interaction flows. It also outlines elements of effective sketching like using simple lines and shapes. The document provides examples of techniques like using people, hands, motion lines, depth cues, and layouts. It describes an activity where participants practice these techniques by reworking earlier sketches. The goal is to get comfortable quickly communicating ideas through sketching.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    952 views46 pages

    Fundamentals of Sketching

    Uploaded by

    asims
    This document discusses various sketching techniques for experience design. It covers types of sketches like diagrams, storyboards, and interaction flows. It also outlines elements of effective sketching like using simple lines and shapes. The document provides examples of techniques like using people, hands, motion lines, depth cues, and layouts. It describes an activity where participants practice these techniques by reworking earlier sketches. The goal is to get comfortable quickly communicating ideas through sketching.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 46

    Sketching Fundamentals

    Rachel Glaves
    Experience Designer
    Adaptive Path
    Types of (Design) Sketches

    Diagrams & Symbols


    relationships
    visual bullet points

    Storyboards
    narrative
    experience
    context

    Interactions
    information
    interface structure
    flow
    Elements of Effective Sketching

    See Understand Talk


    It’s not about being “bad” or “good”, it’s about...

    Can you see it?


    Can you understand it?
    What today looks like
    Some examples...
    Some examples...
    Warm up!
    ACTIVITY
    PracticingONE:
    Lines & Rectangles

    INSTRUCTIONS

    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
    ACTIVITY ONE:
    Brainstorming

    INSTRUCTIONS

    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


    ACTIVITY ONE: | demo sketch
    Brainstorming
    Helpful Sketching Patterns

    Callouts
    Header Can show alerts, Drop Shadows
    help, guidance or Communicate depth and
    sketch annotations bring attention to
    Tab callouts or popup boxes

    Filler text
    Pop-up Calendar
    Module

    User
    Picture Page curl
    Arrows
    Photo Larger ones can
    communicate weight,
    or act as labels
    Video Mouse Cursor
    Indicates a rollover state

    Side-scrolling Module
    Flows
    Telling a story
    Exploring Flow | demo sketch
    Telling a story

    Making Comics by Scott McCloud


    ACTIVITY
    ExploringONE:
    Flow

    INSTRUCTIONS

    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
    People!
    Some examples...
    Some examples...
    ACTIVITY
    PracticingONE:
    People

    INSTRUCTIONS

    1. Grab an earlier drawing with some space


    in the corner

    2. Add some people:


    What are they feeling? What are they doing?
    Ways to Draw People
    Hands!
    Ways to Draw Hands
    Keep it simple

    http://www.flickr.com/photos/pepperlime/2603598952/
    Motion!
    ACTIVITY
    PracticingONE:
    Motion

    INSTRUCTIONS

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

    Shadows
    Reflection
    Overlap & Size

    Perspective
    Layouts!
    Tell the story

    Place + Person Backdrop Butterfly Flows

    Semi-circle Diagonal Yours!


    Layout | An example
    ACTIVITY
    Putting it ONE:
    all together

    INSTRUCTIONS

    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
    technique
    30 Minutes

    5. Share what we learned


    15 Minutes
    Thank you!

    Rachel Glaves
    glaves@adaptivepath.com
    More Examples
    Example | Movie Storyboards

    Arrows, labels and perspective direct the camera

    http://www.myamericanartist.com/2008/05/coen-brothers-m.html
    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

    You might also like