08.02.2020 VIAL informiert

Atomic Design - Mit Struktur zur Vereinfachung von Entwurfsystemen

Wer schon einmal eine Website entworfen hat, kennt sich mit der Komplexität des Designs und Aufbaus einer solchen Seite – welche oft aus mehreren Unterseiten besteht – aus. Als Designagentur stehen wir vor der Aufgabe, Benutzeroberflächen für möglichst viele User in einen größeren Zusammenhang zu setzen. Hierzu kommt, dass es immer mehr Geräte mit immer mehr Bildschirmgrößen als je zuvor gibt. Mit der Definition von grundlegenden Strukturen für solche Designsysteme hat der Webdesigner Brad Frost hierfür im Jahr 2013 eine Vereinfachung des Aufbaus von Entwurfsystemen geschaffen. Unter Atomic Design fasst er die Zusammensetzung von Entwurfssystemen zusammen, die sich aus drei „chemischen Elementen“, angefangen von Atomen, dem Template und der Page zusammensetzen.

 

Am Beispiel einer Homepage sollen die einzelnen Elemente nun genauer erläutert werden:

Atome

Unter Atomen werden die kleinsten Bestandteile eines Designsystems zusammengefasst. Sie sind die Grundbausteine und enthalten Elemente wie HTML-Tags wie eine Eingabe, Schaltfläche oder Formularbezeichnung, bis hin zu abstrakten Elementen wie Schriftarten, Farbpaletten oder auch noch nicht sichtbare Animationen. Einzeln sind diese Atome nutzlos, bilden in Ihrer Gesamtheit jedoch eine gute Übersicht in Form von Musterbibliotheken.

Moleküle

Durch die Verbindung von Atomen entstehen komplexere Bausteine, welche die Grundlage für das Konstruktionssystem des Atomic Design bilden. Die einzelnen Atome, bilden so gemeinsam ein Formular. Durch diese Zusammensetzung von Modulen kann man einfache sowie komplexe Elemente eines gesamten Designs aufbauen.

Organismus

Durch die Kombination oder Verknüpfung verschiedener Molekülgruppen entsteht ein Organismus. Diesen Organismus kann man wie folgt visualisieren und erklären:
Der Organismus ist die Stelle im Atomic Design, an der die verschiedenen Elemente langsam Form annehmen. Hier können die verschiedensten Organismen entstehen. Wie auf dem Beispiel kann er sich aus einem Logo-Atom, einem Navigationsmolekül und verschiedenen weiteren Molekülen zusammen setzen. Diese verschiedenen Bauteile können immer wiederverwendet und neu zusammengesetzt werden.

Templates

In der Templatephase geht es nun darum, das Atomic Design zu einem einheitlichen und vor allem für den Kunden verständlichen Design zusammen zu bringen. Templates bestehen aus Organismus-Gruppen, die schließlich zu einem Layout werden. Oft werden zunächst Wireframes entworfen, die mit der Zeit immer genauer und wiedergabegetreu werden und sich so zum Template entwickeln.

Pages

Im Gegensatz zu den Templates werden die Pages mit konkreten Inhalten gefüllt und ersetzen die Platzhalter. Es werden neben Bildern reale Texte eingesetzt, welche das Design nun für den Benutzer oder Kunden verständlicher machen. In dieser Phase des Designprozesses wird das Design und die Usability auf Wirksamkeit und Nutzen getestet. Hierbei wird die Homepage verschiedenen Usern gezeigt, welche typische Aufgaben lösen sollen. Auf einer Homepage wäre dies beispielsweise das Nachvollziehen verschiedener Wege – wie bei einem Bestellprozess – um an ein Ziel zu gelangen. Nach dem Test wird dann optimiert und nachjustiert.

 

Fazit

Durch die Modularität der aus den verschiedenen Atomen, Molekülen und Organismen zusammengesetzten Designsystems ergeben sich bei der Gestaltung oder auch Umgestaltung der Page immer neue Varianten. Man ist durch das Atomic Design also in der Lage die verschiedenen Bausteine immer wieder neu zu kombinieren. So entsteht ein Baukastensystem mit Modulen, die man nicht immer wieder neu gestalten muss. Die Module können so immer wieder anders kombiniert und weiterentwickelt werden. Dies erleichtert nicht nur den Designprozess, sondern auch das Verständnis des selbigen.