What to do for building a well-designed web page? Without a doubt, learning good programming skills or looking into beautiful design samples are necessary steps to elaborate your page. In this article, though, I introduce another aspect of designing which will be also essential to all developers.
What is Atomic design
Atomic design is a concept of design structure proposed by Brad Frost. He compares Web pages to the natural things that consist of fine particles by dividing a web page into 5 phases.
Atoms
Web pages are made up of numbers of basic elements like atoms that can not be separated into smaller objects. The simplest elements such as HTML tags, a button, or an input field are in most cases not very useful by themselves. But in the context of a pattern library, they serve as a reference to the global style of your web page.
Molecules
Molecules are put together from atoms. A button, an input, and a label work as a form only when they are combined together. As a compound of atoms, molecules take on their own unique properties and more operational functions. It is advisable to maintain the components at this level following the single responsibility principle: "do one thing and do it well". Keep them simple, consistent, and reusable.
Organisms
Organisms can consist of similar or different molecules. A header comprises different types of molecules such as a site logo, a navigation menu, and a search form. Aside from it, a list of products in e-commerce websites consists of a series of similar image grids. In both cases, multiple components are organized as a section of UI building the context where site visitors look for objects. For designers and developers, providing the context of UI which is organically united and keeping them standalone, portable, reusable are worthy of devoting energies.
Templates
Components we have created so far are integrated into a context of page layout, a template. Leaving out of abstract analogy of chemistry, we should use language that is suitable to communicate with stakeholders and clients. Templates demonstrate the underlying structure of our web page without specific content. They are helpful for us to examine, for example, image size and character length in terms of page's proportion or consistency in total.
Pages
Pages are the final and most concrete stage of atomic design as an instance generated from templates. Specific contents are dynamically rendered and come together with the layout. While pages provide users with the interface that they can interact in action with, they are the place where designers and developers can test the effectiveness of the design of templates as well as of our design system.
Conclusion
These steps of atomic design are not a simple linear way. We might have to coordinate different steps by going back and forth or keeping a close eye on them at the same time. According to B. Frost, "One of the biggest advantages atomic design provides is the ability to quickly shift between abstract and concrete." His insight gives us a mental model in our creation process between final UIs and their underlying design systems, and also a language for discussing them between members of a team.