Ever notice how most products are relatively similar? Sites feature a top nav bar. Apps use tab bars. Most logins will be made up of two input fields requesting your username and password, together with a button to submit the keyed-in info. We’ll generally follow the same steps when we purchase a goodie and go through the check-out process.
Are we all just going about our day copying each other’s work? Not quite. Many of us use UI design patterns to shape our work and, as a result, design similar-looking user interfaces.
In this guide, I’ll tell you everything you need to know about UI design patterns:
- What are UI design patterns?
- The UI design pattern formula
- How to use UI design patterns
- Where to find existing UI design patterns
- A word on creating your own UI library
1. What are UI design patterns?
UI design patterns are recurring solutions to common problems in user interface design. They help us avoid reinventing the wheel and make designing a reliable solution to an interface design problem a lot faster.
Even though they are the bread and butter of UI design, UI design patterns are not a designer’s brainchild. They are rooted in architecture and programming and were designed to optimize the user interface development process.
By creating a library of components that provide proven solutions to user problems, developers were able to cut down the time they spend creating and testing parts, expediting the overall development process. It did not take long for us UI designers to pick up on the benefits of UI design patterns.
UI design patterns are everywhere on sites and apps, and are familiar to users. It will take seconds for a user to understand what to do within an interface designed with common UI design patterns. Adopting common patterns means you can leverage this knowledge and increase the ease of use of your product.
It is worth noting that UI design patterns aren’t a one size fits all solution—each pattern you choose to use will still need to be adapted to a specific use case.
Most of us wear t-shirts. My t-shirt and yours may vary in size and fit, but both are recognizable as t-shirts. We can add a nifty little pocket, details on the short sleeves, and print all kinds of stuff on them. However, the structure is pretty much the same regardless of how much we tailor the garment to our liking.
UI design patterns are similar. They offer a general structure we can work off of and add, subtract or alter parts to tailor it to a particular set of requirements unique to each design project.
2. The UI design pattern formula
You’ll find loads of UI design pattern libraries online. In them, you’ll find UI design patterns categorized. The problems they can help you solve differ, but the elements included in each are the same.
UI design patterns include:
- Problem: What does the user want to do?
- Context: When should the pattern be used?
- Solution: What is the solution?
- Examples: Where and how has the pattern been implemented before?
3. How to use UI design patterns
UI design patterns can’t be plugged directly into an interface. We need to tailor them to fit a particular scenario. So how do we do it?
Start off by defining the problem you’re tackling. With a clear problem in mind, head over to your favorite UI design pattern library. Click on the category that best fits your need.
Check out all the different examples listed. How is the pattern meant to be used? How have other designers used it? What can you learn from it? Pay attention to the different kind of elements used and how they are structured.
Leverage the knowledge shared about this UI design pattern and create your own solution.
4. UI design pattern libraries
There is no shortage of UI design pattern libraries that offer inspiration and a wealth of information. Some of my all-time favorite libraries are:
To start, I’d recommend UI Patterns. While the other libraries are great, they do not offer as much documentation as UI Patterns does. The level of detail included with each UI design pattern is much more beneficial to a budding designer!
Looking through all these libraries and seeing these solutions everywhere may have you thinking there is no room for innovation in UI. However, there is plenty of room for novel and new solutions. If no pattern fits the problem you’re trying to solve, or you cannot find one to use as a structure, feel free to draft up your own. Just remember, test your work to help identify possible pain points and optimize before you launch.
5. What next? Create your own library!
I’ve made it a point to analyze apps I enjoy…and also those I do not. I like to take screenshots and study different UI design patterns in use. Throughout the years, I’ve begun to build a library of my own. I reference it often and draw inspiration from it consistently.
Next time you’re enjoying an experience or are frustrated by it, stop to consider why. Take a screenshot, make notes, and begin to build your own archive of solutions.
If you want to read more about user interface design, take a look at the following guides:
What You Should Do Now
- If you’d like a step-by-step intro to find out if UI design is right for you - sign up here for our free 7-day UI short course.
- If you are interested in becoming a UI Designer check out our UI design course (you'll learn the essential skills employers need).
- Find out more about our graduates: their journeys, portfolio projects, and salary increases.
If you enjoyed this article then so will your friends, why not share it...