Atomic Design
Was versteht man unter Atomic Design?
Atomic Design ist eines der Grundkonzepte im Webdesign entwickelt von Brad Frost. Die Idee hinter diesem methodischen Ansatz ist, dass ein Designsystem in seine kleinsten Bestandteile zerlegt werden kann, ähnlich wie chemische Elemente. Alles Materie besteht aus einzelnen Atomen. Diese bilden zusammen Moleküle, die sich wiederum zu komplexeren Organismen zusammenfinden und so die Materie für das gesamte Universum bilden. Diesem Gedanken für ein Designsystem folgt auch das atomare Design.
Inhalt
Atomic Design ist eines der Grundprinzipien im Webdesign
Fünf Ebenen der Atomaren Designmethodik
Warum wir Atomic Design werwenden
Beispiele für Atomares Design von ION ONE
Wie starten Sie Ihren Designprozess?
Fünf Ebenen der Atomaren Designmethodik
01
Atome
In der Natur sind Atome die Grundbausteine der Materie. Übertragen auf das Web sind es hier die HTML-Tags, Elemente der Farbpaletten, Schriften, Button, einfach alle Grundelemente, eine Art Musterbibliothek.
02
Moleküle
Werden aus mindestens 2 Atomen gebildet und stellen die kleinstmögliche Einheit einer Bindung dar. Übertragen auf das Designprinzip sind die kleinstmöglichen Grundeinheiten beispielsweise die in einem Formular zusammengefassten einzelnen Atome, wie Schriften, Farben und Button. Das Formular verschafft den einzelnen Elementen dann eine funktionale Einheit als Rahmen.
03
Organismen
Organismen sind Ansammlungen verschiedener Moleküle, die im Verbund komplexere und lebensfähige Einheiten schaffen. Im Design sind solche Organismen komplexere UI-Komponenten, die aus Atomen und Molekülen bestehen. Sie können eigenständig und wiederverwendbar sein.
04
Template
Nach den durchdefinierten Elementen in aller atomaren Tiefe und auch der Kombination in Organismen werden Homepage-Vorlagen, sogenannte Templates kreiert. Diese zeigen alle notwendigen Seitenkomponenten im Zusammenspiel. Sie legen die Inhaltsstruktur fest.
05
Pages
Seiten sind weiterentwickelte Templates und sind somit spezielle Formen von Vorlagen. In der Entstehungsphase werden die Seiten oft mit Platzhalterinhalten versehen, um einen besseren Eindruck von der zu entstehenden Seite zu gewinnen.
Warum wird Atomic Design verwendet?
Einer der bedeutendsten Punkte, der für das Verwenden von Atomic Design spricht, ist, dass es durch das Zerlegen des Designs, bis auf die kleinste Ebene, sehr flexibel mit dem Design-Prozess umgegangen werden kann. Auch kann zwischen Abstraktem und Konkretem sehr schnell gewechselt werden. Alle UI-Komponenten lassen sich granular immer wieder neu zusammensetzen, neu gedacht werden, neue Details eingefügt werden, bis das endgültige, individuelle Design steht. Die Arbeitsweise mit atomaren Design-Mustern hilft am Ende auch eine schlanke Code-Basis zu erstellen, weil sich auf das Wesentliche konzentriert wird.
Weiter UX-Glossar Beiträge
Beispiele für atomares Design von ION ONE
ION ONE verwendet das atomare Designprinzip bei jeder Kundenanfrage und jedem Kundenprojekt. Wichtig ist uns, dass wir unsere Kunden verstehen.
Wir sehen uns als Design-Scientists und analysieren jedes Produkt bis ins kleinste „ION“ und können auf Basis dessen Optimierungen und ein neuartiges Produkterlebnis kreieren. Ergebnisse unserer Arbeit sind in unseren Case Studies erlebbar.
Kostenfreie UX-Sprechstunde
Schnell und unkompliziert die kleinen und großen Fragen des UX klären – regelmäßig, kostenfrei und angepasst an Ihren Bedarf.
Usability-
Check
Wir bieten Ihnen einen zweistündigen Workshop zur Optimierung der Usability Ihrer Website oder digitalen Anwendung.
Workshop Guided Selling
Den B2B-Vertrieb unterstützen mithilfe von Guided Selling – potenzielle Kunden effektiv beraten und vom Kauf überzeugen.
Neugierig geworden?
Wir möchten nicht selbst über unsere Projekte reden.
Unsere Referenzen tun es für uns.
Es braucht Mut, neu zu denken. Wir helfen Ihnen dabei.
Lassen Sie uns über Ihre Ideen reden.
Grant McGillivray
COO
„Wir gehen an jedes Projekt und jede UX-Herausforderung mit prozessorientierter Intention heran, um die von uns geschaffenen Identitäten und Erfahrungen zu vermitteln. Wir bemühen uns um eine Arbeit, die zum Handeln anregt und Ergebnisse erzeugt. Wollen Sie eine größere Wirkung erzielen? Wir helfen Ihnen gerne.“
E-Mail:
grant.mcgillivray@ionone.io
Telefon:
+49 30 24627-532