Effektive Gestaltungskonzepte mit Atomic Design und Living Styleguides
Lesezeit: 5 Minuten
Eine Gestaltungsmethode für Webprojekte, die sich eines modularen Ansatzes bedient und ein hohes Ausmaß an Flexibilität ermöglicht. Living Styleguides dienen dabei als Vermittler zwischen dem klassischem Entwurf und dem System, wo das Design zur Anwendung kommt.
Besuche uns auf LinkedIn.
Du willst keine Neuigkeiten verpassen? Folge uns doch einfach auf LinkedIn!
LinkedIn ProfilAnmeldung zu dem medani-Newsletter
Atomic Design
Die Grundidee bei Atomic Design ist, Webprojekte in möglichst kleine Designbausteine (Atome) zu zerlegen, die dann, auf unterschiedlichste Arten zusammengesetzt, die komplette Webseite ergeben. Da dieser Designansatz in der Startphase einen erhöhten Aufwand erfordert, eignet er sich nur für Projekte ab einer gewissen Größe.
Komponenten
Mehrere Atome (HTML-Elemente) bilden zusammen Moleküle – einzelne Webseitenelemente wie etwa Formulare, CTA-Bereiche etc., von denen sich wiederum mehrere zu sogenannten Organismen zusammenfügen, beispielsweise den Header oder die Navigation.
Templates werden durch mehrere Organismen gebildet. Am Ende stehen dann fertige Seiten, die spezifische, mit Inhalten befüllte Instanzen von Templates darstellen.
Living Styleguides
Für dieses Designsystem bietet sich die Nutzung einer Pattern Library bzw eines Living Styleguide an, für dessen Erstellung verschiedene Tools wie z.b patternlab.io verwendet werden können. Hier werden alle atomaren Bausteine mit visueller Darstellung, Beschreibung und Codebeispiel sowie einer Anleitung, wie das Element zu verwenden ist, definiert. Auch Farben, Schriften und Animationen können über das Pattern Lab definiert werden. Letztendlich steht dann ein Baukasten wiederverwendbarer, unterschiedlich kombinierbarer Elemente zur Verfügung. Dadurch können alle am Projekt Beteiligten an einer Stelle zusammenarbeiten und eine sowohl aus technischer, als auch aus gestalterischer Sicht verbindliche Übersicht erstellen.
So bietet die Pattern Library ein gemeinsames System für Entwicklung und Design, das bereits Codestandards integriert. Weitere nicht zu verachtende Vorteile sind die Versionierbarkeit und die im Gegensatz zu statischen Styleguides vorhandene Möglichkeit, Verhalten abzubilden. Die browserbasierte Dokumentation bietet außerdem einen einfachen Zugang für alle Beteiligten inklusive des Kunden, durch den sich auch neu Hinzugekommene schnell zurechtfinden können.
Atomic Design
Für die Entwicklung von urban-hub.com, einer auf WordPress basierenden Storytelling-Platform, hat die Frankfurter Agentur Triplesense Reply das Konzept von Atomic Design eingesetzt. Hier wurden zuerst ein bis zwei Seiten als Ganzes in Photoshop erstellt, um dem Kunden einen Gesamteindruck von der zukünftigen Webseite bieten zu können. Danach wurde das Design schrittweise atomisiert und in einer eigens erstellten HTML Pattern Library festgelegt, die als Grundlage für die Umsetzung der Webseite diente.
Auch der australische Verlag Lonely Planet bedient sich beispielsweise einer Pattern Library, wodurch verschiedene internationale Webauftritte sowie auch die Printprodukte leichter konsistent gehalten werden können. Dieser Styleguide ist ein schönes Beispiel für eine übersichtlich strukturierte Elementenbibliothek. Ein weiteres exzellentes Beispiel ist der Style Guide des E-Mail-Marketing Tools MailChimp.