Page History

Basic

The entire design kit is based on Atomic design. The name "Atomic Design" goes back to the web designer Brad Frost. He introduced the design concept in 2013 and wants to give web design a methodical approach.

Atomic Design consists of five elements that build on each other: Atoms, molecules, organisms, templates and pages.

Atoms: Atoms are important basic elements in this design concept. In terms of web applications, atoms are HTML tags, for example. Atoms can also contain other abstract elements such as colour palettes, fonts or animations. Atoms in Atomic design are characterized by the fact that they are still quite abstract and they alone have no real use. Such an "atom" in web design could be a button or an input field.

Molecules: Molecules: Molecules are made up of a combination of different atoms. Thus, in terms of atomic design, molecules are the smallest possible, fundamental unit made up of the combination of different atoms. Several atoms can, for example, become search forms for websites. Molecules can have a very complex structure. However, by dividing them into atoms, complexity becomes easier to handle.

Organisms: Different molecules can be combined to "organisms" in atomic design. In this way, for example, the functionality and appearance of a website can be defined. Due to the different arrangement of the molecules, a design draft can be quickly adapted to user or customer requirements despite its complexity. For example, organisms can consist of a logo, a main navigation, a search field and a list. For example, an organism can be developed as the basis for many different subpages. By simply modifying the individual molecules, new organisms can be created, which can then be used for a product page, for example.

Templates: By assembling and forming organisms, templates are finally created. At this point Brad Frost also leaves the analogy with chemistry behind. For him, the term "template" ultimately makes more sense, as it is more comprehensible to customers. For Frost, the template is ultimately the first concrete result of the Web design process. It provides the connection between the originally still abstract elements (atoms, molecules).

Pages: With the "Page" the basic structure of a website is finally filled with specific content. Possible placeholders are replaced by the individual content. For Brad Frost, the last stage is decisive for how effective the design draft or design system is. As a result, web developers can go back one step to adapt molecules, organisms or templates, for example to increase the usability of the website.

Organisation of the Design-Kit

The entire UI Design-Kit is divided into different ID's These ID's serve as orientation. Each group of components has its own ID. This makes it easier to find the necessary component within the click dummy software "

Figma" and the handover software "Zeplin".