Design?
• User Experience (UX)
• Information Architecture (IA)
Slide 16
Slide 16 text
Design?
• User Experience (UX)
• Information Architecture (IA)
• Interaction (IxD)
Slide 17
Slide 17 text
Design?
• User Experience (UX)
• Information Architecture (IA)
• Interaction (IxD)
• Visual (UI)
Slide 18
Slide 18 text
User Experience
Slide 19
Slide 19 text
User Experience
• Primary Purpose: Understand the user, their needs,
and help make it easy for them to accomplish their
task.
Slide 20
Slide 20 text
User Experience
• Primary Purpose: Understand the user, their needs,
and help make it easy for them to accomplish their
task.
• Work
Slide 21
Slide 21 text
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.
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
Personas
Slide 25
Slide 25 text
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.
Slide 26
Slide 26 text
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:
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
Personas
Slide 30
Slide 30 text
Flows
Slide 31
Slide 31 text
Flows
• Definition: A visual hierarchy for navigation,
website organization, and use cases.
Slide 32
Slide 32 text
Flows
• Definition: A visual hierarchy for navigation,
website organization, and use cases.
• Goals:
Slide 33
Slide 33 text
Flows
• Definition: A visual hierarchy for navigation,
website organization, and use cases.
• Goals:
• Organize priorities (mobile first)
Slide 34
Slide 34 text
Flows
• Definition: A visual hierarchy for navigation,
website organization, and use cases.
• Goals:
• Organize priorities (mobile first)
• Simplify (in existing projects)
Slide 35
Slide 35 text
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)
Slide 36
Slide 36 text
Flows
Slide 37
Slide 37 text
Wireframes
Slide 38
Slide 38 text
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.
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
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)
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
Wireframes
Slide 44
Slide 44 text
Prototypes
Slide 45
Slide 45 text
Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.
Slide 46
Slide 46 text
Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.
• Goals
Slide 47
Slide 47 text
Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.
• Goals
• Client Sign Off
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
Prototypes
Slide 51
Slide 51 text
Visual Design
Slide 52
Slide 52 text
Visual Design
• Primary Purpose: communication, stylizing, and
problem-solving through the use of type, space, and
image
Slide 53
Slide 53 text
Visual Design
• Primary Purpose: communication, stylizing, and
problem-solving through the use of type, space, and
image
• Work
Slide 54
Slide 54 text
Visual Design
• Primary Purpose: communication, stylizing, and
problem-solving through the use of type, space, and
image
• Work
• Visual Research
Slide 55
Slide 55 text
Visual Design
• Primary Purpose: communication, stylizing, and
problem-solving through the use of type, space, and
image
• Work
• Visual Research
• Deliverables
Slide 56
Slide 56 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 57
Slide 57 text
Mood Board
Slide 58
Slide 58 text
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.
Slide 59
Slide 59 text
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
Slide 60
Slide 60 text
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
Slide 61
Slide 61 text
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
Slide 62
Slide 62 text
Mood Board
We Review Utah
Moodboard
Slide 63
Slide 63 text
Style Tiles
Slide 64
Slide 64 text
Style Tiles
• Definition: slightly more defined and structured
mood board that shows elements in a context
similar to the end product.
Slide 65
Slide 65 text
Style Tiles
• Definition: slightly more defined and structured
mood board that shows elements in a context
similar to the end product.
• Goals
Slide 66
Slide 66 text
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
Slide 67
Slide 67 text
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
Slide 68
Slide 68 text
Style Tiles
Style 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 Fanatic
Expert
Novel Loyal
Clever
http://www.thinkgeek.com
Redesign by @garthdb
Slide 69
Slide 69 text
Comps
Slide 70
Slide 70 text
Comps
• Definition: Visual compositions are the
deliverable that is as close as possible to the final
visual design.
Slide 71
Slide 71 text
Comps
• Definition: Visual compositions are the
deliverable that is as close as possible to the final
visual design.
• Goals
Slide 72
Slide 72 text
Comps
• Definition: Visual compositions are the
deliverable that is as close as possible to the final
visual design.
• Goals
• Define UI elements and layout
Slide 73
Slide 73 text
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
Slide 74
Slide 74 text
Comps
Slide 75
Slide 75 text
Prototypes
Slide 76
Slide 76 text
Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.
Slide 77
Slide 77 text
Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.
• Goals
Slide 78
Slide 78 text
Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.
• Goals
• Client Sign Off
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
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
Slide 81
Slide 81 text
Prototypes
Slide 82
Slide 82 text
Interaction Design
Slide 83
Slide 83 text
Interaction Design
• Primary Purpose: Leveraging motion to better
communicate the flow of a user’s task
Slide 84
Slide 84 text
Interaction Design
• Primary Purpose: Leveraging motion to better
communicate the flow of a user’s task
• Work
Slide 85
Slide 85 text
Interaction Design
• Primary Purpose: Leveraging motion to better
communicate the flow of a user’s task
• Work
• Animation
Slide 86
Slide 86 text
Interaction Design
• Primary Purpose: Leveraging motion to better
communicate the flow of a user’s task
• Work
• Animation
• Deliverables
Slide 87
Slide 87 text
Interaction Design
• Primary Purpose: Leveraging motion to better
communicate the flow of a user’s task
• Work
• Animation
• Deliverables
• Interaction Animations, Prototypes