Creating a Pattern Library

How investing time in a pattern library can make design and development easier for your team.

What is a pattern library?

Whether you’re designing a website, a mobile app, or a software product, it’s going to contain pages which are built of a lot of smaller pieces. You can think of these as the building blocks that make up your app. A pattern library collects all these reusable pieces in one place to make sure they all work together and keep your designs consistent.

Pattern libraries go by a lot of different names like design systems, design languages, design libraries, or style guides. They all essentially refer to the same thing, although they might contain slightly different content.

Generally, style guides deal more with the way elements are presented visually, and they often describe brand guidelines. Pattern libraries typically focus more on how components interact and when they should be used, and often contain code in addition to design.

What Goes in a Pattern Library?

A pattern library should include all the reusable elements in your project or app. This should include visual design elements like color, typography, icons and layouts which are persistent across the app. It also includes UI components like buttons, links, forms, navigation, tables, and other repeated modules.

The pattern library should also capture the interactions for these components. For instance, what does it look like when you hover over a button? What’s the transition like when a tooltip shows up?

Your pattern library can also include when these components should be used and when you would choose to use one component over another. Do’s and don’ts are really helpful here to help explain your design thinking.

Probably the most famous example of a pattern library, Google’s Material Design is a comprehensive reference that every designer should be familiar with. They do a fantastic job of explaining their designs and the principles that guide them.

Why would you want to spend your time on this?

Efficiency — it’ll save you time in the long run!

Designing and building the components upfront definitely takes time, but being able to reference the guide ultimately saves designers much more time in the long run.

This is especially true if you’re working on a product in-house or on a big project, because you don’t have to write the same specs over and over again. Instead, you can spend that time on more important tasks like prototyping, testing, and iterating on your designs.

Consistency — people like what’s familiar.

Seeing all of your components in one place ensures you’ve created a family of consistent styles.

From the end user’s perspective, websites and products that are familiar and consistent provide a much better experience. Consistent styles and patterns bring a sense of comfort and security and place less cognitive load on the user.

When using the tool or website you’ve designed, your users should know what to expect. They shouldn’t have to learn how to use new components on each page.

For your team

If you’re working on a team with other designers and developers, the pattern library will be a huge asset. It will make it much easier to bring team members up to speed and be informed about your design principles and patterns.

Pattern libraries also help to build a shared vocabulary. When you talk to your teammates about styles or components, having a visual reference helps to make sure that you’re all talking about the same thing. This will save a lot of unnecessary miscommunication.

This is an screenshot from Mailchimp’s pattern library. It incorporates the visuals, design rationale, and code all in one place, which indicates that their pattern library was a collaborative effort across design and development teams.

Salesforce is another great example of a pattern library that has invented a design system, like Material Design.

Strategies and Best Practices for Building a Pattern Library

Integrate it into your design process, and start early!

Don’t wait until the end of your project to create the library because it can help you while you’re designing. If you design a form in one page of the app, make sure to capture that somewhere so when you need to design another page with a form, you can reuse the same elements.

If you use Sketch, you can create symbols to help with this so you don’t accidentally change any details in the components. This goes back to efficiency — it’ll save you time when you’re designing because you won’t have to create everything from scratch.

Keep it Concise

New patterns are expensive. They cost time for designers and developers, and require extra code.

The components you include should be specific to the website or product that they serve. Don’t design for use cases that don’t exist yet. Try to be strict about what actually makes it into the library. Don’t get too fancy!

Think of your pattern library like your house — if you have 20 rooms in your house, that’s 20 rooms that you have to regularly clean and maintain.

Make it Easy to Update

It’s fine to start your pattern library as a single document, but this doesn’t scale well. Documenting all your patterns in a super long PDF will make maintenance difficult for you as a designer. It will also make it challenging for your teammates to find what they’re looking for.

If your pattern library is a single static file, or even multiple files, you have to worry about other designers or developers working off of outdated designs.

If you can figure out a way to host your pattern library online, it can become a single source of truth that can be updated quickly and easily. At Sumo Logic, we host our pattern library with Google Sites. This allows us to grant editing privileges to other members of the team so any designer, developer, or writer can contribute to and edit the guide.

When you separate the individual components in your pattern library into distinct pages, they can be improved or redesigned without affecting everything else.

It will evolve over time.

A pattern library should never be finished, and that’s fine. We make small updates to our patterns all the time based on results of user testing or new use cases that come up.

Lonely Planet has a great style guide that incorporates lots of components with instructions on how to implement them.

Apple’s Human Interface Guidelines are an extensive set of development guidelines that focus more on design philosophy than individual components.

Atomic Design System

You might hear about the atomic design system which was invented by Brad Frost. This is a framework for pattern libraries that breaks down the pieces of your app into atoms, molecules, organisms, templates and pages.

A lot of designers and developers have adopted this framework for their pattern libraries, and some have customized it by changing the names of categories or only including a few of them.

Sumo Logic’s Pattern Library

At Sumo Logic, we’ve been creating and improving our pattern library for the past two years and we’re still refining our process. We’re doing our best to make sure that our methods for creating and updating patterns are efficient and ultimately help us ship better product.

Even though we still run into challenges with deciding when to make changes to the library and how to share those with the team, it’s certainly helped to improve our workflows and internal communication.

Stay tuned for part 2 which goes into more detail about how we created Sumo Logic’s Pattern Library.