I first learned about Atomic Design two months ago when I saw the picture below. Atomic Design is still in its growth stage, and there are not many relevant materials found in China. So I went to the website of bradfrost, the man who came up with the concept of Atomic Design, and found this online ebook called Atomic Design.
The author is shown below. He thought it was old-fashioned to spend months writing a book and then publish it. He wanted to write an incomplete book that would grow and breathe, so he serialized it on his own website and revised it constantly. He opened up the process of writing the book and shared it freely.
Here is a brief introduction to the concept of atomic design:
Atomic design is a web design methodology developed in a 2013 article by Brad Frost
An Introduction to Atomic Design theory
1 Introduction
This design concept was proposed by Brad Forst in 2013:
The inspiration comes from his chemistry lab in high school. The objects that can be seen with the naked eye are composed of Atoms, which combine to form molecules, and molecules combine into relatively complicated tissues. So Brad took this concept and applied it to interface design.
Interfaces are made up of smaller components.
Remember the periodic table of high school chemistry? Brad Forst believes that the web is also made up of small elements
2 define the Definition
Atomic design is a design methodology that combines five distinct stages to create a hierarchical, programmatic interface system.
The five stages are:
-
Atoms: Basic elements of a web page. HTML tags, such as tags, inputs, or buttons, can also be abstract concepts, such as fonts and colors.
-
Molecules: Simple UI objects made up of elements
-
6. the relatively complex composition of atoms and molecules, relative to molecules.
-
Templates: A page-based architecture that layouts these elements
-
Pages Pages: Package the actual content (images, articles, etc.) in a specific template
Three advantages over
-
Consistency: By breaking the site down into single elements, the interaction of UI elements, such as color changes, font sorting, and feedback, is the same on any page. It not only gives users the same experience, but also makes them more visually harmonious.
-
Efficiency: Thanks to the Pattern Library element Library, changes to an element can be made immediately.
-
Collaboration: Not only is it convenient for designers to think about the harmony of a page, but it also allows engineers and quality inspectors to understand the logical structure and changes of a page, reducing unnecessary back and forth communication
Finally, thanks to the translation partners
The translation is thanks to everyone’s hard work. Translator:
Chapter 1: Lisa, Krtek, Shao Ruiqi
Chapter two: Bluesbone
Chapter three: Reg
Chapter four: Mei Xiaocai, teasing sand
Chapter 5: Megan, Maker
The book consists of five chapters, one of which will be serialized each week starting tomorrow.
Want a sneak peek? Here is the author’s website: http://atomicdesign.bradfrost.com/table-of-contents/