One of my favorite quotes is by Edward T. White who said, “The quality of a product is determined by the quality of the process that created it.”
In my time as a designer, I’ve worked in various systems and processes built for crafting good quality products — some better, some worse. It wasn’t until I came across a book years ago by Brad Frost titled “Atomic Design” that my approach would be forever changed.
Atomic Design is a term Frost coined after discovering how a design system parallels to chemistry, or the process in which all matter is composed. The idea is that everything at its fundamental core is comprised of atoms, and those atoms combine to form molecules, and those molecules combine to form organisms. In much the same way, user interfaces (organisms) are created using components or elements (molecules) comprised of even smaller components or elements (atoms).
For example, we can look at text, buttons, and form fields as design building blocks at an atomic level. When they are combined together, they can create a molecule such as a form.
When combined with other “molecules” or combinations of atomic design elements, we can construct a fairly complex interface comprised of all these small elements of design.
You’re probably saying, “that’s all well and good but what’s so great about these comparisons?” Aside from bringing clarity and order to your design process, the advent of global controls and symbols in modern design software has made the process itself exponentially more powerful.
Atomic Design is a type of design system. Much like a guideline for a company’s brand, a design system is all of the unique building blocks and structures that make up a digital product — whether that be a website, a mobile app, or software. And, while design systems are at their best in large complex builds, the same principles can be applied on smaller scales to achieve similar benefits for both process and execution.
Design at Scale
As we looked at earlier with the form, a well-crafted design system is made of all the base components of a project’s design, which can include typography, color, iconography, character stylings, heading assignments, illustration style, layout, components, etc. Here at liquidfish, we use Sketch for our UI/UX projects, which gives us the ability to create global assignments for typography and color, as well as the ability to create smart nested symbols (symbols within symbols within symbols within sy…..).
This means that when we create a form field, that field is created once and utilized throughout the design in every instance that we need a form field. If there is a change to that field’s style, it becomes a single change that affects the entire project instantly. This not only means our design is set up more efficiently, but it is also a tremendous time-saver in the design process, allowing our time investment to be spent in more meaningful ways than updating a bunch of form field instances for example.
This approach to design is also part of bridging the gap between designers and developers — bringing design solutions into more harmony with their coded counterparts. A good rule of thumb is to think, “will I reuse this part of the design?”. If the answer is yes, it’s time to make a symbol or a global assignment of that design object. This ensures you are never reinventing the wheel in your designs or adjusting something more than once.
This also brings us to another important part of a design system — structure. It’s very important to consider your naming conventions. In Sketch, when you name a symbol, you can also structure that symbol by using forward slashes as a part of its name: ie. “Form/Input/Input+Label”
This will create a folder hierarchy for your symbols, making it very easy to navigate your design as it grows and becomes more complex. You can also name the layers in your symbols to make it easier to use symbol overrides in Sketch. Ie. “✏️Label”.
Taking care to name your layers and symbols not only makes it easier to collaborate as a team and revisit projects down the road, but it will also make the building process much clearer and easier to navigate, resulting in better quality and more efficiency.
While certainly a pioneer, Brad Frost’s teaching of Atomic Design is just one of many perspectives on the topic of Design Systems. The key is eliminating redundant steps in the design process while creating modular platforms for our projects to grow and flourish over time.
If you’d like to read Atomic Design for yourself, you can find it here. There are also a number of good resources on how to approach Design Systems. I also recommend the free Design Systems Handbook from DesignBetter by InVision.
If you’re looking for a partner to design and build your next big digital idea, be it an app, website, or software, get in touch with us!