UX / UI Design

Dobleuv.

2.11.22

What is Atomic Design and why should you keep an eye on it?

*

Atomic Design is a methodology created by web designer Brad Frostwhich seeks to optimize the development of digital products under the concept of diseñar por componentes.

Frost divided this methodology into 5 different levels:

Level 1: Atoms

An atom is the smallest unit of particles that exists.

Translated to the world of design, an atom is a UI element that alone has no functionality. We are talking about buttons, avatars, fonts or color palette, to name a few examples.

Level 2: Molecules

The union of two or more atoms results in a molecule with new properties.

The union of two or more UI elements results in a more complex UI element. Such as an avatar together with a name and the user's location, or a search entry together with a form label and a button.

Level 3: Organisms

The union of molecules forms an organism.

The sum of the previous levels results in more complex elements. An organism can consist of a logo, a main navigation list and a search form. Something that we usually find in the websites we visit.

Some organisms may consist of the same molecule that is repeated one or more times. The list of products in an e-commerce is a sample of this system.

Level 4: Templates

Chemical analogies aside, templates are essentially wireframes.

They serve the function of graphing how components look and work together in the context of a design, to demonstrate how the parts add up and interact into a whole in an optimal way such as a sample home page.

Templates are high fidelity deliverablesbut not the final design.

Level 5: Pages

We are at the last level. This is the final design, ready for the development or testing stage.

The pages show how a user interface looks like, with real representative content. Continuing with the example of the template, at this level we will add texts, images and elements to show the real content in "action".

The pages are essential to test the effectiveness of the system. This is the stage where we see how all the patterns are maintained and coexist. If something does not look as expected or does not work as it should, then we can go back and change our molecules, organisms and templates to find possible solutions or alternatives.

What are the advantages of Atomic Design?

The Atomic Design allows us to:

  • Design solid bases from the beginning, with all the necessary elements: typographies, color palette, avatars, buttons, etcetera.
  • Create systems that can be useful in future designssince we will have the atoms ready to combine in other ways, creating other molecules and organisms.
  • Build high-fidelity prototypes much faster.
  • Make changes in the design system in a much more practical way, so that it is not necessary to program from scratch.

As well as, it will help us to set up the basic elements of the interface with which the developers will work. With this base, they will be able to arrive more quickly and easily to the final design, previously creating molecules, organisms and templates.

In addition, understanding and putting this methodology into practice gives us the possibility to dissect the design and understand the importance of each element involved in it. For this reason, we believe that applying Atom Design is to provide valuable tools for all design professionals, from a different, practical and innovative approach.

¡Mensaje enviado!

Nos comunicaremos con vos a la brevedad ¡Muchas gracias!

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site, we will assume that you agree to it. Read cookies policy. View privacy policy.