Taking The Pattern Library To The Next Level

About The Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he’s most probably running front-end & UX … More about Vitaly ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 176.000 folks.

Quick summary ↬ Finding the right way to architect a lasting pattern library is difficult. This article highlights some practical techniques and strategies to establish a pattern library that will be actively and consistently used by the entire team.

No thorough conversation about the front end today can end without mention of pattern libraries. Sometimes a pattern library appears in the form of a or a Slack channel where delegated team members propose, discuss and submit new patterns. If necessary, maybe even with an FAQ section.

This might seem like overkill, and it surely is. Think of this overview as comprehensive inspiration for things you might want to consider when designing and building a pattern library. Again, chances are high that you might not need all of them.

Also, certain websites will require additional sections. An e-commerce style guide might require a section on password recovery, credit-card input, generation of PDF invoices, as well as details on how the checkout flow should work for higher conversions (see Envato Market’s “Existing User Flow”). Any website that offers customizable products will include a product builder, with the major components in their various states.

Summary

When building a pattern library, we tend to focus too much on the modules, providing a structural view of the system, rather than showing how it can be used effectively — thereby undermining its usefulness to most team members. One solution to give a pattern library a better chance of surviving the onslaught of future changes is by changing how patterns are presented.

Instead of focusing only on the structure, subatomic particles, molecules and organisms, focus on the context: Show examples of how components are used in different scenarios, and let the designers, engineers, copywriters and marketing managers explore them and dive deep into each component and build on top of the established convention.

Sacrificing consistency for usability is fine. A slightly open-ended, inconsistent but heavily used pattern library is better than a perfectly consistent pattern library that is never used. Come up with usable metaphors that everyone can relate to, name your modules accordingly, and establish them as part of the daily culture. Before you know it, the pattern library will become an integral part of your work routine, serving the purpose for which it was intended — which is to enable designers and developers to get consistent results, faster.

Huge thanks to Marko Dugonjić, Sara Soueidan, Jina Bolton (SalesForce), Alla Kholmatova (FutureLearn), Daniel Mall, Jeremy Keith, Brad Frost and Anna Debenham for taking the time to conduct research, provide feedback, share and validate ideas, and suggest improvements to this article. Also, a kind thank you for review and constructive feedback to Andreas Weiss, hud Halberstam, Tim Baxter, Mariusz Ciesla, John Fischer, James Murphy, Jonathan Bowman, Ehud Halberstam, Sarah Drasner, Wolf Bruening (OTTO), Jan Toman, Ian Feather (Lonely Planet and Buzzfeed), Pelle Bjerkestrand, Molly Finkle (Yelp), Inayaili de Leon (Ubuntu), Thomas Piribauer, Shaun O’Connell, Frederick Hoffman (Lexware), A.J. Kandy, Ian Devlin, Jan Toman, Nate Baldwin, Stefan Baumgartner (Ruxit), Matthias Ott, Brian Greene (General Electric), Lee Moody (Graze), Elyse Holladay (RetailMeNot) and Matt West. Your support shows how truly incredible this little community of ours is.

slots empire bonus codes
 Editorial (il, al)