Design Pattern
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.
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.
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.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn UI and UX Design on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Introduction to UI and UX Design
Get started with User Interface (UI) and User Experience (UX) Design and learn how to wireframe and prototype using Figma.Beginner Friendly2 hours