Why You Need to Switch to Atomic Design

Arguably, electricity is to human civilization as iPhone is to web design and technology. Apple’s role in heralding a new digital age where people could access information anytime, anywhere cannot be undermined. In fact, Apple has a key role to play in the impending age of AI that is upon us. As a UX developer though, I am more interested in talking about how the age of smartphones has meant that web designs are becoming obsolete quicker than you can say “web design”.

The digital ecosystem is evolving at breakneck speed, which means brands continuously need to rethink their design in order to stay relevant. That’s where atomic design – the design methodology first espoused by Brad Frost — becomes crucial.

What is atomic design?

For the uninitiated, atomic design is when you break down your design into its simplest components, called atoms. Font, background color, images, input boxes, field labels and input fields are all examples of atoms in a website.

You join atoms to form molecules, such as search boxes and images with text. Molecules combine to form organisms, such as headers and footers. You layout organisms to form templates, which give you a visual idea of how your website or mobile app is going to look. Templates are used to build pages, and hence, the final product.

Why you need atomic design?

1. It hastens the design process

Atomic design forces you to start with the very basic. Even when you are not an experienced designer, you know the basics that make a website. There is font, color, media, form fields and so on. Since you are starting with the basics, you don’t need to worry about the layout or any of that stuff. You can be as vague as possible and think up as many basic elements as you can that might go in your website or mobile app.

By taking the bottom up approach, it brings more clarity to the design process, which means faster turnaround times.

2. It makes life easy for developers

Even the most basic website has hundreds of lines of code. When a redesign or iteration request comes in, a developer has to go through these hundreds of lines to find out the line of code that needs to be changed. The more complex a website is, the longer the process is likely to take. Things can get especially cumbersome if the developer making the change and the developer who coded the original are not the same people.

Atomic design principles translate to better organized code too. Finding and changing that button style becomes a lot faster when a website is coded using atomic design.

3. Adding or removing elements becomes easier

The web ecosystem is evolving quickly. While having a responsive website might have cut the cake three years ago, you need a lot more today in order to fetch and retain customers. Personalization of content is a case in point. In order to achieve these objectives, your website needs to be updated with newer features, which in the simplest cases means adding a widget or two.

Elements of your website might or might not have a symbiotic relationship, but it is important to ascertain it nevertheless. Atomic design allows you to establish the relationship between different parts of your website, which makes the iterative process that much easier. It could be something as simple as padding throughout your website and if adding a widget in a particularly section has any impact.

4. It does away with duplicate code

Clean code translates to faster websites. Clean code might not be a developer’s utopia though. It can be achieved with atomic design. Atomic design allows you to categorize components according to the effect they have on the system. For instance, a background color might be a global component. However, a fancy font that you use only once for a particular image might be categorized as special effects. By neatly categorizing components, atomic design alleviates the chances of bloated code that’s scattered around on your CSS stylesheet.

It makes sense for the end-user, too.

The goal of any design language is to make intuitive interfaces that:

1. Are easy to navigate
2. Help businesses achieve their commercial goals

Atomic design, as a design methodology, comes good on that front too. By breaking down the complexity of the task, we are allowing ourselves to focus on what’s really important at the moment. Atomic design is basically collecting all your Lego blocks first, before you start to build any kind of structure. By removing the process of layout from the process of collection, you give yourself a better chance to make intuitive design decisions that delight your users.

In fact, atomic design isn’t limited to web design and development alone. GE is using it to design at an enterprise level to design their products. As someone who is immersed in UI/UX, I am a fan of Brad Frost’s design ideology. As web ecosystems become more complex, start with the basics makes absolute sense.

—

Steve Widen is a Partner and President of E-Cubed, a Canadian digital agency that specializes in creative UX/UI design. Under Steve’s leadership, the company has delivered 100s of technology and website deployments for notable clients, which include the Fraser Health Authority, Sierra Wireless and the University of Virginia. E-Cubed’s digital experiences are consistently recognized with industry awards, thus setting a benchmark in the industry. An able leader, Steve has an MBA with specialization in Management of Technology, post-graduate courses in interaction science, and two years of working experience as President of AIIM Western Canada. It is this experience and educational background that has enabled him to push the boundaries of UX/UI. His articles seek to educate and inspire people about emerging trends and technologies in web design and development.