Webdesign mit Pattern Lab umsetzen

Die Umsetzung eines Website-Designs mithilfe einer strukturierten Bibliothek - dem Pattern Lab - bietet die Möglichkeit alle Design-Elemente im Überblick zu behalten, Änderungen schnell sichtbar zu machen und eine Website langfristig flexibel zu gestalten.

Was ist Pattern Lab?

Um für alle Projektbeteiligten eine gemeinsame Basis zu schaffen, bietet Pattern Lab eine strukturierte und flexibel anpassbare Übersicht für alle verwendeten Komponenten eines Designs. Das Open-Source-Tool legt dabei das "Atomic Design" zugrunde, welches auf Prinzipien aus der Chemie aufbaut.

Das Layout wird in seine kleinsten Bestandteile aufgesplittet. Diese Bausteine werden in Atomen, Molekülen und Organismen definiert und können so beliebig wieder zusammengesetzt werden. Mithilfe dieses lebendigen Styleguides (Living Style Guide) ist es möglich das Design einer Website von Beginn an zu überblicken, der Style Guide ist gut ausbaufähig und alle zentralen Elemente werden an einem Ort verwaltet. So kann auch ein nach Jahren wachsendes und sich veränderndes Projekt übersichtlich bleiben. 

Sinnvoll ist vor allem, dass das Pattern Lab direkt an ein Drupal-System an­ge­schlos­sen wer­den kann.

Än­de­run­gen wel­che im Pat­tern Lab vor­ge­nom­men wer­den, kön­nen auf die­se Wei­se sehr schnell in der an­ge­schlos­se­nen Web­site an­ge­zeigt wer­den. Das gilt auch für Ani­ma­tio­nen. 

Was ist Atomic Design?

In die­sem De­sign-Kon­zept wer­den die Ele­men­te in ein­zel­ne Be­stand­tei­le zer­legt. Be­gin­nend mit der kleins­ten Ein­heit, den Pro­to­nen, wer­den hier zu­nächst die Far­ben, Icons oder Schrif­ten de­fi­niert. Dar­auf auf­bau­end wer­den in den Ato­men die Schalt­flä­chen, For­mu­lar­fel­der, Head­lines etc. be­schrie­ben. Mo­le­kü­le sind die nächst­grö­ße­re Ein­heit. Sie ent­ste­hen je­weils durch Grup­pie­run­gen ver­schie­de­ner Ato­me. Ein Bild mit Text und But­ton er­gibt z. B. ei­nen Teaser. Die­ser Teaser ist ein Mo­le­kül. Aus Mo­le­kü­len und Ato­men set­zen sich als nächst­grö­ße­re In­stanz die Or­ga­nis­men zu­sam­men z. B. eine Teaser-Lis­te. Schließ­lich gibt es noch Seiten­-Tem­pla­tes wel­che je­weils aus vie­len Or­ga­nis­men be­ste­hen kön­nen, die zu­sam­men­ge­setzt eine Sei­ten­vor­la­ge (Page) er­ge­ben.

Bei­spie­le für Atomic-De­sign-Ele­men­te in Pattern Lab

Bei­spiel LEGO®

Um die Logik hinter Pattern Lab noch besser verstehen zu können, kann man Parallelen zum Zusammenbau eines Autos aus LEGO-Bausteinen ziehen. Ein solches LEGO-Projekt kann man in An­griff neh­men, in­dem man alle Tei­le ein­fach un­sor­tiert auf ei­nen Tisch legt und durch den Sta­pel stö­bert um das pas­sen­de Stück zu fin­den. Die­se Her­an­ge­hens­wei­se an ein Lego-Pro­jekt ist si­cher­lich eine prak­ti­ka­ble Stra­te­gie, auch wenn sie un­an­ge­mes­sen will­kür­lich ist. Man ach­tet nur dann auf den Sta­pel Zie­gel­stei­ne, wenn man ihn durch­suchst, um das be­stimm­te Stück zu fin­den, das man braucht. Mit die­ser Stra­te­gie wer­den vie­le di­gi­ta­le Pro­jek­te an­ge­gan­gen. Der Kun­de braucht eine Web­site, also fan­gen wir gleich an zu ent­wer­fen und dann zu bau­en. Un­ser Blick bleibt auf das End­pro­dukt fi­xiert und wir schau­en sel­ten, wenn über­haupt, auf die zu­grun­de lie­gen­den Mus­ter aus de­nen un­se­re end­gül­ti­gen UIs be­ste­hen.

Wenn man sich die Zeit nimmt die Tei­le des De­signs zu sortieren und zu ordnen, kann man sich be­wuss­ter und ef­fi­zi­en­ter mit der Ar­beit be­fas­sen. Or­ga­ni­sie­ren braucht zwei­fel­los Zeit, Pla­nung und An­stren­gung. Die Tat­sa­che, dass die­se Vorarbeit im fer­ti­gen Pro­dukt nicht sicht­bar dar­ge­stellt wird, könn­te dazu ver­lei­ten zu sa­gen, dass dies eine Ab­len­kung von der ei­gent­li­chen Ar­beit dar­stellt, die ge­tan wer­den muss. War­um die Mühe?

In­dem man sich die Zeit nimmt, die Tei­le zu or­ga­ni­sie­ren, kann man das Gan­ze rea­lis­ti­scher, ge­ziel­ter und ef­fi­zi­en­ter ge­stal­ten. Wenn eine Bi­blio­thek der ver­füg­ba­ren Ma­te­ria­li­en er­stel­lt wird, kann das Pro­jekt me­tho­di­scher an­gegangen werden und viel Zeit gespa­rt werden. An­statt ei­nen will­kür­li­chen Sta­pel von Zie­geln zu durch­fors­ten und Mus­ter neu zu er­fin­den, kan ein or­ga­ni­sier­tes Sys­tem von Kom­po­nen­ten er­stel­lt werden, dass dabei hilft in kür­ze­rer Zeit bes­se­re Ar­beit zu leis­ten.