Design systems: An organizing principle for every story you tell.

By Thesis

See how the principles of atomic design can support impactful creative that scales.

May 10, 2021

Constraints are vital to the creative process.

You didn’t expect to hear that from a bunch of “blue sky” creatives, now, did you?

But really: As we go about our work, making webpages and emails and digital products, we need our projects to be scalable and consistent, fresh and compelling. The principles of atomic design can help make this happen, defining and giving a name to our building blocks — from voice to imagery to the logic of user experience.

First things first: What is atomic design?

Brad Frost codified atomic design as a way to approach functional interface design for digital products. Just as atoms are the building blocks of life, atomic design suggests that a defined set of reusable components, when governed by clear guidelines (that’s an important piece!), can be assembled to build all kinds of rich digital experiences, over and over again.

Think of the digital components as physical Legos. They’re different shapes, sizes, colors, and contours. But when snapped together by an intentional maker, the disparate pieces come together quite coherently.

These building blocks have been around the block.

This type of thinking is new to the business landscape, but ancient in creative work, in both arts and sciences. From the basic chemical relationships that inspired it, to Linnaean taxonomy, to the Petrarchan sonnet, to moveable type — smart people have been creating atomic systems to help us navigate the world and our work within it for a very, very long time.

And we’re glad the practice has been pushed. Because sound design systems are worth their weight, they stand the test of time as they can support excellent and efficient projects and, at the same time, show you a lot about what you’re making and why.

How to make a system that keeps things consistent while leaving space for creative play.

A good design system, one that won’t quickly fall out of use, defines your important constraints while leaving room for new ideas. (It’s how you get a consistently strong voice and/or visual for your brand, without things always showing up the same.)

So: While we treat each system uniquely, we have some go-to principles that guide how the atomic pieces come together and what they ultimately add up to.

Start by defining what you need to make.

A thorough and thoughtful audit of your project and its materials will show you what to prioritize. And getting close to the needs of the brand, the audience they need to reach, the story they’re telling, and the different media they’ll work with helps you make informed decisions about what you want to bring forward and what needs to change.

Consider what these materials do well. Consider needs that they don’t address. Look to the whys and be sure they’re the right ones. Be sure you’ve got clear measures for success.

Get the names right.

Part of this work is in creating a shared language. Designers, strategists, and engineers will always describe things differently. The principles of atomic design rely on clear and intuitive names for each part in the system, describing the element and suggesting its relationship to the larger organism. The goal isn’t to get everyone to think of things exactly the same way but rather to ensure everyone is on the same page.

Bake in some freshness.

The structure of your project might be set and its branding clear, but creatives must be able to layer in fresh elements that enrich the particular needs of that work. A well-considered system helps teams make deliverables that are clearly branded but manifestly current — sharp without being stale.

Pressure-test while you work.

When you implement a design system, you’ll need to scrutinize the principles you’ve established. Ask yourself: Do they hold water?

At Thesis, we’ve been able to automate updates for large and established email programs, coding an aide that can shift standards across a broad range of assets. In the process of this update, we were able to quickly catch and address any gaps and exceptions within the system we created and optimize accordingly.

Maintenance is a must.

Priorities shift. Technology changes. Users need new or simply different things. Design systems need regular revisions and updates to keep them as practical and relevant as possible.

It adds up to efficiency and impact. Beauty and use.

The principles of atomic design are nothing new. From language to Legos, humans have used systems thinking to structure creative projects and processes for always. Why? Because they work.

Taking the time to build a sturdy system for your brand can nurture both business priorities and beautiful creative work. These functional frameworks foster big ideas and smart moves while keeping your teams connected — working efficiently and effectively toward shared goals and, perhaps most importantly, supporting creative work without stifling it.

That is to say: Design systems and their so-called constraints are not baggage, only luggage.