Member-only story
4 things you need to know about Atomic Design
Industries such as Architecture or Industrial Design have developed smart modular systems for manufacturing extremely complex objects like airplanes, ships, and skyscrapers. Inspired by this, Atomic Design was proposed as a system that involves breaking down a website or web application into its basic components so that they can be reused throughout the site. Due to new devices with new screen sizes, that are getting released each year, creating pixel-perfect design gets harder if no systems are put in place.
Approaching this problem, Brad Frost coined the term and methodology of atomic design. The web designer, speaker, and writer is the author of Atomic Design and he says that:
‘Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.’
In this piece, I’d like to point 4 things you should know about Atomic design and how you as a designer could benefit from it.
- Definition of Atomic Design
- Atomic Design and Interface Inventory
- Atomic Design and Design Systems
- Benefits of Atomic Design
Definition of Atomic Design
Atomic Design, introduces a methodology for creating scalable systems, reusable components as well as design systems. In the early days of the web, we’ve had limited ‘pages’ that were not responsive or scalable. There are five distinct levels in atomic design:
- Atoms represent the smallest entity in UI elements and they can’t be broken down any further. Think of them as Lego blocks. They serve as the foundational building blocks of your interface. Some examples are: colors, fonts, animations and single images.
