Embed Size (px)
Citation preview
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.
