Die Vorteile liegen dabei klar auf der Hand: Zum einem gewährleistet ein Designsystem ein widerspruchfreies und leicht erweiterbares Webdesign, zum anderen stellt es der technischen Realisierung fertige Segmente in einem Baukastensystem bereit, mit denen Entwickler und Integratoren komplexe Seiten-Templates bzw. ganze Websites erstellen können.

Wird beispielsweise eine neue Kampagnenseite benötigt, greift ein Entwickler auf die vorliegenden Atomic Design Segmente zurück. Das sichert ein einheitliches Auftreten innerhalb der gesamten Webpräsenz und verringert den Aufwand massgeblich.

Auch macht es eine UI Dokumentation weitestgehend überflüssig, da der daraus generierte Online-Styleguide alle Designelemente dokumentiert – und das sogar responsive und pixelgenau.

Alle Komponenten werden nach einem Baustein-Prinzip «deduktiv» entwickelt. Einmal konstruiert, kann ein Atomic Design System für beliebige Anwendung genutzt werden. Und das ist auch der grösste Vorteil dieses Systems. In der Praxis entstehen neue Templates im Handumdrehen und als angenehmen Nebeneffekt auch noch konsistent!

Atomic Kitchen (atomare Code-Pattern-Library)

snowflake benutzt für die Erstellung von Atomic-Designsystemen ein Tool namens «Atomic Kitchen», mit welchem man iterativ ein Atomic Designsystem erstellen und online veröffentlichen kann. Das führt zu einer weiteren Aufwandsreduzierung.

Das hat im Prinzip vier Gründe:

  1. Während der technischen Umsetzung muss das Design nicht in Code übersetzt werden, d.h. die Entwickler sparen hier massiv Zeit.
  2. Durch die nativen CSS-Definitionen aller Stati (Hover, Sticky-Behavior, Micro-Animationen u.a.) in Atomic-Kitchen erhält man ein echtes Look & Feel der späteren Anwendung und es gibt es keine unliebsamen «Missing Links» mehr, die erst in der technischen Umsetzungsphase auffallen und dann erst wieder von den Designern bearbeitet und dann von den Entwicklern umgesetzt werden müssen. Das garantiert nicht nur einen perfekten Golive, sondern führt auch zu einer Aufwandsreduzierung sowohl bei den Designer als auch bei den Entwicklern.
  3. Auch fällt durch die pixelgenaue, responsive Darstellung aller Inhaltselemente in HTML/CSS das Entwickler-Briefing wesentlich kürzer aus als bei einer herkömmlichen Vorgehensweise ohne HTML/CSS-Pattern-Library. Der Kommunikationsaufwand zwischen Designer und Entwickler reduziert sich auch hier enorm.
  4. Naturgemäss führt die «Design-to-Code-Transformation» zu einer Reihe von Fehl-Interpretationen und Missverständnissen, deren Behebungen aufgrund von Reviews und Rückfragen viel Zeit an Kommunikation an der Schnittstelle «Entwicklung-Design» kosten. Diese nervigen und zeitfressenden «Fails» entfallen somit auch.

 

Aus Erfahrung wissen wir, das man innerhalb der technischen Umsetzung eines Frontends, bei den notwendigen Reviews, beim Design-Support der Entwickler und bei der Erweiterung des Designs in der Post-Golive-Phase mindestens die Hälfte der Zeit sparen kann, wenn ein Designsystem in Form einer Code-Library vorliegt.

 

 

Zur Übersichtsseite UX-Design

 

 

Interesse geweckt?

Für Ihre Anliegen stehe ich Ihnen unter der Nummer +41 58 680 32 32 zur Verfügung oder nutzen Sie unser Kontaktformular.

Patrick Aubert de la Rüe, Managing Director

Kontakt

Weitere Projekte finden Sie in unserer

Projektübersicht