The document discusses various design deliverables used in the design process including personas, flows, wireframes, prototypes, style tiles, comps, and prototypes. It provides definitions and goals for each deliverable type to guide design decisions and development handoff. The document is intended to outline design deliverables for an open source or DIY design project.

1. needsOPEN SOURCE
DESIGN

12. DIY Design

13. Design?

14. Design?
• User Experience (UX)

15. Design?
• User Experience (UX)
• Information Architecture (IA)

16. Design?
• User Experience (UX)
• Information Architecture (IA)
• Interaction (IxD)

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

18. User Experience

19. User Experience
• Primary Purpose: Understand the user, their needs,
and help make it easy for them to accomplish their
task.

20. User Experience
• Primary Purpose: Understand the user, their needs,
and help make it easy for them to accomplish their
task.
• Work

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

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

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

24. Personas

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

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

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

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

29. Personas

30. Flows

31. Flows
• Definition: A visual hierarchy for navigation,
website organization, and use cases.

32. Flows
• Definition: A visual hierarchy for navigation,
website organization, and use cases.
• Goals:

33. Flows
• Definition: A visual hierarchy for navigation,
website organization, and use cases.
• Goals:
• Organize priorities (mobile first)

34. Flows
• Definition: A visual hierarchy for navigation,
website organization, and use cases.
• Goals:
• Organize priorities (mobile first)
• Simplify (in existing projects)

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

36. Flows

37. Wireframes

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

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

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

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

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

43. Wireframes

44. Prototypes

45. Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.

46. Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.
• Goals

47. Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.
• Goals
• Client Sign Off

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

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

50. Prototypes

51. Visual Design

52. Visual Design
• Primary Purpose: communication, stylizing, and
problem-solving through the use of type, space, and
image

53. Visual Design
• Primary Purpose: communication, stylizing, and
problem-solving through the use of type, space, and
image
• Work

54. Visual Design
• Primary Purpose: communication, stylizing, and
problem-solving through the use of type, space, and
image
• Work
• Visual Research

55. Visual Design
• Primary Purpose: communication, stylizing, and
problem-solving through the use of type, space, and
image
• Work
• Visual Research
• Deliverables

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

57. Mood Board

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

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

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

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

62. Mood Board
We Review Utah
Moodboard

63. Style Tiles

64. Style Tiles
• Definition: slightly more defined and structured
mood board that shows elements in a context
similar to the end product.

65. Style Tiles
• Definition: slightly more defined and structured
mood board that shows elements in a context
similar to the end product.
• Goals

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

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

68. 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 Expert Fanatic
Novel Clever Loyal
http://www.thinkgeek.com
Redesign by @garthdb

69. Comps

70. Comps
• Definition: Visual compositions are the
deliverable that is as close as possible to the final
visual design.

71. Comps
• Definition: Visual compositions are the
deliverable that is as close as possible to the final
visual design.
• Goals

72. Comps
• Definition: Visual compositions are the
deliverable that is as close as possible to the final
visual design.
• Goals
• Define UI elements and layout

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

74. Comps

75. Prototypes

76. Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.

77. Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.
• Goals

78. Prototypes
• Definition: An interactive representation of an
application design created for testing and
communication to clients and developers.
• Goals
• Client Sign Off

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

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

81. Prototypes

82. Interaction Design

83. Interaction Design
• Primary Purpose: Leveraging motion to better
communicate the flow of a user’s task

84. Interaction Design
• Primary Purpose: Leveraging motion to better
communicate the flow of a user’s task
• Work

85. Interaction Design
• Primary Purpose: Leveraging motion to better
communicate the flow of a user’s task
• Work
• Animation

86. Interaction Design
• Primary Purpose: Leveraging motion to better
communicate the flow of a user’s task
• Work
• Animation
• Deliverables

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

88. Prototypes

89. Workflow
A bit of a perfect world
example

90. You can do it.

91. Thank you.