User Interface Design patterns are recurring solutions that solve common design problems. For example, the breadcrumbs design pattern lets users retrace their steps. Designers can apply them to a broad range of cases but must adapt each to the specific context of use. 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.
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. 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. t's good to point out, however, 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.
Common UI Design Patterns
Some of the most common UI design patterns fall into the following categories:
Social sharing: these patterns facilitate the promotion and sharing of content on various social media platforms.
Navigation: navigational patterns help guide users around the interface, ensuring they’re able to find their way back to the homepage if they get lost.
Input/output: these patterns include various forms that allow users to submit information, or receive feedback from the site based on an action.
Content structuring: these patterns are concerned with how your site is organized in a way that feels intuitive and accessible.
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?
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 kinds of elements used and how they are structured. Leverage the knowledge shared about this UI design pattern and create your own solution.
Where to find existing 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.
Photo by Paweł Czerwiński on Unsplash
Comments