A particular way in which something is done, is organized, or happens:
Patterns is a very interchangeable term. You could almost argue that a design system is simply a collection of patterns. This isn't very clear or helpful in identifying what we document, so how do we best articulate our best practice approaches and user experiences in our design system?
We identified types of patterns.
Compared to components that reflect what we have built, patterns are identified as best practice and what we aim to achieve. Most importantly, a pattern must be repeatable.
Types of patterns we have identified:
- UI Patterns: Best experience for an identified user goal.
- Microcopy Patterns: Best practice for labeling and written explanations embedded in the UI.
- Layout Patterns: Best practice for creating visual and information hierarchy.
- Starter Layouts: Toolkit of starting points with best practices embedded.
UI Patterns
Adding an Entity
How to help users add a new entity or space accurately and successfully.
Dialogs, Drawers & Wizards
How to choose the correct overlay.
Error Handling
How to support an intuitive error handling experience.
Filtering
How to enable discovery in large datasets, based on one or more parameters.
Forms
How to help users enter data and configure options throughout Octopus.
Loading
How to use loading states to help users stay informed and engaged while waiting.
Navigation Design
How to facilitate effective navigation across the product.
Notification Messaging
How to provide relevant information to users at the right time.
Motion
How to use motion to bring UI to life.
Saving
How to provide feedback and indicate status when saving data and settings.
Search
How to provide accessible and effective ways of finding data.
Tabular Data
How to display and allow manipulation of complex data at scale.
Time & Numbers
How to consistently format time and numerical values.
Layouts
Error Pages
How to display helpful and actionable full-page errors.
Empty Pages
How to use empty pages for call to actions and product tips.
Level 1 Pages
How to structure content across top level pages.
Level 2 Pages
How to structure content across detailed, nested pages.
Microcopy Patterns
Buttons
How to write concise and actionable button labels.
Error Messages
How to communicate errors and failures.