Modulares Design System
Sie möchten einen stilistisch harmonischen Webauftritt, der Ihre Kund:innen begeistert? Wer schon einmal eine Website entworfen hat, weiß, dass dies eine komplexe Aufgabe sein kann. Benutzeroberflächen zu entwerfen, die möglichst viele User ansprechen und dabei auf allen Endgeräten funktionieren, ist stets eine Herausforderung für Designerinnen und Designer.
Mit Atomic Design hat Brad Frost, selbst Designer und Autor, einen vereinfachten Aufbau für ein Website-Entwurfssystem geschaffen. Atomic Design beschreibt eine Methode, die es Gestaltern erleichtert, komplexe Design-Systeme homogen und erweiterbar zu entwerfen.
Der atomare Aufbau unserer Design-Systeme nach dem Atomic Design-Prinzip ermöglicht es uns, unseren Kund:innen eine große Skalierbarkeit bei maximaler gestalterischer Konsistenz zu gewährleisten. Beim Design gibt es viele Wege zum Ziel. Mit Atomic Design bieten sowohl der Prozess als auch das Endergebnis jedoch noch weitere Vorteile:
Neue Templates können leicht mit bestehenden Molekülen oder Organismen zusammengebaut werden. So können Sie schnell und flexibel Ihr Produkt weiter ausbauen.
Mehrere Designer:innen können ein einheitliches Produkt entwerfen. Die Richtlinien sind klar gesteckt. Auch der Aufbau des Designs ist durch das atomare System für die Entwickler:innen deutlich leichter zu verstehen.
Sie können Ihr Produkt stetig weiter ausbauen. Durch das Baukastensystem wird sich Ihr Design nicht verändern, sondern bietet ein konsistentes Erscheinungsbild. Auch für die User hat das große Vorteile: Sie kennen die einzelnen Elemente und verstehen das Interface deutlich schneller.
Sowohl Designer:innen als auch Programmierer:innen können immer wieder auf die bestehenden Bausteine zurückgreifen – ähnlich wie beim Wireframing. Auch Redaktionsteams können – wenn sie das Designsystem kennengelernt haben – neue Seiten zusammenstellen und mit Inhalten füllen.
Das Atomic Webdesign umfasst die Zusammensetzung von Entwurfssystemen aus „chemischen Elementen“:
Die Anlehnung an die Chemie kommt dabei nicht von ungefähr. Jegliche Materie besteht aus Molekülen – und diese sind wiederum aus Atomen zusammengesetzt. Auch im Webdesign kann man die Layout-Elemente in ihre kleinsten Bauteile zerlegen, um sie anschließend in komplexen Einheiten wieder neu zu kombinieren. Durch die strukturierten Templates und Wireframes lassen sich so einfach neue Seiten und Layouts mit Fokus auf die UX erstellen.
Laura Marwede
Head of UX & Strategy
