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

Open Source Needs Design

Open Source Needs Design

My talk for All Things Open.

My notes. https://gist.github.com/GarthDB/54035d5f4abd7ceb9d57

Garth Braithwaite

October 22, 2014
Tweet

More Decks by Garth Braithwaite

Other Decks in Design

Transcript

  1. needs
    OPEN SOURCE
    DESIGN

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. DIY Design

    View Slide

  13. Design?

    View Slide

  14. Design?
    • User Experience (UX)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. User Experience

    View Slide

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

    View Slide

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

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

    View Slide

  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

    View Slide

  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

    View Slide

  24. Personas

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

    View Slide

  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:

    View Slide

  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

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

    View Slide

  29. Personas

    View Slide

  30. Flows

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

  36. Flows

    View Slide

  37. Wireframes

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    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.
    • Goals
    • Information Hierarchy
    • Preliminary Layout (respect the visual/interface designer)

    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
    • Information Hierarchy
    • Preliminary Layout (respect the visual/interface designer)
    • Initial testable product

    View Slide

  43. Wireframes

    View Slide

  44. Prototypes

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  50. Prototypes

    View Slide

  51. Visual Design

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  57. Mood Board

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    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.
    • Goals
    • Quick iteration
    • Determine overarching mood/feeling of visual
    design

    View Slide

  62. Mood Board
    We Review Utah
    Moodboard

    View Slide

  63. Style Tiles

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  69. Comps

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  74. Comps

    View Slide

  75. Prototypes

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  81. Prototypes

    View Slide

  82. Interaction Design

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  88. Prototypes

    View Slide

  89. Workflow
    A bit of a perfect world
    example

    View Slide

  90. You can do it.

    View Slide

  91. Thank you.

    View Slide