Modular Structures & Atomic Design Component-based layouts
When designing and implementing your web design, it makes sense not to implement everything in one large project file, but to define individual components for general scenarios and to divide them into modules has many advantages in practice and is common practice in large projects, which can be seen, among other things, in the strict application of atomic design.
Do you already use modular structures for your projects?
Are you looking for a professional web designer, or would you like comprehensive advice on web design for companies?
Then you've come to the right place.
Reusability of the modules is also essential for your project?
Niels Langlotz
Web-Developer
Tel: +49 176 45 606 488
E-Mail: info(at)typoniels.de
I would like to use my project experience as a developer for your next project, just contact me.
You would like to find out more?
These contents might also interest you
Frequently asked questions & answers
The answer to the following questions may also interest you
- Reusability
When an atom is created, it can be easily reused later for other designs. There is no need to redefine it. In this way, web developers can save time. For clients, this can reduce development costs. In addition, new design drafts are possible more quickly due to the modular structure.
- Uniformity
By building up a design concept successively, a higher degree of uniformity can be achieved. The higher the level in the design concept, the less effort is required to make changes.
- Extensibility
The biggest advantage is the ease with which existing systems can be extended. For example, new atoms or even molecules can be inserted without having to reprogram or develop the entire structure. Likewise, it is possible to recombine existing molecules or organisms.
- Handling
Even complex systems can be comprehended more easily due to the methodical design structure. The source code is usually more logically structured, making it easier to make changes to it. Developers can identify the code segments in question more quickly.
Atomic Design is an approach to web design developed by Brad Frost and is based on the idea that a design system is built similar to chemical elements. The advantage of this design method is that different elements can be used multiple times and the web design can be easily modified. Atomic Design consists of five elements that build on each other: Atoms, Molecules, Organisms, Templates and Pages.
A detailed introduction and explanation of the advantages of Atomic Design can be found in the original post by Brad Frost at bradfrost.com/blog/post/atomic-web-design/, as well as in the t3n blog at t3n.de/news/atomic-design-baukastensystem-721010/.
For the efficient development of a pattern library according to the Atomic Design approach, I think it is perfect to start with it already during the development of a prototype / click dummy and then continuously expand this basis. This way, the required elements are automatically created in a well-documented form.
