Content Management

Atomic Design

Introduction

A few years ago Ethan Marcotte introduced us the concept of Responsive Web Design in an article published by A List Apart Magazine. This new idea changed the designers perspective on how to build a flexible website and also allowed them to create new and thoughtful experiences for the user. 

With that appeared open source front-end frameworks such as Bootstrap or Foundation which provides faster and easier designs for the web. This includes designed templates from HTML and CSS like buttons, tables, navigation and image carousels. But by using this type of frameworks have its disadvantages: everyone is using it so the result will be a great number of websites looking more alike than they should. Also, in Bootstrap case it comes with lots of CSS and JavaScript lines which turns it heavier specially for mobile users and it’s difficult to change some properties. 

Importance of Style Guides

Before starting building our web pages it is important to know style guides are important and how they can influence the success and consistency of a webpage. But…

What is a Style Guide?

A Style Guide is a specific document where designers and developers can find all the material they need to know about a company/brand before start building a web page. This document includes topics such as:

  • Brand identity
  • Typography
  • Colour palette
  • Imagery
  • Iconography
  • Buttons
  • Content
  • Voice and tone
  • Dos and don’ts
  • Design language
  • Accessibility
  • User interface patterns

I discovered this interesting website http://styleguides.io/ where you can find some examples, books, articles, podcasts and tools.

Why are style guides important?

Style guides are important because they facilitate developers lives easier and establish a more collaborative workflow between all the parts involved in the projects. By using style guides, web designers and developers are able to follow the same pattern and achieve a successful and consistent project.

The concept of Atomic Design developed by Brad Frost is related with the topics above once it has to do with the notion of web pages and it is about constructing thoughtful interfaces. For a better understanding Brad makes a comparison with atoms, molecules and organisms as the web pages should be constructed by the same principle.

Atomic design is a methodology based on five interdependent stages working together in order to build design systems in a better and conscious way. These five levels are: (1) Atoms, (2) Molecules, (3) Organisms, (4) Templates and (5) Pages.

Atoms

This is the first basic block of matter and it includes basic HTML elements such as inputs, buttons or form labels. 

Molecules

Molecules are simple groups of UI elements (atoms) working together as a unit. For example, a search input with a form label and a button can together create a search form molecule. 

Organisms

Followed by the molecules we have the organisms which are complex groups of molecules and atoms or atoms and other organisms. In this stage we have several combinations we can create by adding atoms to molecules or organisms and molecules to organisms or atoms. 

An example of an organism can be composed of a search molecules and a logo atom. 

And now that we know what is an atom, molecules and organisms we are prepared to go to the next stage and apply all these elements in order to start creating a web page. 

Templates

It is in this stage our chemistry metaphor ends and we start organising and articulating each component into the design’s structure. For example, it’s in this stage we can apply all the organisms and molecules we previously created in order to build our homepage template.

Pages

This is the most concrete stage of Atomic Design. Pages show the real content in the right place. It’s in this stage we start adding images, media and text into the right places.

Why is Atomic Design important?

  • It’s budget friendly
  • It’s time-saver
  • The page is divided into small chunks which enables an easier manage of the content. 

We’re not designing pages, we’re designing systems of components.

Stephen Hay

Atomic design provides us a structure to cross between parts of our UIs and that’s why this methodology is not a liner process but a mental representation that allows us to create a design system.

To see more details of this presentation please go here.

Leave a Reply