Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Pattern Libraries

16,763 views

Published on

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.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×