How to Use Patterns

Start All of Your Designs by Browsing for Ideas and Best Practices

Consult this collection whenever you start a new project or begin work on a new UI design.

Look for patterns that correspond to your application needs. Even if you don't find an exact match, you may discover a useful starting point for part or all of your design.

Use a Top-Down Site Map to Facilitate Project Planning

Prior to starting development, sketch out a rough site map to understand the key UIs in your application:

  • Which sites will different user groups visit?
  • Which top-level tabs will appear on each site?
  • Which pages will feature secondary navigation?
  • What will be the main content sections on each page?
  • What types of information or actions will be shown in each page section?

Your detailed designs can, of course, evolve over time as you receive user feedback. Starting with a draft blueprint allows you to answer key questions up-front and that will positively impact the quality of your application.

Choose the Best Design Pattern for Each Page or Component Type

Identify the type of page that you're designing (e.g., dashboard or form) and browse the relevant patterns to select the best one to use.

Do the same for each type of component (e.g., user list, activity timeline) on the page.

Clearly Express Information Hierarchy

Use clear and consistent techniques to show users where they are within a site and how content is organized on a page.

  1. Display a descriptive page title. See Page Titles.
  2. Select an appropriate style for identifying page content sections. See Content Structure and Content Cards.
  3. Implement secondary navigation controls as needed. See Secondary Navigation.

Aim for Consistency Across UIs

Consistency reduces user confusion while also streamlining development work.

Once you select a visual pattern for a given intent (for example, the title style for page content sections), use it consistently across all pages in the application. Better yet, enforce consistency across all of the applications in your organization for even greater efficiency.

Create and Maintain a Patterns Library for Your Project

Plan and standardize the categories of pages in your application. Instead of designing each UI independently, aim to reuse a consistent set of templates.

Find and copy relevant UI patterns in to serve as the starting point for your project templates.

Create and share reusable templates to be used as the foundation for all project UI development. Combine and extend the patterns that you find here to match your needs. Add data, logic, and functionality to turn each template into an easy-to-use UI building block.