How to Design - Speaker Deck

Slide 1

Slide 1 text

How to Design A complete oversimpliﬁcation of a creative process.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

I’m full of crap.

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

User Experience

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Personas • Deﬁnition! • A persona is a user-archetype, a ﬁctional 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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Wireframes • Deﬁnition! • 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

Slide 11

Slide 11 text

Prototypes • Deﬁnition! • 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

Slide 12

Slide 12 text

Visual Design

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Mood Board • Deﬁnition: • 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:

Slide 15

Slide 15 text

Style Tiles • Deﬁnition: • 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:

Slide 16

Slide 16 text

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:

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Interaction Design

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Workﬂow