Design Pattern Libraries
Published in: Design
Transcript
- 1. DESIGN PATTERN LIBRARIES #patternlib @brianpeppler
- 2. Hi! #patternlib @brianpeppler
- 3. What’s a pattern? A reusable solution to a commonly occurring problem #patternlib @brianpeppler
- 4. A Pattern Language Christopher Alexander #patternlib @brianpeppler
- 5. A Pattern Language Christopher Alexander • Problem statement • Solution • Example solution • Context #patternlib @brianpeppler
- 6. Why should we care about patterns? • Represent best practices • Increase efficiency • Provide common language #patternlib @brianpeppler
- 7. Consistency #patternlib @brianpeppler
- 8. A collection of HTML, CSS, and JavaScript components that align to a common design and interaction approach Web style guides #patternlib @brianpeppler
- 9. A set of design guidelines that dictates a particular look and feelSeriously? #patternlib @brianpeppler
- 10. select an option nachos bananas nachos bananas i nachosbananas nachos bananas #patternlib @brianpeppler
- 11. Pattern libraries Organized systems for referencing and managing design patterns #patternlib @brianpeppler
- 12. Formatting a pattern • Pattern name • Pattern summary • Problem statement • Solution • Solution example • Context #patternlib @brianpeppler
- 13. #patternlib @brianpeppler
- 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. How much is too much? #patternlib @brianpeppler
- 16. What goes into a pattern library? • elements • grouped elements • pages • flows #patternlib @brianpeppler
- 17. That’s not all • visualizations • written content - formatting, voice and tone • gestures, keyboard shortcuts • motion #patternlib @brianpeppler
- 18. Design assets and file formats • Sketch • Photoshop • Illustrator • InDesign • Fireworks • Omnigraffle • Axure #patternlib @brianpeppler
- 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. Collaboration #patternlib @brianpeppler
- 21. #patternlib @brianpeppler
- 22. #patternlib @brianpeppler github.com/twbs/bootstrap/issues/9501
- 23. #patternlib @brianpeppler Designer + Developer Tag Team #patternlib @brianpeppler
- 24. Designer + Designer Tag Team #patternlib @brianpeppler
- 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. Design workshops #patternlib @brianpeppler
- 27. Product reaction cards Design workshop personal #patternlib @brianpeppler
- 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. 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. Affinity diagram Design workshop #patternlib @brianpeppler
- 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. Process Creating and evolving patterns #patternlib @brianpeppler
- 33. design concept design review validation draft design development team feedback marketing sign-off start over requirements #patternlib @brianpeppler
- 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. Accept Variations #patternlib @brianpeppler
- 36. When do you start? #patternlib @brianpeppler
- 37. More thoughts • But I work in an agency… • Example pattern libraries #patternlib @brianpeppler
- 38. #patternlib @brianpeppler
- 39. #patternlib @brianpeppler
- 40. #patternlib @brianpeppler MailChimp http://ux.mailchimp.com/patterns
- 41. #patternlib @brianpeppler Salesforce http://sfdc-styleguide.herokuapp.com #patternlib @brianpeppler
- 42. Build it Pattern Lab patternlab.io Pea.rs pea.rs Self-hosted WordPress + custom fields wordpress.org Patternry patternry.com #patternlib @brianpeppler
- 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. 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. THANK YOU slideshare.net/brianpeppler #patternlib @brianpeppler
- 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