UI Style Guides and Atomic Design for better products

Designers and developers in today’s app industry spend a great amount of time working together in many companies and teams. The result of this cooperation should be fully functional and beautiful digital products with a user experience that is executed well enough to attract a lot of users. But there are many factors that can decide whether a product is successful on the market or not. One of them is a unified visual language of the product. It helps to create a strong and trustful relationship with your audience. And here come the UI Style Guides.

A style guide is a comprehensive document that consists of all the elements of a product’s interface from text styles to buttons and more complex components. Creating one may take some time, especially in the early stage of the process. But the advantages of using it are definitely numerous.

Benefits

Using a library of reusable elements helps you create a unified visual experience. And as we know, consistency is key. When users understand how a given component works, they will have no trouble using it on a different screen. This, in return, enhances the usability of the product as a whole.

Style guides facilitate faster development as well. Developers highly appreciate this benefit. Thanks to the component libraries, it is easier for them to build screens faster and more efficiently. A developed element that can be used in various places saves time and budget. A style guide also makes design projects more approachable and accessible to developers.

Imagine a situation where a project is assigned to a different designer. Having a documented UI provides a perfect reference for them to create new views and improves communication between the dev team and the designers. Because it clarifies things.

Atomic Design and style guide elements

As we already know, a style guide consists of all elements used in a design project: color palette, typography and components (like buttons, modals, input fields, form elements, lists, dialogs, alerts, loaders, bars and many, many more). There are various ways to build a style guide, so let’s take a look at one of the approaches: the Atomic Design methodology developed by Brad Frost. He's a web designer, speaker, and writer. He describes it as a mental model that helps us think of a user interface as a cohesive whole and a collection of parts at the same time. Atomic design incorporates:

• Atoms
• Molecules
• Organisms
• Templates
• Pages

Let’s use one of the apps we have recently designed to show the example of creating a style guide using the Atomic Design methodology.

Atoms

They represent the fundamental entities of UI elements and cannot be broken down any further. These can be e.g. colors, fonts, labels, inputs, icons, buttons or even animations. On their own atoms are of no use, but joined together they become quite handy.

Molecules

Combined atoms are called molecules. This is the phase when atoms suddenly have purpose. Let’s take an iOS navigation bar into consideration. The color of the bar’s elements, the fonts used and the icons create a molecule together — the navigation bar. Another example — the label, the input field and the icon also form a molecule.

Organisms

Organisms become crucially important in forming product pages/views, since they are groups of molecules and/or atoms bonded together. This means they are complex and large elements of the interface, usually interactive. This is when the final design slowly begins to take shape. Because thanks to organisms we are able to produce templates and high-fidelity views of the digital product.

Understanding atoms, molecules and organisms is enough to create a UI style guide. We can use elements included in one to form templates and pages, which are the final components of the Atomic Design model.

Templates

Templates are composed of groups of organisms. Their purpose is to show the structure of the page but without the actual content. We can copmare it to wireframes. It helps to understand the UI structure and see the components in action.

Pages

Those are the high-fidelity screens that represent individual instances of templates. Placeholders are filled with real content, which is applied to the whole template’s elements. Pages are views that are shown to users. So based on their interaction with the components we can assess and change the construction of elements if needed.

Conclusion

No matter what kind of project you’re involved in and no matter whether you’re a designer or a developer, style guides are always something you will benefit from. They also provide a perfect resource for stakeholders and managers to help them understand the ongoing process of UI creation. Thus, it is very important to prepare a style guide taking its users into consideration. It ought to be obvious not only for the designers but for the whole team.

You also need to consider a style guide as a living document. It evolves with every iteration of changes, so starting to create it from the beginning of the design process seems quite reasonable. Not only does this help to release a better product but it also reduces the overall cost of development.