guerillagirl

Kürzlich habe ich bei einem Re-Design Projekt im Rahmen des Visual Design Prozesses angefangen, zusätzlich mit einer Projekt-GUI-Library zu arbeiten.
Es ist ein Versuch. :) Ich finde es einfach ineffizient, für jeden Seitentyp Screendesigns zu machen. Es dauert ewig, es ist ein Mordsgefrickel und Schriften wirken im Browser meist doch eh anders.
Können wir im Appplikationsdesign nicht unsere Zeit für viel wertvollere und wichtigere Aufgaben als tagelange Pixelschubsereien in Photoshop & Co verwenden? – Stichwort Usability/UX.

Eine GUI Library eignet sich zusätzlich zu Overall-Screendesigns supergut – man hat einen Überblick über alle verwendeten Elemente, man erhält auch so einen Überblick über den „Look & Feel“ und falls mal jemand anders an der Webseite etwas erweitern möchte, hat er ein super Orientierungstool ( z.B Iconsprache, etc..)
Eigentlich reichen (abhängig vom Projekt natürlich) ca. 2-3 „Overall Look and Feel-Screens“, den Rest erledigt die Library, worauf das ganze Projektteam auch Zugriff hat.

Als erstes muss man alle Elemente, die auf der Webseite bzw. in der Appplikation vorkommen identifizieren und am besten gruppieren. Was kann man vereinheitlichen?
Ich habe mir dann eine Liste gemacht, um einen Gesamtüberblick zu bekommen, die ich systematisch abgearbeitet habe und jedes Element bzw Gruppe von Elementen daraufhin für die Library gestaltet. (z.B Primary Call to Action Buttons, Secondary Buttons, Tabs, Accordionelemente, alle(!) Icons nach Maßen gruppiert etc…
Die Library ist als *.psd und *.png File (wegen Transparenz) dann für jeden verfügbar.
Man kann auch gleich alle Elemente daraus exportieren.

Was ich persönlich als Vorteil empfinde:
-Eine Library ist schneller erstellt als komplette Screendesigns oder gar pdf-Styleguides (grusel).
-Ich bewahre Konsistenz in meinen Designs, was besonders bei Webapplications wichtig ist (!)
-Man hat einen kompletten Überblick und erkennt wiederkehrende Patterns schneller
-Sie ist weiterverwendbar/ ausbaufähig (und behält ihre Design-Konsistenz)
-Fürs Frontenddevelopment besser, da die meisten Elemente schon existieren und man nicht „on the fly“ irgendwas darauf losbasteln muss und man sich event. auch schon ein Bild zur HTML Struktur von bestimmten Elementen machen kann.

Was habt ihr für Erfahrungen gemacht? Bin gespannt auf eure Meinungen und eure Workflows :)