Justinmind

BLOG

Expand your prototyping knowledge

Wireframing tools and atomic design: User experience from the bottom up

Wireframing tools and atomic design: User experience from the bottom up


Wireframing with atomic design: breaking design down to the primary building blocks to fully understand what the user really wants.

Web design is constantly evolving and we must change with the times. As users have come into the design foreground, so it has become the number one goal of web and mobile designers to provide excellent user experiences across sites, apps and devices used on a daily basis. But it looks like we’ve been over complicating things, when really we need to go back to basics to fully understand our audience. Enter Atomic Design. In this post, we’ll explore what atomic design is and how we can incorporate it into our wireframing process.

“Atomic Design was developed in response to the responsive, digital world we live in.” Joe Toscano

Atomic design is a methodology for creating robust design systems with the big picture in mind. Implementing atomic design principles whilst building web and mobile wireframes will allow you to improve UX, by working from the bottom up with the most fundamental web or app components, from the very early stages of the design process. Let’s discuss atomic design in relation to wireframing and prototyping your designs.


Download your FREE copy of Making an Enterprise UX-Friendly

DOWNLOAD EBOOK


Understanding Atomic Design

Atomic design intends to break user interfaces down to their most basic elements, and only moving forward with design once the starting point has been established. Atomic, from Greek, a-tomos, meaning undividable, takes the fundamental, unbreakable components – the atoms – as that starting point. Together with molecules, organisms, templates and pages, these components form the five elements of atomic design. They can also be divided into building blocks (atoms, molecules, organisms), and containers (templates and pages). The key principle is to use the most basic elements to build up to the next level.

The 5 elements of Atomic Design

The 5 elements of Atomic Design

 

In the celebrated words of Brad Frost, who defined the Atomic Design principle:

“Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.”

 

Brad Frost: Atomic Design (Webdagene 2014) from Netlife Research on Vimeo.

The separation of design from layout

So what does atomic design consist of exactly? It’s simply about designing a web’s fundamental components before anything else. If we break any design into smaller parts, we will always get the same results:

  • Boxes
  • Data tablesand other data panels
  • Images and Texture (content and iconography)
  • Interface elements(carousels or scrolls)
  • Screen Navigation
  • Typography: typefaces, type treatments and white space, and
  • Layout: elements arranged on a grid, horizontally and vertically

Atomic design focuses on the styling of these essential components.

How much does size matter?

Atoms are the simplest of the building block elements on a webpage. Think back to your first Chemistry lesson. Atoms are those elements can’t be broken down further. In the user interface, input fields, text paragraphs, buttons, check boxes and radio buttons are all examples of atoms. Like morphemes – which represent the smallest meaningful unit in a language – they are not particularly useful on their own, but they are fundamental to the creation of bigger elements, each with their own unique functionality.

Bigger, reusable combinations of atoms bond into molecules. A great example of a molecule in the user interface would be the search box that is made of a field label atom, an input field atom an/or a button atom.

Next we have groups of molecules that join together give us organisms. These are relatively complex interface design sequences, such as header and footers, made up of two or more molecules (e.g. a search box, a menu navigation, and a logo).

“The details are not the details. They make the design.” Charles Eames

Atomic-design-structure-example 1

Building blocks in Atomic Design: Atoms, Molecules, Organisms

When the primary building blocks have been put in place, the container elements come in to play. Containers turn the singular design elements, such as molecules and organisms, into a consolidated design framework. These elements help to define and visualize the layout and flow of a webpage.

Template container elements are an essential component of Atomic design as they provide context for the comparatively abstract molecules and organisms and help the designer to focus on the fundamental design principles. Atomic design templates are, well, templates. They’re typically grid patterns or overlays to help us map out the basic structure of our design before we add content or visual design to the grid.

Finally, a page is a container that’s already filled with real content. Pages allow us to test and see how all the elements fit together.

All of these bits and pieces contribute to our interface inventory and by breaking them down in this way, it’s easy to take stock as well as see how each element impacts the others and the overall user experience. So yeah, size matters! This is all well and good, but if we’re not working atomic design into the design process from the very beginning, well it sort of defeats the points.

Atomic-design-structure-example 2

Containers in Atomic Design: Templates and Pages

 Integrate Atomic Design into your web wireframe process

Including Atomic Design in your design process might be the smartest thing you ever do. By defining a page, website or app’s framework, or skeleton, you’re forced to be effective and deal with the essentials before moving on to the more interesting details. Working atomically pushes you to create a design system that is effective, stable and reliable. This might sound tedious, but you’ll find that once you’ve laid the groundwork, a whole world of creativity and unique design possibilities crop up.

Working atomic design into your web and mobile wireframes is a great way to lay that groundwork. With a wireframing tool that allows you to create basic, static wireframes and build up to high-fidelity, interactive prototypes, it’s the perfect opportunity to do things right. Combine the two to discover the ‘truths’ about your project’s design.

Custom UI elements to avoid rework with your wireframe tool

Justinmind gives users the possibility to use Atomic Design principles to create web wireframes, or indeed mobile wireframes. When you open the user interface, you’ll see that many of the pre-installed widgets correspond directly to the atom, molecule, and organism examples given above, such as radio buttons, input fields and buttons. Pre-built widgets and customized widgets: pre-built means you can easily use them time and time again without having to create them from scratch. Customized widgets for your web and app wireframes means you can tweak them where necessary to personalize each project.

We’re also planning on building OS icons with atomic design elements so that users will be able to personalize them as needed.

icons9-widget-library

The iPhone iOS9 widget library in Justinmind

“You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is.” Mark Boulton

With Justinmind, you can create customized widgets, or atoms, for the highest quality at any size, for your web wireframes and mobile wireframes. The elements are available in web font format, so that you can easily and quickly edit their color, size and shadow to fit your design guidelines and enhance brand consistency.

By building custom UI elements from scratch with the atomic design principles and reusing content, you can speed up your web wireframe workflow by avoiding repeating yourself unnecessarily, as well as maintain design or brand consistency.

You can even create style templates and masters in order to change all of the styles on one element and watch those changes occur to all similar elements, across your file. Work your already-built designs into new prototypes, and define the style guide or templates that will set the standards for the whole project, sharing content and behavior between screens.

To give you an example, let’s take a look at how we’ve been doing a few things in-house. Here at Justinmind, we’ve actually been incorporating the atomic design principle into our website redesign. First of all, we design how to feel the buttons, the text fields, which font families we’ll use on the website. After that, we’ll use these elements to construct the signup forms, the constant forms, the navigation headers, and the cards in the Overview pages. Next, we’ll use these elements to create a series of templates to define the entire website in 3-4 different templates. The templates will help us to reuse content and avoid unnecessary repetition. A great example of this can be seen in Pattern Lab’s video here.

You’ll notice that by working at a granular level, it’s easier to modify things if something breaks or doesn’t fit in. And always remember what we’re working towards here, improving UX!

Download Justinmind now to start implementing Atomic Design into your design process!
download-justinmind-prototyping-tool-banner-1
 

Emily Grace Adiseshiah

About the Author

Emily is Marketing Content Editor at Justinmind

Leave a reply

Your email address will not be published. Required fields are marked *