O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Design Pattern Libraries

Design Pattern Libraries explores the process of creating, maintaining, and evolving a design language using a pattern library. This talk explains how to identify, document, share and iterate design patterns, build consensus throughout large organizations, and create a uniform user experience in the process. Pattern libraries are living, breathing systems, and this presentation shows how to evolve patterns and create a library that keeps pace with product release cycles as well as changes in technology and an organization's brand.

  • Entre para ver os comentários

Design Pattern Libraries

  1. 1. DESIGN PATTERN LIBRARIES #patternlib @brianpeppler
  2. 2. Hi! #patternlib @brianpeppler
  3. 3. What’s a pattern? A reusable solution to a commonly occurring problem #patternlib @brianpeppler
  4. 4. A Pattern Language Christopher Alexander #patternlib @brianpeppler
  5. 5. A Pattern Language Christopher Alexander • Problem statement • Solution • Example solution • Context #patternlib @brianpeppler
  6. 6. Why should we care about patterns? • Represent best practices • Increase efficiency • Provide common language #patternlib @brianpeppler
  7. 7. Consistency #patternlib @brianpeppler
  8. 8. A collection of HTML, CSS, and JavaScript components that align to a common design and interaction approach Web style guides #patternlib @brianpeppler
  9. 9. A set of design guidelines that dictates a particular look and feelSeriously? #patternlib @brianpeppler
  10. 10. select an option nachos bananas nachos bananas i nachosbananas nachos bananas #patternlib @brianpeppler
  11. 11. Pattern libraries Organized systems for referencing and managing design patterns #patternlib @brianpeppler
  12. 12. Formatting a pattern • Pattern name • Pattern summary • Problem statement • Solution • Solution example • Context #patternlib @brianpeppler
  13. 13. #patternlib @brianpeppler
  14. 14. • Pattern name • Pattern summary • Problem statement • Solution example • Context Formatting a pattern • Related patterns • Dependencies • Pattern status • Open issues • Sample code #patternlib @brianpeppler
  15. 15. How much is too much? #patternlib @brianpeppler
  16. 16. What goes into a pattern library? • elements • grouped elements • pages • flows #patternlib @brianpeppler
  17. 17. That’s not all • visualizations • written content - formatting, voice and tone • gestures, keyboard shortcuts • motion #patternlib @brianpeppler
  18. 18. Design assets and file formats • Sketch • Photoshop • Illustrator • InDesign • Fireworks • Omnigraffle • Axure #patternlib @brianpeppler
  19. 19. Is this still a thing? Really? Every time? arial 24 pt #999 arial 18 pt #999 20 px 24 px arial 11 pt #999 arial 11 pt #999 20 px 24 px #patternlib @brianpeppler
  20. 20. Collaboration #patternlib @brianpeppler
  21. 21. #patternlib @brianpeppler
  22. 22. #patternlib @brianpeppler github.com/twbs/bootstrap/issues/9501
  23. 23. #patternlib @brianpeppler Designer + Developer Tag Team #patternlib @brianpeppler
  24. 24. Designer + Designer Tag Team #patternlib @brianpeppler
  25. 25. Pattern libraries for everyone! • Visual designer • Interaction designer • Front-end developer • QA • Technical writer • Product owner • Sales/marketing • Customer Support • Marketing #patternlib @brianpeppler
  26. 26. Design workshops #patternlib @brianpeppler
  27. 27. Product reaction cards Design workshop personal #patternlib @brianpeppler
  28. 28. Product attributes • Reliable, honest, credible, accurate, trustworthy • Insightful, (in)valuable, empowering • Simple, easy, approachable, efficient, concise, organized • Empathetic, accommodating, forgiving, compassionate, anticipatory • Delightful, personal, warm, fun, friendly Design workshop #patternlib @brianpeppler
  29. 29. Design principles • Make it simple Minimize the time, effort, and skill required to use our products • Focus on human goals Forgive: Help users avoid, fix and recover gracefully from mistakes • Inspire delight Find moments of users’ pleasure and pain and acknowledge them accordingly • Exhibit craftsmanship Details matter, both to your users and your credibility. So take the time to get them right Design workshop #patternlib @brianpeppler
  30. 30. Affinity diagram Design workshop #patternlib @brianpeppler
  31. 31. Design critique • What are the goals of the solution? • What choices were made to support/achieve the goals? • How effective are the choices that were made? • What challenges and what missed opportunities may arise due to the current state of the solution? • How does the solution provide a positive or negative experience related to the goal? #patternlib @brianpeppler
  32. 32. Process Creating and evolving patterns #patternlib @brianpeppler
  33. 33. design concept design review validation draft design development team feedback marketing sign-off start over requirements #patternlib @brianpeppler
  34. 34. select an option nachos bananas select an option nachos bananas x select an option nachos bananas nachos bananas select an option nachos bananas x #patternlib @brianpeppler
  35. 35. Accept Variations #patternlib @brianpeppler
  36. 36. When do you start? #patternlib @brianpeppler
  37. 37. More thoughts • But I work in an agency… • Example pattern libraries #patternlib @brianpeppler
  38. 38. #patternlib @brianpeppler
  39. 39. #patternlib @brianpeppler
  40. 40. #patternlib @brianpeppler MailChimp http://ux.mailchimp.com/patterns
  41. 41. #patternlib @brianpeppler Salesforce http://sfdc-styleguide.herokuapp.com #patternlib @brianpeppler
  42. 42. Build it Pattern Lab patternlab.io Pea.rs pea.rs Self-hosted WordPress + custom fields wordpress.org Patternry patternry.com #patternlib @brianpeppler
  43. 43. Wrap up • Use pattern libraries increase team productivity and communication; better experience for users • Use minimal documentation create just enough documentation to communicate a full understanding of a pattern • Establish a lightweight process be nimble, allow for crowdsourcing curation, and variations #patternlib @brianpeppler
  44. 44. Wrap up • Consider the context; sometimes it’s more important than consistency design isn’t one size fits all; accept variations • Accept Inconsistency the work will probably never be “done” #patternlib @brianpeppler
  45. 45. THANK YOU slideshare.net/brianpeppler #patternlib @brianpeppler
  46. 46. #patternlib @brianpeppler Resources • Data visualization Jan V. White (janvwhite.org), Edward Tufte • Written content MailChimp’s voiceandtone.com, Chicago Manual of Style, Microsoft Manual of Style • Motion animate.css, easings.net • Microsoft Product Reaction Cards • Design Principles IBM, Google Material