Home > UX and Prototyping > 4 best practices for creating a UI pattern library
UI pattern libraries can save time and money by helping designers work more efficiently. Here are 4 best practices for creating your own

UI pattern libraries can save time and money by helping designers work more efficiently. Here are 4 best practices for creating your own

UI pattern libraries aren’t anything new. They are steadily growing in popularity as companies begin to understand the value that they bring to teams and product users too.

UI patterns can be applied to designs to promote consistency, provide user control and reduce cognitive load. Essentially, pattern libraries can help designers and developers create products in a better way.

In this post, Justinmind will explore UI pattern libraries and the best practices you can put into place to make your own.


Make your own UI pattern library and create consistent designs. Download Justinmind.

DOWNLOAD FREE


What is a UI pattern library?

Designers are lucky because every time they approach a new project—whether that be a website, mobile app or simply a building new feature—they don’t have to reinvent the wheel.

They can use patterns. UI patterns, specifically.

Think of UI patterns as Lego. Lego are little plastic shapes that can be manipulated into a wide variety of forms and objects. The same little block of Lego can be put into multiple contexts to mean something different. It can be make up part of a dinosaur or the roof of a car.

UI patterns are the same. They are established ways of doing something and fit into a variety of contexts, like scrolling patterns for example.  A UI pattern library is simply a place where all of these components live together.

A group of people—UX designers, product managers and engineers—will create a UI pattern library together to ensure consistency across a brand and product. UI pattern libraries help anchor everybody to the same vision and promote shared understanding.

UI pattern libraries can be part of a wider design system. Material design is an example of a design system. It doesn’t just include UI patterns but other elements that help designers and developers such a style guidelines.

A typical UI pattern might be something like cards. Cards are a UI pattern that group related information together in a container, which resemble a playing card.

Pattern libraries are especially useful if you happen to experience the same problems over and over again. A pattern library can be created to help you solve these recurring problems.

man-drawing-ui-pattern

What do you put in a pattern library?

Pattern libraries are made of reusable components and interactions. You can expect to see these in a pattern library:

  • Buttons
  • Modals
  • Layouts
  • Messaging and notifications

It might be easier to think of a pattern library as a style guide for design. A style guide will tell writers how to write: what words to use, which words to avoid and how to say certain things. It’s the same with pattern libraries. In fact, style guides and pattern libraries usually go hand in hand. They both focus on form and appearance.

Ecommerce giant Shopify have their own design system called Polaris. In it they outline their patterns, components, guides and content guidelines. Let’s look at their error messages.

Shopify have written ten different sections on error messages covering tone, colors, anti-patterns, exceptions and notifications etc. All of this is essential knowledge for people creating Shopify but it also helps the merchants of Shopify by providing a consistent experience.

There are other pattern libraries such as Apple’s Human Interface Guidelines or Oracle’s Alta Mobile UI. Check them out to get a feeling for how different pattern libraries are made up.

Best practices for creating a UI pattern library

Here are a few tips and pointers that you can follow to make sure that your UI pattern library is adopted, used and advocated for.

Familiarize yourself with other UI pattern libraries

Before you create your own pattern library, it’s worth looking at the wide selection of pre-existing pattern libraries.

Styleguides.io has a list of 233 real life pattern libraries of all different shapes and sizes. Some are more geared towards developers, others to designers.

The selection will give you a clear idea of what exactly goes into a UI pattern library.

By looking at pre-existing libraries, you can determine what yours should include. You’ll come to understand which patterns are used more frequently and which ones are avoided.

Other websites, like UI Patterns or Pattern Tap, have an array of user interface design patterns which can act as a reference point as you create your own library.

Sweet talk your developers

Getting buy-in from developers is critical. Developers aren’t code monkeys and they care about the product as much as you. They’re going to be the ones who deal with creating these patterns in the back-end.

By empathizing with them and understanding the work they have to do, you’ll be able to reduce any disagreements or frustrations that might arise.

Having their input is valuable because you can set expectations on what is possible and what is impossible. By involving your developer and getting their buy-in, you can secure their motivation for the project. Plus, this process will give you practice for when you have to get buy-in from more senior stakeholders.

hierarchy-flow-example

Develop a pattern hierarchy

You will use patterns within patterns. In this strange Inception world of patterns, it’s advisable to create a pattern hierarchy. You can visualize it with a flow diagram for even easier understanding.

Alan James Salmoni calls them macro and micro patterns. A macro pattern is something high- level like general authentication which contains micro patterns such as sign in, register and so on.

Deliver the pattern library in an inclusive way

