Working with Design in Development

A variation of a talk I gave for Family Search Devcon

Transcript

1. WORKING WITH DESIGN IN DEVELOPMENT
2. WORKING WITH DESIGN IN DEVELOPMENT A complete oversimplification of a creative process.
3. Assumption
4. Assumption Design can help your project.
5. Assumption
6. Assumption It would be beneficial to have design contributions on your projects.
7. How to get a designer
8. I am Garth
9. I am Garth Crusher of Dreams.
10. How to get a designer
11. How to get a designer • Clear messaging
12. How to get a designer • Clear messaging • Take what you can get
13. How to get a designer • Clear messaging • Take what you can get • Start by working with their workflow
14. How to get a designer • Clear messaging • Take what you can get • Start by working with their workflow • Encourage and train
15. DIY Design
16. Design?
17. Design? • User Experience (UX)
18. Design? • User Experience (UX) • Information Architecture (IA)
19. Design? • User Experience (UX) • Information Architecture (IA) • Interaction (IxD)
20. Design? • User Experience (UX) • Information Architecture (IA) • Interaction (IxD) • Visual (UI)
21. User Experience
22. User Experience • Primary Purpose: Understand the user, their needs, and help make it easy for them to accomplish their task.
23. User Experience • Primary Purpose: Understand the user, their needs, and help make it easy for them to accomplish their task. • Work
24. 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.
25. 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
26. 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
27. Personas
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.
29. 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:
30. 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
31. 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
32. Personas
33. Flows
34. Flows • Definition: A visual hierarchy for navigation, website organization, and use cases.
35. Flows • Definition: A visual hierarchy for navigation, website organization, and use cases. • Goals:
36. Flows • Definition: A visual hierarchy for navigation, website organization, and use cases. • Goals: • Organize priorities (mobile first)
37. Flows • Definition: A visual hierarchy for navigation, website organization, and use cases. • Goals: • Organize priorities (mobile first) • Simplify (in existing projects)
38. 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)
39. Flows
40. Wireframes
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.
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
43. 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
44. 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)
45. 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
46. Wireframes
47. Prototypes
48. Prototypes • Definition: An interactive representation of an application design created for testing and communication to clients and developers.
49. Prototypes • Definition: An interactive representation of an application design created for testing and communication to clients and developers. • Goals
50. Prototypes • Definition: An interactive representation of an application design created for testing and communication to clients and developers. • Goals • Client Sign Off
51. 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
52. 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
53. Prototypes
54. Visual Design
55. Visual Design • Primary Purpose: communication, stylizing, and problem-solving through the use of type, space, and image
56. Visual Design • Primary Purpose: communication, stylizing, and problem-solving through the use of type, space, and image • Work
57. Visual Design • Primary Purpose: communication, stylizing, and problem-solving through the use of type, space, and image • Work • Visual Research
58. Visual Design • Primary Purpose: communication, stylizing, and problem-solving through the use of type, space, and image • Work • Visual Research • Deliverables
59. 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
60. Mood Board
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.
62. 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
63. 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
64. 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
65. Mood Board We Review Utah Moodboard
66. Style Tiles
67. Style Tiles • Definition: slightly more defined and structured mood board that shows elements in a context similar to the end product.
68. Style Tiles • Definition: slightly more defined and structured mood board that shows elements in a context similar to the end product. • Goals
69. 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
70. 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
71. 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
72. Comps
73. Comps • Definition: Visual compositions are the deliverable that is as close as possible to the final visual design.
74. Comps • Definition: Visual compositions are the deliverable that is as close as possible to the final visual design. • Goals
75. Comps • Definition: Visual compositions are the deliverable that is as close as possible to the final visual design. • Goals • Define UI elements and layout
76. 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
77. Comps
78. Prototypes
79. Prototypes • Definition: An interactive representation of an application design created for testing and communication to clients and developers.
80. Prototypes • Definition: An interactive representation of an application design created for testing and communication to clients and developers. • Goals
81. Prototypes • Definition: An interactive representation of an application design created for testing and communication to clients and developers. • Goals • Client Sign Off
82. 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
83. 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
84. Prototypes
85. Interaction Design
86. Interaction Design • Primary Purpose: Leveraging motion to better communicate the flow of a user’s task
87. Interaction Design • Primary Purpose: Leveraging motion to better communicate the flow of a user’s task • Work
88. Interaction Design • Primary Purpose: Leveraging motion to better communicate the flow of a user’s task • Work • Animation
89. Interaction Design • Primary Purpose: Leveraging motion to better communicate the flow of a user’s task • Work • Animation • Deliverables
90. Interaction Design • Primary Purpose: Leveraging motion to better communicate the flow of a user’s task • Work • Animation • Deliverables • Interaction Animations, Prototypes
91. Prototypes
92. Workflow A bit of a perfect world example
93. You can do it.
94. Thank you.