Design Patterns
It all starts with a project need. As I work on projects, I consider consistency across the system, developing reusable patterns along the way. Some patterns accelerate design, while others streamline engineering by serving as specifications for design system components. All of these patterns are incorporated into a Figma library, making them accessible to the entire team and inspiring others to adopt similar practices. My design patterns go through the same Design Thinking process as projects, ensuring they address the needs of other designers and stakeholders and work seamlessly within our ecosystem.
This page holds examples of patterns I’ve designed.
Skip to Zero State | Dialogs | Relative Timestamp |
Spec for building the component
Pattern in use - Agent List
Zero State
Example at Kognitos
Rather than “No items yet” message on a page for ultimately managing many objects of the same type, use the state as an opportunity to show brand personality, guidance on what the object is for, a link to documentation, and a call to action on the first action the user can take to get started.
Spec for using in design
Pattern in use - Playgrond List
Ideations for Illustrations
Pattern in use - Process List
Variant of Pattern - Skills (Integrations)
Spec for building the component
Dialog
Example at Kognitos
Dialogs are one of those UI elements that every app has throughout the experience. We identified three categories: “information” with read-only content, “configuration” where some edits or actions are taken and “confirmation” where the action warrants an extra click.
Spec for using in design
Pattern in use - Create Process from Playground
Spec for building the component
Relative Timestamp
Example at Kognitos
Rather than “No items yet” message on a page for ultimately managing many objects of the same type, use the state as an opportunity to show brand personality, guidance on what the object is for, a link to documentation, and a call to action on the first action the user can take to get started.
Helper component for quick mockups
Pattern in use - Create Process from Playground