Modulares Design System
Atomic Design
Eine bessere User Experience mit Atomic Design
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.
So profitieren Sie vom Atomic Design
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:
Flexibel Erweiterbar
Neue Templates können leicht mit bestehenden Molekülen oder Organismen zusammengebaut werden. So können Sie schnell und flexibel Ihr Produkt weiter ausbauen.
Optimierte Zusammenarbeit
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.
Konsistentes Erscheinungsbild
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.
Hohe Zeitersparnis
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.
Atomic Design als Basis jeder erfolgreichen Website
Das Atomic Webdesign umfasst die Zusammensetzung von Entwurfssystemen aus „chemischen Elementen“:
- Atome: kleinste Bestandteile des Designsystems wie Schaltflächen, Schriftarten, Farbpaletten, Animationen
- Moleküle: Atome lassen sich zu komplexeren Bausteinen als Grundlage des Designs verbinden
- Organismus: verschiedene Molekülgruppen verbinden sich zu einem Organismus, wie die Zusammensetzung von Logo-Atom, Navigations-Molekül und Schaltflächen-Atom im Header oder Footer
- Template: hier wird das Atomic Design zu einem kundenorientierten Design zusammengebracht, bestehend aus Organismus-Gruppen ohne Text und Bilder
- Page: konkreter Inhalt mit Text und Bildern zum Testen für die Nutzer:innen
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.
Interesse geweckt?
Ich freue mich auf Ihre Anfrage!
Laura Marwede
Head of UX & Strategy
