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 generally follow the same steps when we purchase a goodie and go through the check-out process.
Are designers all just going about our day copying each other’s work? Not quite. Many of us use interface and interaction 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:
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.
UI design patterns aren’t just common features that can be copy-pasted into an interface; they’re visual strategies for quickly and efficiently solving common UI design problems. Think of them as a blueprint that designers refer back to for guidance when creating interfaces. UI design patterns also provide a common language for designers, which keeps misunderstandings to a minimum, and establishes consistency when multiple designers are working on the same project.
UI design patterns aren’t just useful for designers—they’re also important when it comes to user retention. The reason that so many apps and websites feel so easy to navigate is because of common UI design patterns. Could you imagine logging into a website that didn’t have a navigation bar or any clear buttons? Confusing, right? When users become used to seeing specific patterns, any change to those patterns could result in losing out on some key leads and conversions. UI design patterns keep the cognitive load to a minimum by making the interface feel intuitive.
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:
Some of the common UI design patterns fall into the following categories:
Dark UX/UI design patterns, such as trick questions or hard-to-see options in a drop-down menu, are patterns that trick users into performing a specific task unknowingly. Some dark patterns are less harmful, such as tricking users into signing up for e-mails. Others hide key pieces of information that mean users get locked into memberships or direct debits. Dark patterns are a lot more common than you might think. Nevertheless, they’re generally frowned upon and—if misused—can destroy trust between a company and its users. UI design relies heavily on empathy, and creating an interface that’s enjoyable to use–not frustrating!
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.
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.
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.
Having your own UI pattern library to serve as a style guide for your projects is always a good idea—and a lot easier than you think. Take a look at these three best practices to keep in mind when creating your own UI pattern library.
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!
So there we have it, everything you need to know about UI design patterns! It might seem like a lot to digest, but once you get the hang of them, they’ll make your design process run a lot smoother.
If you want to read more about user interface design, take a look at the following guides:
This article is part of:
Writer for The CareerFoundry Blog
Maria de la Riva is a UX/UI Designer and digital nomad. For the past four years, she's worked with online education startups like CareerFoundry, mentoring and writing curriculum content. Currently, she is Head of Product at Iguama Inc., a startup developing the technology loyalty programs need to help their users redeem points on online retailers. Maria is an avid diver and sailor.
CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select a program, get paired with an expert mentor and tutor, and become a job-ready designer, developer, or analyst from scratch, or your money back.
