How to Design

A short presentation I gave to the Qualifyors interns.

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