Atomic Design

am 29. September 2017 in Aktuelles von

Atomic Design ist in aller Munde!

Schließlich möchte jeder auf dem neusten Stand
der Entwicklung bleiben. Ein große Rolle spielt dabei natürlich der Zugriff von Webseiten
durch mobile Endgeräte. Wer jetzt noch keine mobile Ausspielung seiner Webseite bietet,
ist eigentlich spät dran. Responsive Web Design spielt dabei natürlich eine große Rolle.
Es bietet eine elegantere Lösung für die Darstellung einer Webseite in verschiedenen
Größen, da eine Seite geladen wird und der Client entscheidet, welche Ansicht
ausgespielt wird. Das heißt, man hat hier nur einen Source-Code.
Natürlich ist das bei einem Redesign einer bestehenden Webseite mit extremem Aufwand
verbunden.

Bei umfangreichen Webseiten mit komplexen Seitenstrukturen explodiert der Aufwand
eines Redesigns. Viele Fehler können sich einschleichen, die das Benutzererlebnis
beeinflussen. Zum Beispiel können wiederkehrende Objekte falsch abgebildet sein oder
Überschriften werden nicht einheitlich gesetzt.
Der Atomic Design Ansatz wurde von Brad Frost entwickelt. Er ist ein amerikanischer
Web Designer, der sich mit der Konzeption von mobilen Webseiten beschäftigt. Beim
Atomic Design beginnt man die kleinsten Komponenten zu designen und baut aus diese
komplexe Seiten. Die kleinste Einheit nennt man Atome. Diese setzten sich zu Molekülen
zusammen, aus denen wiederum Organismen zusammengesetzt werden können. Die
Einheiten im Atomic Design werden in der folgenden Abbildung dargestellt:

Aufbau einer Atomic Webseite

Aufbau einer Atomic Webseite

Durch den atomaren Aufbau des Atomic Designs ist es möglich, verschiedene
Komponenten einzeln zu definieren. D.h. man legt einen Header oder einen Button fest
und verwendet denselben immer wieder. So kann man, anstatt wiederkehrende Elemente
jedes mal neu programmieren, einfach die passenden Atome oder Moleküle einfügen.
Brad Frost selbst sagte über den Atomic Design Ansatz: „We’re not designing pages,
we’re designing systems of components.“
Und das ist es auch das, was Atomic Design so effizient macht, wenn man mit großen und
komplexen Seitenstrukturen arbeitet. Man entwirft nicht mehr Seite für Seite, sondern legt
Komponenten fest und erstellt basierend darauf eine Seite.

Einheitlichliches Erscheinungsbild ist hier also garantiert.

Keine Kommentare vorhanden, schreibe doch einen.

Schreibe ein Kommentar