16.01.2017

Pattern Lab ist ein Styleguide und Production Tool, das die Webseiten-Gestaltung mit Hilfe von Atomic Design ermöglicht. Im Pattern Lab sind verschiedene Basis-Elemente einer Webseite enthalten. Diese können variabel eingesetzt werden, um verschiedene Darstellungen der zukünftigen Seite zu ermöglichen.

Atomic Design: Webdesign in Atomen

Das von Webdesigner Brad Frost ins Leben gerufene Atomic Design funktioniert nach einem modularen Prinzip. Dabei werden einzelne Codeteile ausgelagert. Diese funktionieren in sich geschlossen, können aber auch jederzeit in größere Abschnitte und Elemente integriert werden. Beim Atomic Design werden die einzelnen Codeabschnitte nach chemischen Einheiten benannt.

Ein Atom ist hierbei die kleinste Einheit, wie etwa eine Farbauszeichnung, die nicht mehr weiter aufgeteilt werden kann. Die verschiedenen Atome bilden zusammen ein Molekül, das eine bestimmte Aufgabe im Webdesign erfüllt. Mehrere Moleküle bilden zusammen einen Organismus, dieser kann einen kompletten Bereich einer Seite abbilden, wie zum Beispiel den Footer. Zu den einzelnen Bestandteilen des Atomic Design gehört auch das Template, das als als Vorlage für die tatsächliche Seite dient.

Bestandteile des Atomic Design:

  • Atom
  • Molekül
  • Organismus
  • Template
  • Seite

Gemeinsam beeindruckende User Interfaces schaffen

Pattern Lab funktioniert wie ein Baukasten, der Entwicklern die Basiselemente und auch Funktionen oder Animationen einer Webseite zur Verfügung stellt. Eine Vorschau der zukünftigen Seite aufgrund der hinterlegten Templates ist leicht möglich. Kundeninformationen können eingegeben werden und verschiedene Darstellungen einer Seite abgebildet werden, ohne dass dafür eine endgültige Programmierung vorgenommen werden muss.

Der Kunde wird frühzeitig mit in den Entwicklungsprozess eingebunden und erhält eine Vorstellung davon, wie seine Seite aussehen kann. Da jedes Website-Element für sich funktioniert, kann flexibel auf seine Wünsche eingegangen werden. Änderungen können vorgenommen werden ohne, dass dabei Stellen vergessen werden, an denen das Element ebenfalls verwendet wird. Copy/Paste Fehler fallen schnell auf und lassen sich damit effizient vermeiden.

Das Pattern Lab kann dabei als die grüne Lego-Platte verstanden werden, auf der Entwickler ihre einzelnen Bausteine aufsetzen können. Die Steine sind die einzelnen Bestandteile des Atomic Designs. Sie können an jede beliebige Stelle gesetzt werden und funktionieren in verschiedenen Umgebungen. Eine Neupositionierung eines Steines oder die Entscheidung, einen blauen Stein durch einen roten zu ersetzen, verändert das Bild auf der Platte entsprechend.

Varianten einer Darstellung können durch den einfachen Austausch verschiedener Designelemente direkt im Frontend gezeigt werden und der Designer oder Kunde kann die beste Variante auswählen, um eine beeindruckende User Experience zu gewährleisten.

Pattern Lab wird bei TWT kollaborativ interpretiert. Das bedeutet, dass beispielsweise Frontend- und Backend-Entwickler zur selben Zeit an einem Projekt arbeiten können. In manchen Fällen verwenden sogar die Systeme (bspw. Content Management Systeme), die Pattern Lab Vorlagen als eigene Templates. Die einzelnen Entwicklungsperspektiven können transparent nachvollzogen werden. Durch Kommentare in den Annotationen, die ein Entwickler für einen Anderen hinterlässt, werden interne Abstimmungen erheblich einfacher. Frontendler und Backendler können effektiver zusammenarbeiten. Sie können gemeinsam alle Funktionen, die dem User später auf einer Seite zur Verfügung stehen sollten, testen. So zeigt sich schnell, ob der dafür nötige Code im System gepflegt wurde. Mögliche Fehler lassen sich auf diese Weise ebenfalls schnell erkennen. Denn eine Funktion basiert auf einem bestimmten Element. Der Entwickler kann an die entsprechende Stelle herantreten und eine Verbesserung vornehmen. Zeitverlust durch aufwendige Fehlersuchen in langen Codezeilen wird vermieden.

Design und Funktionen zentral vereint

Pattern Lab als Styleguide und Production Tool stellt das Design sowie das User Interface in den Mittelpunkt. Vor der Umsetzung einer Webseite stehen am Anfang verschiedene Ideen und Vorstellungen: Die des Kunden, die der verschiedenen Entwickler und die der Designer. Pattern Lab bringt all diese Ideen zusammen und ermöglicht es, sie beispielhaft als Webseite umzusetzen.

Gerade für den Kunden ist es wichtig zu sehen, wie widerum seine Kunden eine Seite nutzen können. Die Optimierung für verschiedene Endgeräte ist dabei ein wichtiger Punkt. Responsive Webdesign wird von  Pattern Lab optimal unterstützt, sodass der Kunde die Vorschau seiner Webseite auf unterschiedlichen Devices testen kann.

Flexible Webprojekte mit und für den Kunden umsetzen? Mit Pattern Lab setzen wir Webdesigns um, in denen alle Anforderungen und Wünsche unserer Kunden vereint werden. Überzeugen Sie sich selbst in unserer Entwickler Serie Teil zwei.