Atomic Design: The Good, the bad and the ugly

I recently finished reading the book Atomic Design, and I am gonna share with you a summary of the book and describe the idea of Atomic Design.

Evolution of UI Design process

1. Once upon a time (2000-2010), when you asked a web developer to design a website for you, he would tell you that the tariff was based on the number of pages of the website. For example, if you want 5 pages, it will cost $500 and $100 for every further page.
2. Since 2010, content management systems have become common, and instead of designing pages, designers began to design CMS themes (which included several pages) and delivered it to you, and every page of the site that wanted to be displayed had to follow one of the page templates.
3. This process does not stop here. These days, we are working on products that will continue to grow, and new sections and features will emerge according to users’ needs. What should we do in this situation? How many pages should we design? How many components? How many combined design wireframes?

Designing a design system

The Atomic Design book recommends that instead of designing pages, we should design the elements that make up pages and calls this approach “Atomic Design”.

The author (Brad Frost) says that as animals are made up of organisms and organisms are made up of molecules and molecules are made up of atoms, we should consider this structure in our design process:

In a web-based environment, atoms make up molecules. Molecules make up organisms. Organisms make up templates which make up pages.

How Does This Structure Work?

1. The simplest HTML elements in this design model are atoms. For example, we can consider TextBox as an atom or Button or Label.
2. A TextBox, jointly with a Button and a Label, forms a molecule. The Search molecule (call it component).
3. Now, if we combine several molecules (for example, the MenuBar, Logo, and SearchBox molecules), we will reach the Header organism.
4. By putting together multiple organisms, Such as the header, news box, and footer, we will have a template for a web page.

The same process can be considered in a mobile app. For example, for the Instagram app, these five steps can be separated as follows:

Atomic Design System Building Tools:

The book has introduced a basic tool that helps us in atomic design;  patternlab.io  is a design system to create all the atoms of a design ( demo of this product ) which also helps you in documenting the design steps. This product uses the mustache formatting language , which provides the possibility of including code sections in HTML pages. Read the description of using each of these tools by clicking on their links.

< div class = " block-post " > 
  < a href = " {{ url }} " >
      {{ > atoms-thumb }} 
      < h3 > {{ headline }} </ h3 >
      < p > {{ excerpt }} </ p > 
  </ a > 
</ div >

This tool has the possibility of using dynamic data in json format and is a good tool for creating and displaying templates. PatternLab also provides the possibility to display the output in the form of responsive mobile and tablet sizes.

What Elements Should Be Designed?

Almost all the elements you see on the screen:

• General elements: header, footer and other general page elements
• Navigation elements: primary navigation, footer navigation, pagination, breadcrumbs, interactive component controls
• Photos: logos, decorative images, avatars, thumbnails, backgrounds
• Icons: social icons, arrows, hamburgers, spinners, favicons
• Forms: text box, dropdown, button, and so on …
• Heading elements: such as H1, H2, …
• Blocks of text, photos, advertisements, etc.
• Lists: ol, ul and their internal elements
• Media: Audio and video playback elements
• External elements include widgets and things not hosted on your host.
• Pop-ups: types of alert, success, failure, tooltip, help
• Element colors (  stylifyme.com  and  cssstats.com tools )

Interaction With Customers

In addition to suggested methods for user interface design, the book suggests methods for interacting with customers. Also, to get to know the customer’s mental model, he suggests using Gut test. The cost of designing a design system is a bit high and your customer may not be interested in receiving a design system. The book presents ways to talk with the client and gain their trust in the need to use a design system that works for you. Among other things, having a design system as a whole leads to the reduction of the team’s future costs during product development and also makes the final product that is developed in different sprints have design coherence.

Interaction With Developers From The Beginning

As you know, the waterfall approach has been outdated in software design for years, and the main reason is the software nature: “a product that grows over time and changes during design, and we cannot correctly guess all the next steps from the beginning to design the plan, hand it over to the development team, and get to work”!

The Atomic Design book suggests that designers must have close collaboration with frontend developers from the very beginning. Because what you design must finally be converted into code by frontend developers.

Therefore, it is vital to create a good relationship with the dev team, as you will be companying them in almost all phases of the product development, less and more. So the waterfall model will evolve into a new adaptive model like this:

The main goal of the book is to familiarize you with this design philosophy, and that’s why it does not go into details and design trends, and most of the discussion is in the field of design management.