Settings Design Atoms

Atomic design

Atoms

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.

Atomic design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.

If atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.

The information contained in this page about atomic design ist taken partly from this author.

Men's Care Frankfurt's bibliothek

interface atoms

Each interface atom has its own unique properties, such as the dimensions of a hero image, or the font size of a primary heading. These innate properties influence how each atom should be applied to the broader user interface system. In the context of a pattern library, atoms demonstrate all your base styles at a glance, which can be a helpful reference to keep coming back to as you develop and maintain your design system.

Spacers
Dividers
labels
Labels 1
Labels 2
Labels 3
Labels 1
Labels 2
Labels 3
Labels 1
Labels 2
Labels 3
Labels 1
Labels 2
Labels 3
Breadcrumbs
Default site logo
Featured Image for Logos

Empty “Featured Image” with a fallback image (Fallback are shown under)

[Primary & secondary] Logos as images
Retangular Images (with overlay)
Retangular Images (with no overlay)
Square Images (with overlay)
Square Images (with no overlay)
Profile Images (with overlay)
banners

Mens Care Frankfurt

Für Männer von Männer

ICONS
Maps (Google Maps)
Wir benötigen Ihre Zustimmung

Datenschutz & Cookies

Diese Webseite verwendet Cookies, um Inhalte und Anzeigen zu personalisieren, Besuchern ein optimales Nutzererlebnis zu bieten Social-Media-Funktionen bereitzustellen und unseren Datenverkehr zu analysieren. Wir geben Informationen über Ihre Nutzung unserer Website auch an unsere Partner für soziale Medien, Werbung und Analysen weiter, die diese möglicherweise mit anderen Informationen kombinieren, die Sie ihnen bereitgestellt haben oder die sie im Rahmen Ihrer Nutzung ihrer Dienste gesammelt haben. Mit der Nutzung unserer Website erklären Sie sich damit einverstanden, dass wir Cookies verwenden. Weiterführende Informationen erhalten Sie in unserer Datenschutzerklärung.