Skip to main content
Hennepin County Design System

Patterns

Patterns are blueprints for assembling components in a consistent and user-friendly way. 

Patterns help ensure the interface is easy to use and understand. They provide users with familiar and predictable interactions. Patterns build user trust by delivering consistent design across products and platforms.

Patterns provide a framework for creating efficient and effective interfaces. They also provide a shared language and understanding among teams. This can help streamline the development process and reduce errors.

Examples of patterns 

  • Navigation
  • Forms
  • Search
  • Footers
  • Headers

Steps for choosing or assembling a UI pattern

Patterns are a tool, not a rule. These steps offer a flexible framework for effective decisions about using patterns.

  1. Understand the user need: Define the user’s goals. Consider the context of the design and any constraints.
  2. Choose the appropriate UI pattern: Choose the pattern that best fits the user’s needs and context. Identify the relevant elements of the design. For example: navigation menus, search bars or form fields.
  3. Adapt the pattern to fit your design: Take into account the specific context and user needs. You may need to adapt the layout or color scheme to fit your project.
  4. Test and iterate: We recommend you test the pattern with users. This lets you get feedback and improve the design.

The goals of using patterns

Consistency: Patterns create a consistent experience across applications and websites. Users can learn how to interact with our digital products easily and with confidence.

Efficiency: Patterns help users complete tasks with less effort.

Usability: Intuitive and user-friendly patterns are more usable than custom-designed interfaces. Patterns reflect tested design principles and best practices.

Accessibility: Patterns work well for the widest possible group of users. They’re optimized for people who use assistive technology and are useful for everyone.

Scalability: Patterns are scalable. It means they’re flexible and adaptable to changing needs and requirements. So we can use them across a wide range of applications. 

For information about usability, visit Introduction to Digital Usability.

What you will find on each patterns page

  • Each pattern’s purpose
  • Example of patterns (wireframes)
  • Accessibility and best practices guidance for the pattern