Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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. User Experience • Primary Purpose: Understand the user, their needs,

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

    and help make it easy for them to accomplish their task. • Work
  3. 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.
  4. 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
  5. 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
  6. 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.
  7. 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:
  8. 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
  9. 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
  10. Flows • Definition: A visual hierarchy for navigation, website organization,

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

    and use cases. • Goals: • Organize priorities (mobile first) • Simplify (in existing projects)
  12. 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)
  13. 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.
  14. 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
  15. 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
  16. 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)
  17. 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
  18. Prototypes • Definition: An interactive representation of an application design

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

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

    created for testing and communication to clients and developers. • Goals • Client Sign Off
  21. 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
  22. 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
  23. Visual Design • Primary Purpose: communication, stylizing, and problem-solving through

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

    the use of type, space, and image • Work • Visual Research • Deliverables
  25. 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
  26. 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.
  27. 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
  28. 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
  29. 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
  30. Style Tiles • Definition: slightly more defined and structured mood

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

    board that shows elements in a context similar to the end product. • Goals
  32. 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
  33. 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
  34. 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
  35. Comps • Definition: Visual compositions are the deliverable that is

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

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

    as close as possible to the final visual design. • Goals • Define UI elements and layout
  38. 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
  39. Prototypes • Definition: An interactive representation of an application design

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

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

    created for testing and communication to clients and developers. • Goals • Client Sign Off
  42. 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
  43. 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
  44. Interaction Design • Primary Purpose: Leveraging motion to better communicate

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

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

    the flow of a user’s task • Work • Animation • Deliverables • Interaction Animations, Prototypes