Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Working with Design in Development

Working with Design in Development

A variation of a talk I gave for Family Search Devcon

B5cf6e112eeee572d722743dea924487?s=128

Garth Braithwaite

October 02, 2014
Tweet

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.