Atomic Design ist eine effiziente Methode für die iterative Entwicklung umfangreicher Websites. Marko Hemmerich weiß, wo die Fallen lauern.
Das Atomic Design unterscheidet Atome, Moleküle, Organismen und Templates, die sich mit zunehmender Komplexität zu einer Website zusammensetzen
Der 2013 von Brad Frost vorgestellte Gestaltungsansatz sieht ähnlich wie in der agilen Entwicklung den iterativen Aufbau von Websites vor. Grundlage dafür sind modulare, dynamische Designsysteme, die mit den fünf Ebenen »Atome«, »Moleküle«, »Organismen«, »Templates« und »Pages« arbeiten.
Atome – dazu gehören etwa Labels, Eingabefelder und Buttons – bilden die Grundbausteine, aus denen Designer die Pages zusammensetzen. Alle Stakeholder sind am Projektfortschritt beteiligt und können den Prozess logisch nachvollziehen. Dieser technische, codefokussierte Development-Ansatz rückt das Thema User Experience besonders in den Vordergrund.
DON’TS
Statische Workflows
Häufig übertragen Agenturen printbasierte Workflows auf die Entwicklung von Websites. Statische Medien wie Bücher oder Plakate erfordern statische Raster und Muster – die permanente Wechselwirkung zwischen Medium und User bei digitalen, interaktiven Formaten verlangt dagegen durchdachte Aktions-Reaktions-Schleifen.
Dem Druck des Kunden nachgeben
Beim Atomic-Design-Ansatz arbeiten Digitaldesigner holistisch vom Kleinen ins Große. Ein finales Layout steht daher erst relativ spät. Die mangelnde Abstraktionsfähigkeit mancher Kunden sollte nicht dazu verleiten, ihm vorab eine fertige Gestaltung zu präsentieren.
Uniformität
Der Erfolg von Frontend-Frameworks wie Bootstrap oder Foundation hat den unschönen Nebeneffekt, dass sich Websites stark ähneln. Schon die kleinsten Elemente sollten kundenspezifisch gebrandet sein, sonst haben alle Auftritte einen Look.
Die Atome »Enter Keyword« und »Search« bilden ein Molekül. Im Rahmen der Kopfzeile entsteht ein Organismus, der in Kombination mit weiteren Elementen ein Template darstellt
DOS
Nutzen Sie für komplexe Projekte Atomic Design
Je umfangreicher ein Webprojekt ist, desto sinnvoller ist es, nach dem Atomic-Design-Prinzip zu arbeiten, da es viel Vorbereitungszeit benötigt. Ein One-Pager lohnt den Aufwand eher nicht.
Gehen Sie direkt ins Coding
Konzept- und Designkorrekturen von Stakeholdern sollten Designer und Developer direkt im Code umsetzen, statt fixe Wireframes und Photoshop-Layouts zu modellieren. So lassen sich die Module jederzeit weiterverwenden. Solche Wireframes kann man objektiver mit dem Kunden diskutieren, weil man konkret aufzeigen kann, wie User die Informationsarchitektur wahrnehmen und mit ihr interagieren.
Testen Sie ohne visuelle Elemente
Das UX-Testing mit »grauen Klötzen« verhindert, dass man sich bei der Konzeption mit visuellen Details aufhält. Erst nach der Freigabe der gecodeten Wireframes macht es Sinn, das Layout mit den im Frontend-Styleguide definierten Atomen, Molekülen und Organismen zu entwickeln.
Testen Sie früh
Es empfiehlt sich, UX-Konzepte immer so früh wie möglich im Code zu überprüfen. Positiver Nebeneffekt: So entwickelt sich automatisch ein besseres Verständnis für programmiertechnische Grenzen und Herausforderungen.
Mehr zum Thema erfahren Sie in PAGE 03.2017:
Webdesign – Dos & Don’ts +++ Design-Plagiat: Recht & Praxis +++ Making-of-Videotools +++ PAGE Ranking 2017 +++ Masterstudiengänge Typedesign & vieles mehr
Marko Hemmerich, Art Director Digital bei BOOM, entwickelt seine Wireframes und UX-Konzepte lieber direkt im Code, statt sich mit statischen Wireframetools herumzuschlagen, die sich nicht sauber integrieren lassen.
