Proven design patterns.

 

Our patterns slash the time required to differentiate your digital brand.

 
Pattern Hero Image.png

Don’t start from scratch.

More than visual examples, our patterns are tested human interaction models. See your vision come to life faster, delighting your customers.

Preview and download our design patterns below.

Linear Header 2.png

Step-by-Step Patterns

Linear Information Architecture Patterns

 
Task-List.gif

TASK LIST

Ordered, multi-step tasks break down complex sequences into user friendly sections.

 
 
 
Form Stepper.png
 

Horizontal Stepper

Ordered, guided instruction with easily digestible steps.

 

Vertical Stepper

Step-by-step form or data entry provides context: a multi-part form within a single app page using keyboard navigation.

 
Data Organization Hero.png

Data View

Information Architecture Patterns

 
 
 

Views by Tag

Tags filter data and are bookmarked into views for easy access and organization.

 
 

Tiled Multi-Select

Spacial multi-selection grid of data all on one page for quick scan.

 
 

Table View

Manages large, flexible amounts of data for basic creation, editing, and filtering. 

 
 

Embedded Table

Table rows provide high level report and expand into subtables for further detail and investigation.

 
Non Linear Hero.png

Non-Linear

Information Architecture Patterns

 
Top-Navigation.gif

Document Pad

A paper metaphor for a digital system, whether a portrait mode tablet or a multi-screen desktop, this pattern uses a slide-up document pad to preview, review, or edit.

Dashboard

Tiled landing page with a high level view of most important information.

Top Navigation

Organize and navigate between complex workflows.

 

Landing Page

Dashboard variant with secondary links customized to support a particular user, role, or instance. 

Expanding Sections

Accordion containers that expand and collapse allow the user to focus on relevant content.

Side Navigation

Vertical menu to easily navigate across functionally related pages.

 
 

Expanding Panel

Slide out panel to accommodate space for editing or displaying compound data.

Tabbed Perspective

Tabs show multiple perspectives of the same data.

 
 
 

Mobile Adaptive Patterns

Equivalent design patterns' tested interaction models scale across devices.

 
Feedback Pattern Hero.png

Feedback

Information Architecture Patterns

 
Error Tracking 2.png

Error Tracking

Callout highlights error and navigates user through a review within or across pages.

Sunburst

Sunburst graphic draws the eye and directs focus to next steps.

Shortcut Menu 2.png

Shortcut Menu

An overview of contents and one-click shortcut to embedded pages. 

 
 

Download our patterns.

 

our patterns can work for you.