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

Garth Braithwaite

October 02, 2014
Tweet

More Decks by Garth Braithwaite

Other Decks in Design

Transcript

  1. WORKING WITH
    DESIGN IN DEVELOPMENT

    View Slide

  2. WORKING WITH
    DESIGN IN DEVELOPMENT
    A complete oversimplification of a creative process.

    View Slide

  3. Assumption

    View Slide

  4. Assumption
    Design can help your project.

    View Slide

  5. Assumption

    View Slide

  6. Assumption
    It would be beneficial to have
    design contributions on your
    projects.

    View Slide

  7. How to get a designer

    View Slide

  8. I am Garth

    View Slide

  9. I am Garth
    Crusher of Dreams.

    View Slide

  10. How to get a designer

    View Slide

  11. How to get a designer
    • Clear messaging

    View Slide

  12. How to get a designer
    • Clear messaging
    • Take what you can get

    View Slide

  13. How to get a designer
    • Clear messaging
    • Take what you can get
    • Start by working with their workflow

    View Slide

  14. How to get a designer
    • Clear messaging
    • Take what you can get
    • Start by working with their workflow
    • Encourage and train

    View Slide

  15. DIY Design

    View Slide

  16. Design?

    View Slide

  17. Design?
    • User Experience (UX)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. User Experience

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  27. Personas

    View Slide

  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.

    View Slide

  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:

    View Slide

  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

    View Slide

  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

    View Slide

  32. Personas

    View Slide

  33. Flows

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

  39. Flows

    View Slide

  40. Wireframes

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  46. Wireframes

    View Slide

  47. Prototypes

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  53. Prototypes

    View Slide

  54. Visual Design

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  60. Mood Board

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  65. Mood Board
    We Review Utah
    Moodboard

    View Slide

  66. Style Tiles

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  72. Comps

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  77. Comps

    View Slide

  78. Prototypes

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  84. Prototypes

    View Slide

  85. Interaction Design

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  91. Prototypes

    View Slide

  92. Workflow
    A bit of a perfect world
    example

    View Slide

  93. You can do it.

    View Slide

  94. Thank you.

    View Slide