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 full-size slide

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

    View full-size slide

  3. Assumption
    Design can help your project.

    View full-size slide

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

    View full-size slide

  5. How to get a designer

    View full-size slide

  6. I am Garth
    Crusher of Dreams.

    View full-size slide

  7. How to get a designer

    View full-size slide

  8. How to get a designer
    • Clear messaging

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Design?
    • User Experience (UX)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. User Experience

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  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.
    • Deliverables
    • Personas, Flows, Wireframes, Prototypes

    View full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  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.
    • Goals:
    • Establish the user (primary) for the product
    • Help clients/designers/developers to separate
    themselves from the project

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

  41. Visual Design

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. 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 full-size slide

  47. 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 full-size slide

  48. 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 full-size slide

  49. 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 full-size slide

  50. 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 full-size slide

  51. Mood Board
    We Review Utah
    Moodboard

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. 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 full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  59. 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 full-size slide

  60. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  64. 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 full-size slide

  65. 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 full-size slide

  66. Interaction Design

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. Workflow
    A bit of a perfect world
    example

    View full-size slide

  73. You can do it.

    View full-size slide