Whether you're designing new interfaces from scratch or polishing existing ones, you'll run into a variety of design problems that need to be addressed.

How will a user navigate through the various pages on your website or app? How can you structure the content so that it’s neatly organized and readily accessible to users? Do you need to provide any additional help for users who are multiple clicks deep in the site or app, to ensure they remain oriented?

Fortunately, within the field of user interface design, there are many different established solutions that you can draw on to create cohesive, intuitive UI designs.

These solutions are called UI design patterns.

What Is A UI Design Pattern?

User interface (UI) design patterns are reusable solutions to common design problems in user interface design.

A dropdown menu, for example, is a UI pattern that's used to conserve space and maintain information hierarchy within a design, while providing users easy access to pages within the website or app.

Each UI design pattern has a specific purpose, and by understanding how and when to use them, you can create interfaces that are both consistent and efficient. UI design patterns provide a common language for user interface designers and a foundational consistency for users of websites and apps. 

In this guide, we will discuss what UI patterns are, why they're important, and some examples of how they can be used. We'll also provide tips on how to create your own patterns and use them in your designs.

 

 

Examples of Common UI Design Patterns

Some of the more commonly used UI design patterns that you might already be familiar with include:

  • Navigation bar: Navigation deals with a user’s ability to move around an app or website, and is often seen at the top and/or bottom of the page.
  • Social Sharing: This UI design pattern promotes sharing content or experiences from a product on a social platform such as Twitter or Instagram.
  • Breadcrumbs: Breadcrumbs are a type of secondary navigation that allow the user to understand the website or app’s organization and how pages flow from one to the next.
  • Account Registration: A pattern like this prevents customers from viewing certain information on the site unless they’ve registered to receive or view it. 
  • Dropdown menu: A list of options that are only revealed when a user clicks or hovers over the area. These are used when space is minimal, or when the amount of items in the dropdown menu would otherwise be overwhelming to display in a static format.
  • Toolbar: A set of icons grouped together on an interface, often arranged neatly across a bar, that perform various functions when clicked.
  • Accordion: A type of visual content structure that hides content until it is clicked on by the user.
  • Tabs: These help with content structuring on pages where the content should remain front and center. It imitates the overall look and feel of a physical file folder system.

The Benefits of Using UI Design Patterns

A More Efficient Design Flow

Using UI patterns can help you save time and energy when designing your user interfaces. By relying on existing patterns as a foundation for your designs, you can focus on solving more specific problems for your users. UI design patterns make it possible to quickly get started on the customization of a site or app with the common building blocks of UI design patterns in place. 

Adaptability, Without Reinventing the Wheel

UI design patterns were created so designers don’t have to spend too much time repeating the same creative processes, but are still adaptable to suit different use cases. Each pattern can be altered or personalized to present precisely what the client wants for their customers’ user interface. 

Intuitive Usability

UI design patterns provide familiar, recurring solutions for users. If you land on a website, you automatically start using the common UI patterns like menus to look for the page or blog article that you want to find.

What Are Dark UI Patterns?

Dark UI patterns are meant to mislead, confuse, or otherwise trick a user into performing an unintended action, or to prevent a user from taking an action that they would otherwise have taken. Hiding the "unsubscribe" button in an email, or making it difficult to see, is a dark UI pattern, since it makes it difficult for people to remove themselves from a mailing list. Opt-in forms are often created with the intent of making it seem like the only positive solution for the user is to add their email to the input field, and use colors, layout, and text accordingly.

Dark UI patterns distort the intended flow of a site or app from the user's perspective, and chips away at (or betrays) the trust they have in your product.

Tips for Using UI Patterns in Your Design

1. Start by finding existing patterns that are close to what you need

Whether you studied product interface design in a formal educational setting, or kickstarted your career with a UX bootcamp like UX Academy, you will likely have been introduced to UI design patterns already, and may have a list or resource file of your own to choose from.

You can also look through various design systems or wireframe kits (there are many great free ones in the Figma community) to reorient yourself with some of the common UI solutions and use that as a starting point.

If you can't find an existing pattern that is a perfect fit for the design that you're working on, you can create your own. It's important to remain as close to established patterns as possible, unless your usability testing indicates otherwise.

2. Adapt UI patterns to fit your specific needs

Each UI pattern will have to be adapted to fit the design that you're working on. If you're adding a navigational menu, for example, you'll have to adjust typography, colors, sizing, and content.

You might also end up layering UI patterns, like creating a sliding hamburger menu, to better fit in a small mobile device screen.

3. Test patterns with users to see how they respond

Whether you use an existing pattern or come up with a new one, it's important to test your work with users to ensure that they respond the way you anticipated. User tests can reveal missing elements (like a user who looks for a menu or breadcrumbs that don't currently exist in the design), as well as identify patterns that should be altered or removed.

Where to Find UI Design Pattern Libraries

User interface design is an innovative field, but that doesn't mean you have to create everything from scratch. Here are a few UI design pattern library sources that you can use to amplify the effectiveness of your designs.

UI Patterns

A screenshot of the UI Patterns website which is a great resource for interface designers

This website is wholly dedicated towards user interface patterns, analysis of how they work, as well as more advanced resources to help you understand user behavior more holistically.

Mobbin

A screenshot of the Mobbin website which houses an expansive UI pattern collection

Mobbin provides a visual repository of app screenshots, which can be filtered by company, design pattern, element, app category, or color. It's a powerful site that you can use to see what common solutions are, and how you might consider integrating them in your own design needs.

UI Garage

A screenshot of the UI Garage website that is filled with handpicked UI design patterns

This is another great site that allows you to search by design pattern, and sort or filter the results based on the platform that you're designing for (Web, iOS, etc.)

Pttrns

A screenshot of the Pttrns website which lets you view thousands of mobile UI patterns

With a paid Pttrns membership, you can gain access to a wealth of mobile UI patterns, connect with other designers, and receive advice or feedback on your questions within an active community.

Conclusion

UI design patterns are used every day by UX/UI designers to deliver design solutions that help users navigate and process the information on a website or app. As you familiarize yourself with the various components, you'll be able to provide a more intuitive experience for your users. 

 

You Might Also Like