From the course: Auditing Design Systems for Accessibility

Atomic design principles

From the course: Auditing Design Systems for Accessibility

Start my 1-month free trial Buy for my team

Atomic design principles

“

- Now that we understand more about accessibility, how does this connect to design systems? So a design system is like a single source of truth for a product, they're a powerful way to group related elements together, define their purpose, and clarify their delivery. Basically, they establish reusable brand elements, components, and patterns. With a design system we can do something once, apply it everywhere, and establish a better experience for everyone. Organizations use them to make their products easier to build and scale. But, most importantly, a design system is essential because it helps us scale accessibility. Accessibility needs can be addressed at a system level and applied broadly, saving money, and time while benefiting our users. This is because design systems use atomic design. Atomic design is basically a mental model that helps us create scalable interfaces. It has five distinct stages working together to create interface design systems which are: atoms, molecules, organisms, templates, and pages. With atomic design, our components build on each other. We start with atoms, which can be combined to create molecules, and can be further combined to form organisms. These elements inform, and create templates that can apply to our pages on our platforms. They're the easiest, and best way to scale, and interface. Let's break down how atomic design scales with an example design system starting with subatomics. Subatomics are things like brand colors, or typefaces. They affect all the elements we create from our smallest scale to full-blown pages. Atoms show all of our base styles at a glance. They tend to be things like form labels, inputs, buttons, really anything that can't be broken down without ceasing to be functional. For our example, we have a label, a dropdown selector, and a button each serving as a unique atom. Molecules are relatively simple groups of atoms functioning together. The result is a simple, portable, and reusable component that can be added anywhere. For our example, our form label, dropdown selector, and save button can now be combined into a functional form field unit. Organisms are more complex components made up of groups of molecules and/or atoms, and even other organisms. They form distinct sections of an interface, demonstrate simpler components in action, and serve as repeatedly usable patterns. Templates put components into a layout, and present a design's underlying content structure. A template displays all the necessary page components functioning together, providing context for our relatively abstract molecules, and organisms. And finally, pages are instances of templates with actual content in place. They show our final interface as our users will see it, and are central for testing underlying elements. Atomic design and design systems are powerful tools for accessibility. So clarifying atomic design will help us learn how we can apply accessibility at scale.

Contents