Industries such as Architecture, Industrial Design, and Automotive have developed smart modular systems for manufacturing extremely complex objects like airplanes, ships, and skyscrapers. Inspired by this, Brad Frost proposed the Atomic Design system, a methodology composed of five distinct stages working together to create an interface design system more hierarchically. The five stages of atomic design are:
1. Atoms
Atoms in the atomic design system are the smallest individual elements like buttons, inputs, boxes, badges, and links. They can be designed by combining visual style, color, and type. Similarly, we can create other different atoms of the system. Atoms are also the foundation of Design Systems such as fonts, animation, color palettes, shadow styles, and all the elements that create CSS styles. Each atom has its own properties and variations.
2. Molecules
Molecules are the next-largest building block, created by the joining of different atoms. It is possible to break them down, conceptually, into something easier to digest. In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit, for example, a form label, search input, and button can join together to create a search form molecule. Each molecule can have different states or variations and they will be reused in the mockups in different ways and for different purposes.
3. Organism: the third stage of the atomic design system
Organisms are more complex UI components composed of groups of molecules and/or atoms or other organisms. These elements form distinct sections of an interface. Organisms can consist of similar or different molecule types, an example can be a header on every website we visit. Some common organisms are cards, navigation, headers, and data tables. After that, we designed Atoms, Molecules, and Organisms. We are all set to start combining them in a template page!
4. Templates
Here ends the chemistry because Templates are entities made by different organisms combined together to create a page or a view. Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure. To build on our previous example, we can take the header organism and apply it to a homepage template. Another essential characteristic of templates is that they focus on the page’s underlying content structure rather than the page’s final content.
5. Pages
Pages are specific instances of templates that show what the UI looks like with real representative content in place. Building on our previous example, we can take the homepage template and pour representative text, images, and media into the template to show real content in action. This is the most concrete stage of atomic design, after all this is what users will see and interact with when they visit a website or use an app.
Benefits of building a design system with atomic design:
- Crafting a Design System based on the atomic framework helps developers to develop the basic components, reducing the amount of rework at the time of development. As designers, developers will build the basic components to make bigger ones.
- It becomes easy for designers to manage files effectively and also sharing and updating the files in the future becomes hassle-free.
- Design Systems help in documenting the whole design components, and patterns in a clear way, which ultimately helps the team to be more collaborative and allows them to focus on the other complexities of the product.
- Designers can make changes during the maintenance of the product in a smarter way, updating the changes directly to atoms, molecules, and organisms and applying those changes to the whole interface.
Atomic Design is one such method to describe and practice design systems whilst they are becoming essential in today’s world of rapid growth and the need for holistic products. These design systems allow teams to build better products faster which are understood by users as the language is consistent across each and every touchpoint.
In the next article, we will show you how to apply the atomic methodology to your design, in the meantime, check our portfolio to discover beautiful apps and designs.