A pattern library needs to be used to stay alive. If it doesn’t get used, it will wither and die. To ensure that everyone wants to use the pattern library, it’s best to present it in a way that’s easily consumable and widely understood even for those who aren’t technically minded.

Many people will be using this pattern library. If it’s confusing, difficult to understand or a chore to work with then neglect will seep in and before you know it, it’s another project that wasted time, money and resources.

Show that the pattern library is valuable by putting it into context. If you can demonstrate how your pattern library saved time and money then you’re painting a picture of the benefits to others.

It might be a good idea to create a pattern library onboarding or other additional material for people to understand better. If the benefits are clear from the outset, the chance of adoption will be higher.

How do you maintain a UI pattern library?

Creating and maintaining a pattern library should be a collaborative task. Because they are used to generate shared understandings between different teams, it makes sense that key people from those teams have a say in the creation of the design system. That means keeping it updated and accurate.

To stop your pattern library from collecting dust, there are a few techniques you can use to ensure that the pattern library is evolving properly.

Let developers and designers create a shared language

If you name a component something then everyone should call that component by its name. This will help with internal communication but it’ll prevent any unnecessary confusion. If a problem arises then developers and designers will be able to reach a solution together because of this shared vocabulary. It’s important for a pattern library to live in the minds of those who are using it.

Streamline library updates using a ticket system

Libraries have to be updated and maintained. It can be all too easy for a task like this to find itself constantly in the backlog.

By creating an easy to use ticketing system using a tool like Jira or Trello, it’ll be more efficient for team members to submit requests and have them completed. This will involve setting up an approval system including a level of prioritization with a design lead.

Carry out continual audits

Avoid duplicate content and unnecessary rework by carrying out continual audits. An audit is a great way to stop your pattern library from becoming bloated.

Treat your audit like trimming the fat. A diet for your pattern library. When you have a new component to add, make sure you remove the old one. Test your components.

A good tip is making sure you create the least amount of components necessary for the largest amount of use cases.

Brad Frost, author of Atomic Design, writes that, “once the pattern library ceases to reflect the current state of the product it serves, it becomes obsolete.” Brad then explains that for your pattern library to have longevity and get used, it should be made:

  • Official
  • Adaptable
  • Cross-disciplinary
  • Approachable
  • Visible
  • Context-agnostic (name patterns in terms of structure not usagel)
  • Contextual (showing the pattern in situ)
  • Maintainable
  • Bigger (include voice and tone, brand, code etc.)

Create masters and reusable templates

Justinmind has got UI patterns all figured, don’t worry. We use features called Masters and Templates to make sure that building and prototyping your own UI pattern library has never been simpler (or quicker…!).

Masters and Templates can cut your work down drastically. With a Template you can set default styles or navigation and apply them to any screen in your product; a Master is a group of customized UI elements that can be used within templates and across your UI. 

So for example if you’re making an app you might put top menu navigation in a Template and use it throughout the UI. You might put the elements that make up a Call to Action in a Master and use them a few times around the app. Hey presto, you’re prototyping with UI patterns.

The best part (possibly) is that your team members can also work with your Justinmind pattern libraries, using our Teamwork features. You can even export Masters and Templates and send them to fellow Justinminders. Greater control over pattern libraries means fewer unwanted changes, thankfully.

Top tips to manage pattern libraries in Justinmind

Justinmind has a selection of pre-made UI pattern libraries, also called widget libraries, which you can download here. These pre-made widgets can be imported into your widgets palette in the workspace.

The beauty of these pre-made pattern libraries is that they are:

  • Realistic
  • Interactive
  • Customizable

These widgets aren’t quite what you’re looking for? No sweat. You can make your own customized widgets to suit your individual needs.

TO get started making your customized widget library, open Justinmind prototyping tool (what do you mean you haven’t downloaded it yet? You can do that right here!) and select “Widgets” in the main menu.

Then select “New widget library”. Here you’ll give your customized widget library a name and description. You can add an image, too. Now you’ll have the ability to make your own UI elements directly on the canvas using the shapes and lines.

It gets better – you can make your newly created widgets interactive, for that realistic feel. After you click on a widget that you’ve placed on the canvas, right click it and add an Event. Events give you the opportunity to bring vitality to your design. Full interactivity, customized.

Conclusion

UI pattern libraries are a wonderful asset to create. They take time and effort from all members involved in its creation. It’s no easy task but the it pays off if done properly.

By finding early adopters and convincing developers, it’s possible to create a robust pattern library that will save companies time and money in the long run while promoting consistency across both brand and product.

download_free

Steven is the web editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *

Download Free