Storybook für die UI-Entwicklung

Storybook
16{icon} {views}

Die Zeiten ändern sich, auch das Design eines User Interfaces. Die Designer sitzen nach wie vor mit ihrem Photoshop in ihrem Kabuff und malen bunte Bilder. Diese bekomme ich dann mehr oder minder gut aufbereitet. Und dann fängt es an: Welche Farbe beim Hovern von Links und Buttons, und was ist das da in der Mitte? Aha, ein Graph – das kann der aber so nicht! Also alles einmal umbauen und von links auf rechts drehen. Modale Fenster, was sind das? Kann man das nicht mit Frames lösen und überhaupt: die Grafiken müssen eine viel bessere Qualität haben – und nimm dafür mal dieses Flash, ich schicke dir da mal was! Am Ende weint man dann.

Seit geraumer Zeit beobachte ich die Entwicklung von Design Systemen, wie zum Beispiel Storybook. Und gerade kam auf Twitter der Hinweis, das der gute Sven dazu was feines an den Start bringt, also dann doch mal wieder bloggen ;) Was ist nun dieses Storybook. Ich drücke es mal sehr einfach, und sehr verkehrt aus: ein WYSIWYG-Editor für die Entwicklung von User Interfaces. Storybook läuft im Browser und ermöglicht das erstellen von User Interfaces. Ein einzelnes Storybook besteht dabei aus mehreren Stories. Eine Story könnte zum Beispiel ein Button und all dessen Zustände sein. Das hört sich erst einmal einfach an, wird aber dann doch komplex wenn man einen Graph als Story anlegt. Für den Fall das dann ein Photoshop-Experte das Tool verwendet passieren zwei Dinge: a) er sieht überhaupt erst einmal das es da Aktionen und Events gibt, die man belegen könnte und b) er wird in seiner Kreativität so eingeschränkt, das er nur Dinge ändern kann, die überhaupt möglich sind.

Ein Storybook könnte demnach auch zum Austausch zwischen Designern und Entwickler genutzt werden. Der Entwickler besitzt die Herrschaft über den Code, der Designer kann in Maßen Änderungen vornehmen und sieht was er ändern könnte. Der Designer wird es allerdings nicht schaffen ein Storybook aufzusetzen, aber dafür hat er ja den Entwickler.

Schaut euch den kleinen Helfer auf jeden Fall mal an, und wenn ihr es nützlich findet denkt mal bei großen Seiten über Pattern Libraries oder Design Guides nach :D

You may also like

Schreibe einen Kommentar