What is atomic web design?

The typical way of viewing a website in the past has often been to create a linear, step by step checklist of pages. The aim of this is to categorise the different elements and topics of a site so that it is presented to users in a way that makes sense.
However, web design is a constantly evolving entity and we are now recognising more thoughtful, considered ways of designing our websites.
Brad Frost argues that web design should be approached holistically, rather than in a linear fashion. By viewing a website as a whole, it can be broken down into separate, smaller, simpler elements, which in turn will create a more straightforward, easy-to-navigate and better-performing website.
Of course, before an organisation even reaches the web design stage, it is important to factor in the user’s needs, behaviour and journey.

6B’s design methodology

Our design methodology involves a series of iterative, user-centred approaches.
First, we seek to understand and empathise with users by reviewing and expanding on the project research and user stories, to identify problems and challenge assumptions.
We will then explore these problems through user testing to develop insights into user needs and behaviour, which, ultimately, will result in a suite of designs that are focused on the user experience.
We will create an initial product map – developed by our project team – which depicts the user journey, taking into account their needs, technology touch points and environmental factors.
On completion of the product mapping, we create a set of modules that will be used throughout the development of the website across desktop, tablet and mobile.
We apply an “atomic” approach to design – utilising reusable design patterns and components that are functional on their own, and as part of the wider design approach.
Now, let us delve into what those components are:

Atomic web structure design components

Atoms – These can be buttons, images, calls to action, and text and are often the smallest component as part of the atomic web structure.

Molecules – Through combining atoms such as buttons, images and text, you can create a molecule such as a search bar, which acts as your navigation.

Organisms – Through combining molecules, you can create complex elements that make up your modules, templates and pages – all of these molecules by themselves can look very distinct.

Templates – You can now see how the design is working in full and content can be created to fit the layout.

Pages – Adding content to the template is where all the components come together to form the working model of your website.

Putting atomic web design into action

During the ideation phase, we employ a number of design “cues” to help build trust with users, and build their confidence in using the solution – utilising rapid prototyping to test individual elements and design components in common scenarios with the user base; various expandable menu options, for example.
We prototype and demo a range of interactive UI/UX elements, including hover animations, click states and transitions, to demonstrate how the solution will flow across devices.
All designs are created with a “mobile first” approach, to ensure the platform performs consistently across devices, screen sizes and modern browsers, rendering to apps and mobile devices automatically, whilst conforming to WCAG accessibility guidelines.
Our design process takes into account style, spacing, colour and size. With regards to mobile devices, touch target components, such as buttons and dropdowns, will be enlarged, ensuring there is enough space around the interactive elements to avoid accidental clicks and missed touch targets, which will have a detrimental effect on user experience.
All designs are presented to clients for feedback, and development will only commence once the designs have been approved and verified against the user needs.

An ecommerce site designed and developed by 6B

What are the benefits of atomic web design?

The key benefit for stakeholders is that our designs provide functional, user-focused solutions that are adaptable to suit your organisational needs and save time by breaking visual elements of your website into smaller, more manageable chunks.
By keeping your atoms and molecules simple, your overall website strategy will be efficient, providing quality user experience that will make visitors want to come back to your site and reduce your bounce rate.
The proliferation of devices with which to access websites (phone, tablet, games consoles, netbooks, the list is endless) means that modularity of design is more important than ever. An atomic web structure provides a holistic approach that keeps the end product in mind at all times, providing a clean and consistent look to your website that your users will love.

How could atomic web design benefit your organisation?

 

6B thinks of everything when it comes to providing an intuitive, user-focused design for your website.

 

We always keep up to date with the latest developments in web design and structure, so talk to us today about your design ideas.

Speak with a designer today

Ready to accelerate your technology project?

Chat to our team of experts and let's see how we can help you.