PAGE online

Dos & Don’ts im Atomic Design

Atomic Design ist eine effiziente Methode für die iterative Entwicklung umfangreicher Websites. Marko Hemmerich weiß, wo die Fallen lauern.

atomic_design_ux_konzepte
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 Ent­wicklung den iterativen Aufbau von Websites vor. Grundlage da­­für sind modulare, dynamische De­sign­systeme, die mit den fünf Ebenen »Atome«, »Mo­le­kü­le«, »Or­ga­nismen«, »Templates« und »Pages« ar­bei­t­en.

Ato­me – dazu gehören etwa Labels, Eingabe­fel­d­er und Buttons – bilden die Grundbausteine, aus denen Designer die Pages zusammensetzen. Alle Stake­holder sind am Projektfortschritt betei­ligt und können den Prozess logisch nachvollziehen. Dieser technische, codefokussierte Development-An­satz rückt das Thema User Experience besonders in den Vordergrund.

 

DON’TS

Statische Workflows
Häufig übertragen Agentu­ren printbasierte Workflows auf die Entwicklung von Websites. Statische Medien wie Bücher oder Pla­ka­te erfordern statische Raster und Muster – die perma­nente 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 ge­brandet sein, sonst haben alle Auftritte einen Look.

atomic_design_template_ux_design
Die Atome »Enter Keyword« und »Search« bilden ein Molekül. Im Rahmen der Kopfzeile entsteht ein Organis­mus, der in Kombination mit weiteren Elementen ein Template darstellt

 

DOS

Nutzen Sie für komplexe Projekte Atomic Design
Je umfangreicher ein Webprojekt ist, desto sinnvol­ler ist es, nach dem Atomic-Design-Prinzip zu arbei­ten, da es viel Vorbereitungszeit benötigt. Ein One-Pager lohnt den Aufwand eher nicht.

Gehen Sie direkt ins Coding
Konzept- und Design­korrekturen 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-Tes­ting 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 im­mer so früh wie möglich im Code zu überprüfen. Po­sitiver Nebeneffekt: So entwickelt sich automatisch ein besseres Verständnis für programmiertechnische Grenzen und Herausforderungen.

titel_page_032017_mini

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

Gleich hier PAGE 03.2017 downloaden!

Oder direkt die nächsten drei aktuellen Ausgaben zum super Paketpreis lesen.

 

mark-froemberg-page-atomic-design-180x180

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.

 

 

 

Produkt: Download PAGE - Microinteractions - Animationen und Transitions - kostenlos
Download PAGE - Microinteractions - Animationen und Transitions - kostenlos
Best Practices für Web und Mobile. Coding-Tipps für CSS3. Tools, Bibliotheken und Generatoren fürs Prototyping & Wireframing

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren