Design Practice
Practice is the act of doing something regularly or repeatedly to improve your skill at doing it.
A design is a plan or specification for the construction of an object or system or for the implementation of an activity or process, or the result of that plan or specification in the form of a prototype, product or process. The verb to design expresses the process of developing a design.
Foundations
Component Table
The following represents my efforts at analyzing and comparing some of the most affluent design systems, pattern libraries and frameworks publicly available for purpose of research from a design perspective. Included design systems: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines, Material Design, Material-UI, GitLab Pajamas, Github Primer, and Adobe Spectrum.
| sssssssssssss | Angular | Atlassian | Carbon | Edison | Fluent UI | HIG | Material | Material-UI | Pajamas | Primer | Specrum |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Accordion | ✓ | ✓ | ✓ | ✓ | ✓ | ||||||
| Avatar | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
| Badge | ✓ | ✓ | ✓ | ✓ | ✓ | ||||||
| Banner | ✓ | ✓ | ✓ | ✓ | |||||||
| Breadcrumb | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||
| Button | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Button Toggle | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
| Card | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||
| Checkbox | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Chip | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||
| Dialog | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Divider | ✓ | ✓ | ✓ | ✓ | ✓ | ||||||
| Drawer | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
| Dropdown | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Link | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||
| List | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
| Menu | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||
| Nav Bar | ✓ | ✓ | ✓ | ||||||||
| Angular | Atlassian | Carbon | Edison | Fluent UI | HIG | Material | Material-UI | Pajamas | Primer | Specrum | |
| Pagination | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
| Picker | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||
| Progress | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Raiting | ✓ | ✓ | ✓ | ✓ | |||||||
| Radio Buttons | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Search | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||
| Sheet | ✓ | ✓ | ✓ | ||||||||
| Slider | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||||
| Stepper | ✓ | ✓ | ✓ | ✓ | |||||||
| Table | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||
| Tabs | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Text Field | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Toast | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Toggle | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ||
| Toolbar | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||||
| Tootip | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Tree | ✓ | ✓ | ✓ | ✓ |
Repository of design systems and pattern libraries: Adele
Design Components
Components are portions of reusable code within the system that serve as the building blocks of the application’s interface. Components range in complexity. Reducing components to a single function, like a button or a drop down increases flexibility, making them more reusable. More complex components, like tables for specific types of data, can serve their use cases well, but this complexity limits the number of applicable scenarios. The more reusable components are, the less need to maintain, and the easier scale becomes.
Accordion
Also Known As: Expansion Panel
Definition: An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
Atomic Category: Molecule
Examples: Angular Material, Carbon, Edison, Fractal, Pajamas
Similar: Human Interface Guidelines (iOS)
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
| 1 | Tabs vs. Accordions | Medium: UX Collective | 2019 | |
| 2 | Accordions on Mobile | Nielsen Norman Group | 2015 | |
| 3 | Accordion Menu Design Pattern | UI Patterns | - |
Avatar
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Material-UI, GitLab Pajamas, Github Primer, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Badge
Definition: A Badge is a small value indicator that can be overlaid on anotehr object.
Atomic Category: Atom
Examples: Angular Material, Atlassian, Human Interface Guidelines (iOS)
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Banner
Definition: A banner displays a prominent message and possible related optional actions.
Atomic Category: Molecule
Examples: Atlassian, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Breadcrumb
Definition: Breadcrumbs are a navigation system used to show a user's location in a site or app.
Atomic Category: Molecule
Examples: Atlassian, Carbon
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Button
Also Known As: Push Button
Definition: Buttons allow users to take actions, and make choices, with a single tap.
Atomic Category: Atom
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS) Material Design, Spectrum
‣ Types
‣ States
‣ Design
‣ Guides
- Make buttons look like buttons
- Put buttons where users expect to find them
- Properly size buttons
- MIT Touch Lab study found that averages for finger pads are between 10–14mm and fingertips are 8–10mm. This makes 10mm x 10mm a good minimum touch target size.
- It should be obvious what buttons do
- Avoid using too many buttons
- Provide visual or audio feedback on interaction
‣ Resources
| 1 | UI cheat sheets: buttons | Actions, Styling, Colors, States, Labeling, Targerts, Positions | ✓ |
Button Toggle
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Material-UI, GitLab Pajamas, Github Primer, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Card
Also Known As: Tile
Definition: A card is a styled container for content and actions about a single subject.
Atomic Category: Organism
Examples: Angular Material, Carbon, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Checkbox
Definition: Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.
Atomic Category: Atom
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Chip
Also Known As: Tag
Definition: Chips are compact elements that represent an input, attribute, or action.
Atomic Category: Atom
Examples: Angular Material, Atlassian, Carbon, Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Dialog / Modal
Definition: Dialogs inform users about a task and contain information, required decisions, or involve multiple tasks.
Atomic Category: Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Divider
Definition: A verticle or horizontal visual divider.
Atomic Category: Atom
Examples: Angular Material, Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Drawer
Also Known As: Navigation drawer
Definition: Drawers are a popout that contains navigation, information and/or other components.
Atomic Category: Atom
Examples: Angular Material, Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Dropdown
Also Known As: Select
Definition: Allows the user to select one or more options using a dropdown.
Atomic Category: Atom
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Link
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Material-UI, GitLab Pajamas, Github Primer, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
List
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Menu
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Navigation Bar
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Pagination
Also Known As: Paginator
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Material-UI, GitLab Pajamas, Github Primer, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Picker
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Material-UI, GitLab Pajamas, Github Primer, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Progress Indicator
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Material-UI, GitLab Pajamas, Github Primer, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Raiting
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Material-UI, GitLab Pajamas, Github Primer, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Radio Buttons
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Material-UI, GitLab Pajamas, Github Primer, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Search
Also Known As: Autocomplete
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Material-UI, GitLab Pajamas, Github Primer, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Sheet
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Material-UI, GitLab Pajamas, Github Primer, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Slider
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Edison, Microsoft Fluent UI, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Material-UI, GitLab Pajamas, Github Primer, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Stepper
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Table
Also Known As: Grid
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Tabs
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Text Field
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Toast
Also Known As: Snackbar, Notification, Alert
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Toggle / Switch
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Toolbar
Definition: An toolbar can display navigation, information, and actions relating to the current screen.
Atomic Category: Organism
Examples: Material Design, Material Design
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Tooltip
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Tree
Also Known As: * *
Definition: def
Atomic Category: Atom / Molecule / Organism
Examples: Angular Material, Atlassian, Carbon, Human Interface Guidelines (iOS), Human Interface Guidelines (macOS), Material Design, Spectrum
Similar:
‣ Types
‣ States
‣ Design
‣ Guides
‣ Resources
Design Patterns
← Methods Accessibility →