How to Design

B5cf6e112eeee572d722743dea924487?s=47 Garth Braithwaite
February 11, 2014

How to Design

A short presentation I gave to the Qualifyors interns.

B5cf6e112eeee572d722743dea924487?s=128

Garth Braithwaite

February 11, 2014
Tweet

Transcript

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

  2. Me. • Computer Scientist at Adobe • Senior Experience Designer

    • Director of UX at Rain
  3. I’m full of crap.

  4. None
  5. Design? • User Experience (UX) • Information Architecture (IA) •

    Interaction (IxD) • Visual (UI)
  6. User Experience

  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
  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
  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
  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
  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
  12. Visual Design

  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
  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:
  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:
  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:
  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
  18. Interaction Design

  19. Interaction Design • Primary Purpose: Leveraging motion to better communicate

    the flow of a user’s task. • Work: • Animation • Deliverables: • Interaction Animations • Prototypes
  20. Workflow