Last updated on 16 September 2021
Most design systems include a library of components and/or design patterns. Here are some simple rules of thumb for making yours usable, understandable, and effective.
Show beats tell.
Visualize the design pattern as realistically as possible. If there are animations, show them! Or if there are different variations, show a few examples.
People tend to look at visuals and ignore text, so show as much as possible.
Context matters.
Any design pattern works better in some situations than others. That’s why it’s helpful to describe or illustrate when to use each pattern and when not to.
And offer alternatives, ideally with a reference or link to the most appropriate pattern.
Offer multiple entry points.
This is about the information architecture of the library itself. Some people know what they’re looking for, while others need some guidance.
So try accommodating both ‘searchers’ and ‘browsers’ with good navigation, tags, interlinking, and a search mechanism.
Let people search.
This bears repeating, because I’ve seen too many pattern libraries without a search function. Let people search for pattern names, keywords, use cases, or whatever your research uncovers that they could be looking for.
Give dos and don’ts.
This is especially effective for brand components (like a logo) but works for any pattern that can be used in ways you don’t want it to. That’s why visualizing ‘right’ and ‘wrong’ ways to apply a pattern can be helpful.
When people ignore the text, this is what they usually look at. 😂
Write for your audience.
The important details for any given pattern depend on the reader / audience. For example, code snippets work well for developers, templates are great for marketing people, and colors or animation specs work well for designers.
In short, give people what they need and remove the rest.
Test & iterate.
You might already know this, but it’s important enough to make explicit. Try out different versions and test them with your audience. If possible, let them use your pattern library for real and investigate what does or doesn’t work.
Use it yourself, even. 😉
Keep it alive.
Things change, and a pattern library should change with it. So keep using, testing, and improving it so it remains a living ‘document’ & keeps serving you over time.
What’s in your pattern library?
Special thanks to Folkert Paulides for inspiring this post!
Cover illustration adapted from Casandra Banuelos
