HOW TO GET CONSISTENT AND PROFESSIONAL UX DESIGN LEVERAGING ATOMIC DESIGN PRINCIPLES

Haneke Design creates component style guide for Frank Winston Crum Insurance web application using Atomic Design principles.

What if there was a way to systematically design a website to produce a consistent UX design across multiple devices?

Actually, there is. It’s called Atomic Design, and it’s at the heart of Haneke Design’s latest work for Frank Winston Crum Insurance.

The Evolution of Atomic Design

Brad Frost developed his chemistry-inspired system of web design while working for Big Medium in 2013. Mobile devices were on the rise, forcing web designers to create sites that looked and worked great across multiple devices. But in 2013, there was no system in place for doing this. Enter Frost’s Atomic Design.

Atomic design consists of five interconnected building blocks that collaborate to construct interface design systems using a hierarchical approach. This methodology helps designers think of user interfaces as both a cohesive whole and a collection of parts. The five building blocks of Atomic Design are:

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

The idea behind this methodology is to start as small as possible. In chemistry, an atom is the smallest unit of matter. Atoms combine to form the molecules. Molecules combine to form organisms, and so on.

In web design, the atoms are the individual design elements that make up a webpage – the buttons, search boxes, fonts, labels, and color palettes – anything you can specify with an HTML tag. Together, they form a periodic table of elements from which designers assemble the menus, navbars, and search forms that users interact with.

Why use Atomic Design?

Why add atomic theory to the already complex process of web design? And why is Haneke Design so excited about this new method of designing websites?

Because Atomic Design is the best way to create a consistent user interface for our clients. This is why Haneke Designer James DeMass pitched the idea to Frank Winston Crum Insurance (FWCI).

Haneke was in the middle of a design project with Frank Winston Crum Insurance when DeMass noticed some small inconsistencies he knew could be solved by creating a component library using a combination of Atomic Design and Bootstrap.

“At Haneke, our commitment lies in consistently engaging with and guiding our clients throughout the entire duration of our partnership. Recognizing an opportunity for enhancing design consistency and efficiency, I took the initiative to express my recommendations and suggestions to the FWCI team,” explains James. 

Applying Atomic Design to Frank Winston Crum Style Guide

Guided by Atomic Design principles, James used Bootstrap to build a library of 20 reusable design elements for Frank Winston Crum Insurance.

Bootstrap adds code to style, creating a coded style guide that gives the Frank Winston Crum Insurance website a consistent look that translates to any device.

Once a designer creates a component library, they can assemble “molecules” from this library into header and product grid “organisms”. They combine these molecules and organisms to create layouts or templates. Add some content, and viola, now you have a web page.

How Atomic Design Increases Efficiency

Most clients don’t talk in terms of Atomic Design and Bootstrap, but they do talk about saving time and money. And the Atomic Design-Bootstrap combo platter helps them do both.

How? Component libraries like the one James created form a bridge between designers and developers, providing all the information a developer needs to achieve a certain look. Libraries like this one, which took only two weeks to complete, could save as much as five to ten hours of back and forth between designers and developers. But that’s just the up-front time. Every time you put a new developer on the project, they’ll need that component library to get started.

Atomic Design is the digital organization we need nowadays. It creates a package that ensures a client has all the branded elements they need sitting right in front of them. And it’s a package Haneke Design is happy to provide their clients with.

About Haneke Design

Haneke Design is a leading agency based in Tampa, specializing in Digital Product Design and Development, and Marketing Services.

Haneke’s commitment is to provide clients with a team of passionate innovators dedicated to harnessing the full potential of digital technologies to amaze and delight end users.

By leveraging the latest advancements in technology and staying at the forefront of industry trends, we empower businesses to stay ahead in a rapidly evolving digital landscape.

Are you in need of design services? Reach out to set up a free discovery call with our team!