top of page

Design Systems

Below, you will find experts on design systems from Nice Actimize. Since then, I've been practicing atomic design to improve the maintenance and evolvement of Design Systems.


Nice Actimize

Color palette














Classic design system


Atomic Design

Atomic Design by Brad Frost structures UI design into five levels: Atoms (basic elements like buttons), Molecules (groups of atoms forming functional units like search forms), Organisms (complex UI sections made from molecules, e.g., headers), Templates (layouts combining organisms), and Pages (real content instances of templates for practical testing). This approach ensures systematic, scalable design, aiding in creating cohesive and manageable user interfaces. Atomic Design continues to adapt to emerging concepts in design. Recent expansions include subatomic particles, reflecting design tokenization, and broader metaphors like onions and pace layering.


Pace Layering

Pace Layering is a theory developed by Stewart Brand, author of How Buildings Learn: What Happens After They’re Built. According to Brand, scientists have questioned how ecological systems absorb and incorporate shocks, and “The answer appears to lie in the relationship between components in a system that have different change rates and scales of size.


Consider the differently paced components to be layers. Each layer is functionally different from the others and operates somewhat independently. Still, each layer influences and responds to the layers closest to it in a way that makes the whole system resilient.”

Earlier still, in the early 1970s, the English architect Frank Duffy wrote,

“A building properly conceived is several layers of longevity of built components.”  He identified four layers in commercial buildings—Shell (lasts maybe 50 years), Services (swapped out every 15 years or so), Scenery (interior walls, etc. move every 5 to 7 years), and Set (furniture, moving sometimes monthly.) 


The Onion

Below is the Pace Layering version of Atomic Design

The Onion facilitates the DS decision-making processes and buffers the risk of making more components during product evolution. The Onion can be helpful in two ways:

1. Efficient decision-making on Design Systems

  • Which element should be a DS component?

  • How complicated should the component be?

  • Which version(s) should be variants, and which should be properties?

These challenges will happen from the beginning of creating the DS and will be distributed throughout the processes. They will trigger trivial debates and drain the team’s decision-making capacity.


To tackle the above problem and reduce redundant communication, one can practice The Onion as such:

  • Break down the element into its dumbest and smallest parts, and those are your atoms. Be the most careful in making atom decisions, as they are the foundation of your DS and are at the slowest pace layer.

  • Examine the existing atomic components horizontally, and be mindful if you are reinventing the wheel.

  • Construct each higher-layer element with its sub-level components

  • Follow the Storybook’s three repentance rules to decide if the high-level element should be DS components. Useful heuristics:

  • If a UI pattern is used more than three times, turn it into a reusable UI component.

  • If a UI component is used in 3 or more projects/teams, put it in your design system.


Accessibility guidelines

Integrating accessibility best practices into web and application design is essential for creating inclusive digital experiences that accommodate all users, including those with disabilities. Adhering to the Web Content Accessibility Guidelines (WCAG) ensures that content meets established standards for accessibility, addressing various impairments. Designing for broad usability benefits everyone, enhancing the overall user experience. Key practices include providing text alternatives for images and non-text content to support screen readers, ensuring keyboard accessibility for interactive elements, and using sufficient color contrast for readability. Clear and concise language helps users with diverse reading abilities, while a logical content structure with headings and lists improves navigation.


Moreover, effective error handling and clear instructions are crucial for user interactions, offering clear error messages and keyboard shortcuts to enhance efficiency. Ensuring mobile responsiveness allows content to be accessible on various devices, while testing with assistive technologies like screen readers and voice recognition software ensures functionality across different user needs. These practices not only comply with accessibility standards but also foster an inclusive environment, enhancing user satisfaction and engagement. Resources like WebAIM and the W3C WCAG guidelines provide valuable support in implementing these best practices effectively.


Resources:

Comments

bottom of page