At the dawn of web development, we used to have extremely simple pages, with most of the logic being on the backend. But nowadays, having a thoughtfully designed and built website is crucial to success, as among all factors for rejecting/mistrusting a website, over 94% are related to poor design. So better-looking websites help to build trust with your customers and attract more people.
With the advance of development, we also started to value the separation of concerns and modularity more. So it became clear that we needed to create functionality in a reusable way. On the FE, this can be achieved with a design system.
In short, the UI/UX designer creates simple, building-blocks components like inputs, alerts, buttons, etc., and then starts building pages using as many existing components as possible. The developer can also create the basic components and then build the pages like lego using the pieces(components) they already have. A good design system can be a game changer - allowing your designers and developers to create and iterate faster.
“Atomic design” is an amazing design system that takes its inspiration from chemistry. Like in web design, everything can be built from simple components like inputs, text, buttons; in chemistry, everything is built from atoms. In Atomic design, there are five levels of components.
- Atoms - basic building blocks like buttons, text, inputs
- Molecules - more complex components combining multiple atoms, e.g. a search input - combines input, label text, and a button
- Organisms - rather complex components made from molecules like headers or footers
- Templates - A page made from organisms but without any real content. In terms of React, this can be a layout component.
- Pages - A specific instance of a template, a real page in your application
The distinction between templates and pages is rather hard to see, especially in frameworks like React, where a page is just a “template” because some content can be dynamic, i.e., fetched from the server.
Atomic design provides you with a clear mental model of separating components and creating design systems. It makes you write more reusable code by encouraging you to use more components and make your code more modular. It can greatly speed up work because after the initial investment in building out reusable components, creating actual pages will be much easier.
Have you tried Atomic design?
Top comments (0)