Proven Design Patterns.
KRUTSCH UI Patterns slash the time required to differentiate your digital brand.
So, what are Patterns?
Patterns are existing frameworks which we base data layout and visual styling on. With the use of UI Patterns we’ve recognized frameworks we've relied on in the past to effectively organize information. From this we've implemented faster and cleaner frameworks for design iteration. We use various visual design software and tools, like Adobe XD sticker sheets and OmniGraffle stencils, to streamline storyboard and workflow creation. Ultimately, KRUTSCH Patterns slash time required to assemble early versions of your digital story.
What we created.
It only made sense to utilize Material UI for our first attempt at sharing code examples with the world because we use the Material Design System as a general visual language guide for many of our apps. These components (and larger examples) represent our interpretation of the KRUTSCH Patterns in a vacuum. The design may have iterations and changes along with code behind it, but the Patterns do not. This made using Material UI a unique challenge, as it is intentionally opinionated. After some futzing, we were able to mold Material UI into something of our own.
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
Task List
Ordered, multi-step tasks break down complex sequences into user friendly sections.
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.
Nonlinear Information Patterns
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.
Curious? Interact with this Pattern here.
Dashboard
Tiled landing page with a high level view of most important information.
Top Navigation
Organize and navigate between complex workflows
Expanding Sections
Accordion containers that expand and collapse allow the user to focus on relevant content.
Landing Page
Dashboard variant with secondary links customized to support a particular user, role, or instance.
Tabbed Perspective
Tabs show multiple perspectives of the same data.
Expanding Panel
Slide out panel to accommodate space for editing or displaying compound data.
Side Navigation
Vertical menu to easily navigate across functionally related pages.
Data 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.
Embedded Table
Table rows provide high level report and expand into subtables for further detail and investigation.
Table View
Manages large, flexible amounts of data for basic creation, editing, and filtering.
Feedback Patterns
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
An overview of contents and one-click shortcut to embedded pages.
Interact with all of our Patterns on the KRUTSCH Patterns Storybook.
Test out our Document Pad.
As one of the more complex patterns we designed and developed, the Document Pad deserves its own interactive experience.
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
Yes, we actually use them.
It’s easy enough to talk the Pattern talk, but how do we walk the Pattern walk? Check out how the KRUTSCH Patterns benefited a few real life clients.
