Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Design

Garth Braithwaite
February 11, 2014

How to Design

A short presentation I gave to the Qualifyors interns.

Garth Braithwaite

February 11, 2014
Tweet

More Decks by Garth Braithwaite

Other Decks in Design

Transcript

  1. How to Design
    A complete oversimplification of a creative process.

    View Slide

  2. Me.
    • Computer Scientist at Adobe
    • Senior Experience Designer
    • Director of UX at Rain

    View Slide

  3. I’m full of crap.

    View Slide

  4. View Slide

  5. Design?
    • User Experience (UX)
    • Information Architecture (IA)
    • Interaction (IxD)
    • Visual (UI)

    View Slide

  6. User Experience

    View Slide

  7. User Experience
    • Primary Purpose: Understand the user, their needs, and help make it
    easy for them to accomplish their tasks
    • Work:
    • Research, User interviews, etc.
    • Deliverables:
    • Personas
    • Flows
    • Wireframes
    • Prototypes

    View Slide

  8. Personas
    • Definition!
    • A persona is a user-archetype, a fictional representation of target users designers and
    developers can use to help guide decisions about product, features, navigation, visual design.
    • Goals!
    • Establish the user (primary) for the product
    • Help clients/designers/developers to separate themselves from the project
    • Tools
    • Photoshop: Rastertastic, Action
    • InDesign: Master, Text Variables, Paragraph Styles
    • Example!
    • Lindsey.psd
    • Personas.indd

    View Slide

  9. Flows
    • Definition!
    • A visual hierarchy for navigation, website organization, and use cases.
    • Goals!
    • Organize priorities (mobile first)
    • Simplify (in existing projects)
    • Establish Navigation (holy temple)
    • Tools
    • Omnigraffe: Diagram Outline
    • Illustrator: Symbols
    • Example!
    • Service
    • Product

    View Slide

  10. Wireframes
    • Definition!
    • A basic visual guide used in interface design to suggest the structure of a website and relationships between
    its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface.
    • Goals!
    • Information Hierarchy
    • Preliminary Layout (respect the visual/interface designer)
    • Initial testable product
    • Tools
    • Illustrator: Symbols
    • InDesign: Libraries, Master, Text Variables, Paragraph Styles
    • Example!
    • Service
    • Product

    View Slide

  11. Prototypes
    • Definition!
    • An interactive representation of an application design created for testing and communication to clients
    and developers.
    • Goals!
    • Client Sign Off
    • Communication to Developer
    • Usability Study
    • Tools
    • HTML/CSS/JS
    • InDesign
    • AfterEffects (non-interactive)
    • Example!
    • Skullcandy

    View Slide

  12. Visual Design

    View Slide

  13. Visual Design
    • Primary Purpose: communication, stylizing, and problem-solving through
    the use of type, space, and image.
    • Work:
    • Visual Research
    • Deliverables:
    • Mood Board
    • StyleTile
    • Comps
    • Prototypes

    View Slide

  14. Mood Board
    • Definition:
    • A mood board is a type of collage that may consist of images, text, and
    samples of objects in a composition of the choice of the mood board creator.
    • Goals:
    • Quick iteration
    • Determine overarching mood/feeling of visual design
    • Tools:
    • Illustrator
    • Example:

    View Slide

  15. Style Tiles
    • Definition:
    • A mood board is a type of collage that may consist of images, text, and samples of objects in a
    composition of the choice of the mood board creator.
    • Goals:
    • Form common language
    • More structure than mood board
    • Design + context
    • Tools:
    • Photoshop
    • Illustrator
    • Examples:

    View Slide

  16. Comps
    • Definition:
    • Visual compositions are the as close as possible to the final visual design.
    • Goals:
    • Define UI elements and layout
    • Full context
    • Tools:
    • Photoshop
    • Illustrator
    • Examples:

    View Slide

  17. Prototypes
    • Definition!
    • An interactive representation of an application design created for testing and communication to clients
    and developers.
    • Goals!
    • Client Sign Off
    • Communication to Developer
    • Usability Study
    • Tools
    • HTML/CSS/JS
    • InDesign
    • AfterEffects (non-interactive)
    • Example!
    • Skullcandy

    View Slide

  18. Interaction Design

    View Slide

  19. Interaction Design
    • Primary Purpose: Leveraging motion to better
    communicate the flow of a user’s task.
    • Work:
    • Animation
    • Deliverables:
    • Interaction Animations
    • Prototypes

    View Slide

  20. Workflow

    View Slide