Open Source Needs Design

needs

OPEN SOURCEDESIGN

DIY Design

Design?

Design?

• User Experience (UX)

Design?

• User Experience (UX)

• Information Architecture (IA)

Design?

• User Experience (UX)

• Information Architecture (IA)

• Interaction (IxD)

Design?

• User Experience (UX)

• Information Architecture (IA)

• Interaction (IxD)

• Visual (UI)

User Experience

User Experience• Primary Purpose: Understand the user, their needs,

and help make it easy for them to accomplish their task.

User Experience• Primary Purpose: Understand the user, their needs,

and help make it easy for them to accomplish their task.

• Work

User Experience• Primary Purpose: Understand the user, their needs,

and help make it easy for them to accomplish their task.

• Work

• Research, User Interviews, etc.

User Experience• Primary Purpose: Understand the user, their needs,

and help make it easy for them to accomplish their task.

• Work

• Research, User Interviews, etc.

• Deliverables

User Experience• Primary Purpose: Understand the user, their needs,

and help make it easy for them to accomplish their task.

• Work

• Research, User Interviews, etc.

• Deliverables

• Personas, Flows, Wireframes, Prototypes

Personas

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.

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:

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

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

Personas

Flows

Flows• Definition: A visual hierarchy for navigation,

website organization, and use cases.

Flows• Definition: A visual hierarchy for navigation,

website organization, and use cases.

• Goals:

Flows• Definition: A visual hierarchy for navigation,

website organization, and use cases.

• Goals:

• Organize priorities (mobile first)

Flows• Definition: A visual hierarchy for navigation,

website organization, and use cases.

• Goals:

• Organize priorities (mobile first)

• Simplify (in existing projects)

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)

Flows

Wireframes

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.

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

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

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)

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

Wireframes

Prototypes

Prototypes• Definition: An interactive representation of an

application design created for testing and communication to clients and developers.

Prototypes• Definition: An interactive representation of an

application design created for testing and communication to clients and developers.

• Goals

Prototypes• Definition: An interactive representation of an

application design created for testing and communication to clients and developers.

• Goals

• Client Sign Off

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

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

Prototypes

Visual Design

Visual Design• Primary Purpose: communication, stylizing, and

problem-solving through the use of type, space, and image

Visual Design• Primary Purpose: communication, stylizing, and

problem-solving through the use of type, space, and image

• Work

Visual Design• Primary Purpose: communication, stylizing, and

problem-solving through the use of type, space, and image

• Work

• Visual Research

Visual Design• Primary Purpose: communication, stylizing, and

problem-solving through the use of type, space, and image

• Work

• Visual Research

• Deliverables

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

Mood Board

Mood Board• Definition: 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.

Mood Board• Definition: 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

Mood Board• Definition: 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

Mood Board• Definition: 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

Mood Board

We Review UtahMoodboard

Style Tiles

Style Tiles• Definition: slightly more defined and structured

mood board that shows elements in a context similar to the end product.

Style Tiles• Definition: slightly more defined and structured

mood board that shows elements in a context similar to the end product.

• Goals

Style Tiles• Definition: slightly more defined and structured

mood board that shows elements in a context similar to the end product.

• Goals

• Form common language

Style Tiles• Definition: slightly more defined and structured

mood board that shows elements in a context similar to the end product.

• Goals

• Form common language

• Design + context

Style TilesStyle Tile

variation A

Possible Colors

Textures

Inspiration

Font: 8Bit Wonder #7D2820

Font: 8Bit Wonder #FC5241

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobor-tis nisl ut aliquip ex ea commodo consequat. Duis autem vel feugait nulla facilisi.

Font: Lucida Grande #333333

This is an example of a Text link »

Adjectives

Niche FanaticExpertNovel LoyalClever

http://www.thinkgeek.comRedesign by @garthdb

Comps

Comps• Definition: Visual compositions are the

deliverable that is as close as possible to the final visual design.

Comps• Definition: Visual compositions are the

deliverable that is as close as possible to the final visual design.

• Goals

Comps• Definition: Visual compositions are the

deliverable that is as close as possible to the final visual design.

• Goals

• Define UI elements and layout

Comps• Definition: Visual compositions are the

deliverable that is as close as possible to the final visual design.

• Goals

• Define UI elements and layout

• Full context

Comps

Prototypes

Prototypes• Definition: An interactive representation of an

application design created for testing and communication to clients and developers.

Prototypes• Definition: An interactive representation of an

application design created for testing and communication to clients and developers.

• Goals

Prototypes• Definition: An interactive representation of an

application design created for testing and communication to clients and developers.

• Goals

• Client Sign Off

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

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

Prototypes

Interaction Design

Interaction Design• Primary Purpose: Leveraging motion to better

communicate the flow of a user’s task

Interaction Design• Primary Purpose: Leveraging motion to better

communicate the flow of a user’s task

• Work

Interaction Design• Primary Purpose: Leveraging motion to better

communicate the flow of a user’s task

• Work

• Animation

Interaction Design• Primary Purpose: Leveraging motion to better

communicate the flow of a user’s task

• Work

• Animation

• Deliverables

Interaction Design• Primary Purpose: Leveraging motion to better

communicate the flow of a user’s task

• Work

• Animation

• Deliverables

• Interaction Animations, Prototypes

Prototypes

WorkflowA bit of a perfect world

example

You can do it.

Thank you.