Frontend-Styleguides und Pattern Libraries

Wir kennen alle das Problem: Kurze Zeit nachdem wie eine Seite gelauncht haben steigen neue Designer und (Produkt-)Developer ein und machen einige Änderungen. Sie führen neue Elemente ein oder fügen Styles hinzu die nicht zu den anderen Elementen und Styles passen. Als Folge dessen bläht sich der Code immer weiter auf und die Wartbarkeit leidet darunter. Aber, wenn wir keine Dokumentationen hinterlassen können wir uns nicht wirklich beschweren wenn Sie unsere harte Arbeit wieder zerstören.

Um dieses Problem zu beheben lohnt es sich eine Design-Dokumentation ein Form eines Styleguides / einer Patternlibrary einzuführen. Ein Styleguide definiert Details, wie z.B. Typographie, Abstände zum Logo und u.a. die Cooperate Farben. Ein Pattern Library geht noch ein wenig weiter und definiert wiederkehrende Muster in Form von Snippets.

Wendet man diese Guides schon bei der Produkt- und Designentwicklung ein hilft dass die Konsistenz des Design und Layouts zu halten und verhindert zudem eine Reduzierung der Codequalität im Laufe der Zeit.

Aber das sind nicht die einzigen Vorteile eines Frontend Styleguides. Er hilft zudem auch das Layout und einzelne Elemente einfacher zu testen, erzeugt einen besseren Workflow in der Design-Entwicklung und zur guter letzt hilft er auch dabei ein gemeinsames Vokabular zwischen allen involvierten Personen zu schaffen.

Allerdings gibt es auch Herausforderungen vor allem bei größeren Projekten, denn die Erstellung eines solches Styleguides fordert natürlich einige Zeit und er muss kontinuierlich weiter gepflegt werden. Typisch ist dabei oft, dass aus Zeitmangel Styleguides oft erst nach dem Livegang eines Projektes erstellt werden und damit nicht die vollen Möglichkeiten die der Styleguide vor allem in der Entwicklungsphase bringen kann nicht ausgenutzt werden. Oftmals wird dann im Nachgang ersichtlich an wie vielen Stellen ein Styleguide geholfen hätte.
Des Weiteren sollte die Patternlibrary nicht zu abstrakt sein und es sollte darauf geachtet werden dass sie nicht unvollständig ist. 

Leider werden Styleguides oft nur als Tool für Designer und Developer gesehen und ihr Potential in der Produktentwicklung nicht gesehen. Oft ist wird es als Art Hilfs-Projekt gesehen und nicht als integraler Bestandteil eines Webprojektes. Auch ist oft die Methodik nach dem eine solche Library erstellt wird nicht klar definiert.

Einige Beispiele für Styleguides / Pattern Libraries

http://www.yelp.com/styleguide
http://brettjankord.com/projects/style-guide-boilerplate/
http://barebones.paulrobertlloyd.com/
http://style.codeforamerica.org/
http://ux.mailchimp.com/patterns/
http://www.starbucks.com/static/reference/styleguide/

Beitragsbild:
www.flickr.com/photos/wikidave/7118464049/

Leave a Reply

Your email address will not be published. Required fields are marked *