About a month ago now I only had time to work, eat, sleep and attend a UXPin Virtual Summit about UX at Scale. Even though I had very little time for much else I learned some very valuable lessons, not only if I had to scale up design processes but also how to design within a startup for a better chance at a successful business. One of those lessons revolves around establishing a Design System. In this post I’ll give you a brief overview of Design Systems and show you Atomic Design as an example of how these systems can help you create a consistent experience for your product and scale in the future.
What exactly is a Design System?
Think of a Design System as the formalisation of a design style, crafting and collecting the components that can be put together to make up a product, digital or not. Twitter’s Bootstrap framework is a great example of a kind of Design System, where you spend time describing what you want using the CSS classes and visually remains consistent. For anyone with a programming or development background it’s practically the same as structuring your program so that it works together cohesively, utilise functions and classes, keeping it DRY and becomes easier to scale up and build. Atomic Design, popularised by Brad Frost, follows programmatic-esque principles to help compose a Design System.
Anatomy of an Atomic Design System
Just like programs are made up of variables, functions, classes and applications, an Atomic Design System is composed from Atoms, Molecules, Organisms, Templates and Pages. Below is a brief description and example of each category.
Atoms
These are the most basic building blocks of your interfaces. If you tried to break them down any further then they would lose all context and meaning. Some good examples of elements that are atoms are:
- Buttons
- Typography
- Labels
- Inputs like a checkbox
You can have variations of each atom, so long as you don’t duplicate yourself. One concrete example I like to use are Bootstrap buttons that generally have one of four classes: success, info, warning and danger.
Molecules
Composing two or more atoms together makes a molecule; at first this sounds somewhat intuitive and unintuitive at the same time, however bear with me. Imagine running a Google search, and have a look at the main search box – it’s compose of a single line text input, a voice input button, a “Google Search” button and the infamous “I’m Feeling Lucky” button. Even though the content of the two latter buttons differs, they are both compose of the same Atoms and together they provide a clearly defined function.
Organisms
Stitching together a few molecules makes up an organism, such as a blog post carousel. The Molecules making up a blog post carousel might be the carousel itself, and a blog post display box such as the ones you might see at the bottom of an online article. These two Molecules themselves can perform succinct functions, and by combining them together do you start to get a sense of composing an interface.
Templates
You can think of templates as wireframes or layouts of interfaces; we aren’t necessarily adding in content anywhere but we’re visualising the structure of the page, the flow of elements and start thinking of your designs as a whole. At this stage you may start seeing what works and what doesn’t, and feeding that back down into the Organisms, Molecules and Atoms to better fit together. This is the stage where Interaction Design work can take place and is easier to collaborate on with other team members and stakeholders.
Pages
Sometimes necessary, sometimes not, Pages can be thought of as “mockups” based on your templates by placing some real content. This serves two purposes: first is to account for things like copy affecting your layout, and creating a distinction between the design stages of Interaction Design at the template level and Visual Design at the page level; second is to showcase to stakeholders or as a basis for prototypes to perform user tests and validate your designs and assumptions. These aren’t required for every single page, you should use them as appropriate.
For those who are crafting a Design System using this model but aren’t working on digital interfaces, similar rules apply. Some examples: packaging design can have barcodes, nutritional information and slogans templated and “paged” on a test wrapper; furniture can have legs, seats and surfaces templated and materials and textures applied at the “page” level; even a book compose of diagrams, pictures, chapters and quotes can be structured into suitable templates that can produce a book that has been design as a whole.
Summary
In this post I introduced the concept of what a Design System is, an example of which is Atomic Design and the constituent parts of an Atomic Design System. The similarities of how Atomic Design is structured and composed is actually quite similar at a programming and software engineering level and I’m sure can work compatibly with engineers on your team. Hopefully I’ve opened up your eyes to other ways of thinking and designing as mine have been, and have taken away either some inspiration or a drive to try an implement this on your next big project.
