Atomic Design in User Interface
UI design is not just about put any component into a frame, but it is more than it. There are some basic components in UI design, like color, text, button, etc. We have to understand what is each component for. In order to understand, there is method called atomic design.
What is Atomic Design?
Atomic design is a common method used in any design field. In UI design, this method breaks down the design into small components. It helps the design process to be faster and keep it consistent. To apply atomic design, we should know what are components we are going to use or at least the basic components like color so we define the color palette, and text so we define font family, size, etc.
Atomic Design Elements
Atom
This is the smallest part and cannot be broken down further because it will lose it’s functionality. In this case, the examples are text, button, text input, radio, checkbox, etc.
Molecule
Molecule consists of some atoms, so it has more specific purpose than atom. Filter is one of the example. It may has input to search by text, radio to choose only one of the options, checkbox to choose more than one category, and one or more buttons to apply the filters and cancel it for example.
Organism
Organism has more than one molecules. Based on that understanding, it means organism has more than one function. Let’s use mobile app navbar as example. It may consists of back button, page title, and sometimes filter.
Get Caksa Aji’s stories in your inbox
Join Medium for free to get updates from this writer.
Template
Template may has the mixing of atoms, molecules, and organisms. You may say it is a blue print of the design or more like wireframe. So basically it is the layout of how will the design looks like.
Page
Page is like final version of the design. It shows how the application going to be in real usage. It has related contents, typing, pictures, etc.
Why Does It Important?
Personally, these are my reasons :
- Consistency
By breaking down into small pieces, we can see the style of each part. So we can compare their style (does it has same feel or not) - Highly maintainable
It is much easier to maintain small part instead of complex part isn’t it? - Reusable
It can be used anywhere and when you need some changes you just replace the small parts - Easy to make the style guide
By making the parts into modular, it will be much easier to explain each part
Conclusion
I hope you get more understanding about user interface by breaking down into small parts.
