Design Patterns

Proven design patterns for success

KRUTSCH UI Patterns slash the time required to differentiate your digital brand.

Our Patterns

Patterns aren’t a new concept in UI/UX design, but their presence in the apps we design says something of their usefulness. We know how to make them work for you. Check out the frameworks below.

Linear Information Patterns

A webpage with four steps listed, each with arrows indicating further navigation, on a light background with a green border.

Task List

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

A computer screen displaying a digital interface with a horizontal number scale from 1 to 5, with marker 2 highlighted. Below the scale are three gray horizontal bars, and at the bottom are two navigation buttons, a white arrow pointing left and a blue arrow pointing right.

Horizontal Stepper

Ordered, guided instruction with easily digestible steps.

A digital form displayed on a green background with steps listed from 1 to 5 on the left side. The form includes fields for name, email, and phone number, with a true/false question and a downward arrow at the bottom.

Vertical Stepper

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

Non Linear Information Patterns

A light blue, gradient background with diagonal lines.

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.

Curious? Interact with this Pattern here.

Document Pad

Screenshot of a website with a navigation menu labeled 'Home,' 'First,' and 'Second.' The main content area contains multiple rectangular blocks, some filled with light blue color.

Dashboard

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

A website wireframe layout with a top navigation bar, five square image placeholders, and two content sections, one large and one smaller, on a light blue background.

Top Navigation

Organize and navigate between complex workflows.

A computer screen displaying a dropdown menu with three collapsed options labeled 'Group 1,' 'Group 2,' and 'Group 3' on a teal background.

Expanding Sections

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

A blurred computer screen displaying a webpage with a header, grid of six blank squares, and a list of six text items on the right side.

Landing Page

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

Digital user interface displaying a webpage with two tabs labeled 'Tab 1' and 'Tab 2', and some placeholder text beneath the tabs.

Tabbed Perspective

Tabs show multiple perspectives of the same data.

Screenshot of a computer interface displaying a table with columns for Name, Email, Role, Experience, and Duration, with a light blue and white color scheme.

Expanding Panel

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

Screenshot of a dashboard with a sidebar menu on the left containing options for Home, Reports, Activity, Users, and Create. The Reports section is highlighted, and the main content area is mostly empty with some blank white boxes.

Vertical menu to easily navigate across functionally related pages.

Side Navigation

Screenshot of a data table with headers labeled Header 1, Header 2, Header 3, and Header 4, along with checkboxes on the left side, set against a gradient teal background.

Data Patterns

Views By Tag

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

Screen display of a survey or form with multiple checkboxes, with some options selected and highlighted in light blue.

Tiled Multi-Select

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

Screenshot of a digital spreadsheet with multiple columns and rows, featuring headers labeled Header 1 to Header 4, and some icons for adding, filtering, and other functions.

Embedded Table

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

Screenshot of a spreadsheet with four headers and multiple rows, with one row selected.

Table View

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

A computer screen displaying a blurred application window with a pop-up error message that says 'Error message here.' and buttons labeled 'PREV' and 'NEXT'.

Feedback Patterns

Error Tracking

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

Screenshot of a web interface with tabs labeled Home, First, and Second, with blank content areas below each tab.

Sunburst

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

Screenshot of a website with a navigation bar displaying 'Home', 'First', and 'Second' tabs, with a dropdown menu under 'First' showing 'First Menu' including links to 'Page 1', 'Page 2', and submenus 'Subpage 1' and 'Subpage 2'. The page background is light gray with white content sections arranged in a grid.

Shortcut Menu

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

Our Patterns in Action

Watch and listen to our developers walk through some of our most used and most complex KRUTSCH Patterns.

Document Pad

Multi Select

Expanding Panel

  • screenshot of the mayo clinic patient registration app on desktop

    Document Pad

    The Document Pad was used in web-based app to help create, manage, and track all aspects of clinical research studies for the #1 healthcare system in the nation (a Davinci Software client).

    View Case Study
  • Dashboard interface with sections for activity, calendar, services, hardware, migration milestones, next milestone, and data migrated. The dashboard displays migration statuses, timelines, and storage usage, with a pop-up showing details of a specific migration job.

    Dashboard

    An appliance-embedded, web-based app to setup, manage, and monitor all aspects of storage migration.

    View Case Study
  • Router's web interface showing network configuration with LAN and Wi-Fi settings, including active, error, and unassigned networks.

    Error Tracking

    Used for an app that interacts with an enterprise-grade wireless router that includes support for a variety of connections, including multiple cellular networks.

    View case study
  • Dashboard and mobile app interface displaying training schedule, verifications, employee hours, and progress for a nutrition training program with a colorful food image.

    Dashboard

    A dashboard that verifies professionals’ credentials, pushes training opportunities, and centralizes personal records.

    View Case study
  • Screenshot of a software interface for managing data migrations, with tabs labeled CREATE, SOURCE, DESTINATION, POLICY, SCHEDULE, CONFIRM, and options to start, pause, validate, or fail over migrations. The interface includes sections for scheduling migration activities with details on days, times, and bandwidth.

    Expanding Panel

    An appliance-embedded, web-based app to setup, manage, and monitor all aspects of storage migration.

    View Case Study

Let us tailor our Patterns to your app’s needs.

Book Free Consult