Design System Patterns

What are Patterns

Patterns are recurring solutions addressing common design problems or user needs, like navigation menus or search bars. They create intuitive and predictable user interfaces, improving overall user experience.

Definition

Core Patterns List

1. Breadcrumbs
2. Card view
3. Checkout
4. Composer
5. Data Viz Card
6. Feature
7. FAB
8. Filter
9. Footer
10. Follow
11. Full Screen Menu
12. Flyout
13. Hero
14. Card
15. Invite
16. List view
17. Login
18. Mega Menu
19. Modal
20. NavBar
21. Pagination
22. Pricing Table
23. Prompt
24. Review
25. Select Card
26. Settings
27. Share sheet
28. Sidebar
29. Signup
30. Sort
31. Table
32. Text editor
33. Text pairing
34. Title
35. Tour

Design System Pattern Definitions

1. Breadcrumbs: Hierarchical navigation aids showing user’s location.
2. Card View: Visual container grouping related information and actions.
3. Checkout: Final purchase step in e-commerce interfaces.
4. Composer: Tool for creating or editing content.
5. Data Viz Card: Card showcasing graphical data representations.
6. Feature: Distinctive functionality or service of a product.
7. FAB: Floating Action Button for primary interface action.
8. Filter: Tool for refining displayed data or content.
9. Footer: Bottom section of a page providing supplementary information.
10. Follow: Action to subscribe to user or content updates.
11. Full Screen Menu: Navigation option overlaying the entire screen.
12. Flyout: Temporary, secondary interface panel for extra content.
13. Hero: Prominent banner displaying key marketing message.
14. Card: Container encapsulating related information in a compact form.
15. Invite: Action to request others’ participation or access.
16. List View: Data display in a vertical list format.
17. Login: Authentication process to access a user account.
18. Mega Menu: Large, comprehensive dropdown navigation panel.
19. Modal: Temporary window requiring user action, overlaying main content.
20. NavBar: Horizontal bar with main navigation links.
21. Pagination: Control for navigating through segmented content.
22. Pricing Table: Tabulated display of product prices and features.
23. Prompt: Request for user action or input.
24. Review: User’s qualitative evaluation of a product or service.
25. Select Card: Interactive card used for selection purposes.
26. Settings: User controls to customize app or interface behavior.
27. Share Sheet: Panel offering various content sharing options.
28. Sidebar: Vertical navigation or content panel on screen side.
29. Signup: Process to create a new user account.
30. Sort: Tool for ordering displayed data or content.
31. Table: Grid of data arranged in rows and columns.
32. Text Editor: Interface for creating or modifying text content.
33. Text Pairing: Two typographical elements used together.
34. Title: Primary heading indicating content topic.
35. Tour: Guided walkthrough for orienting users in a system.

Posted July 6, 2023 by hellojohnnymac