Design Pattern

Published Oct 11, 2023
Contribute to Docs

Design patterns are standardized, widely adopted solutions to common design problems. Design patterns tend to be more flexible than design components, and can include specific modules, flows, or behaviors.

For example, if a design includes a progress indicator, it’s not necessary to reinvent the wheel. Instead, designers are likely to select from common patterns and adjust them to their context.

An illustration of three types of progress indicators. The first is a spinner, a simple spinning wheel icon. The second is a progress bar, a rectangle filled 75%, which says '75% loaded' underneath. The third is a stepper with four steps indicated by circles progressing along a line.

Once a designer has a sense for what types of actions a user will need to take within an application or interface, design patterns from competitive analysis and pattern libraries can be used as a reference for building out user flows. Competitive analysis is the process of examining designs with related functionality as part of the design research process. Pattern libraries are websites that collect and define different UX and UI patterns.

Designers should always consider the user needs and business goals of a product to choose the best design pattern. While designers can always diverge from patterns as needed to meet goals, novel variations may add cognitive strain for the user.

Dark patterns are tricky or deceptive design patterns used in websites and apps that make users do things that they didn’t intend to. While dark design patterns may lead to short-term business gains, they ultimately diminish trust over time and do a disservice to the people using our designs.

Examples of Design Patterns

Date Picker

A date picker is a common design pattern used on many different types of websites and applications. This design pattern should allow users to easily select a specific date or date range. Some common formats include calendars, dropdowns, text fields, or hybrid patterns.

Four types of date pickers. Option A is a calendar with clickable dates. Option B is a text field with 'MM/DD/YYYY' inside it, with the option to click and select a date from a calendar. Option C is three dropdown menus for the month, date, and year. Option D is a freeform text field with 'MM/DD/YYYY' inside it.

Search Results

Search results are a list of results displayed after a search form is completed and submitted. Search results can follow a variety of different design patterns. It’s fairly common for search results to be showed as a list view, but designers could also potentially use a card view or table view. Designers should also consider what information should be displayed about each result, the order of results, what filters to make available to users, the desired next steps after search, how users will scroll through results, and whether specific results should be differentiated visually.

All contributors

Looking to contribute?

Learn UI and UX Design on Codecademy