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. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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:
  8. 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:
  9. 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:
  10. 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
  11. Interaction Design • Primary Purpose: Leveraging motion to better communicate

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