How to Design

A short presentation I gave to the Qualifyors interns.

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