Unser Dream-Team für UX/UI Projekte - Teil 2: Zeplin

Habt ihr schon einmal von Zeplin.io gehört? Das Tool erleichtert die Kommunikation und Übergabe zwischen Designern und Entwicklern enorm und ist für uns seit einiger Zeit nicht mehr aus unserem Workflow wegzudenken.

Dieser Artikel ist eine dreiteilige Serie:

Teil 1: Unser Dream-Team für UX/UI Projekte - Sketch
Teil 2: Unser Dream-Team für UX/UI Projekte - Zeplin
Teil 3: Unser Dream-Team für UX/UI Projekte - Invision

Übergaben vor Zeplin

Es ist noch gar nicht so lange her, da hat die Fertigstellung von Entwürfen für die Übergabe an die Entwicklung fast genau so lange gedauert, wie der Designprozess an sich. Na gut, das ist vielleicht ein klein wenig übertrieben, aber es war auf jeden Fall ziemlich aufwendig. Da wurden Abstände als Notizen zwischen jedem einzelnen Element angebracht, die Schriftgrößen in Ebenen-Namen einer Photoshop-Datei festgehalten und Farben als Zusatzebene an- und ausgeblendet. Hat man sich einmal vertippt, oder ist verrutscht, dann wurden diese Fehler meistens auch 1:1 so in der Entwicklung umgesetzt. Kein Wunder, denn wenn man anhand eines solchen Dokuments entwickeln muss, wer hat denn da noch die Zeit sich über Unregelmäßigkeiten zu wundern? 

Etwas später fingen wir mit unseren ersten Pattern Librarys an. Modulare Designs haben nicht nur den Vorteil einer einfachen Erweiterbarkeit, es reichte auch aus, einzelne Module nur einmal zu beschreiben und im Design anzumerken. Fehler aus Kommunikationsgründen wurden weniger, aber der Aufwand war immer noch gigantisch. Bei größeren Projekten entstanden schnell riesige PDF-Dokumente, die sich einfach nicht ordentlich strukturieren ließen. Die Sketch App machte den Aufbau einer solchen Library zwar etwas einfacher, es war aber immer noch ziemlich zeitaufwändig. Wenn wir uns heute unsere ersten Pattern Librarys ansehen, dann schütteln wir über deren Komplexität nur noch den Kopf.

Styleguide und Pattern Library für Methodpark 2016

Das muss doch auch einfacher gehen!

Genau diesen Gedanken hatten die Entwickler hinter Zeplin.io eben auch und lieferten allen Sketch Usern ein Tool, in dem wir unsere Designs ganz einfach hochladen können, ohne die Originaldateien dabei aus den Händen geben zu müssen. Das Programm erkennt automatisch alle verwendeten Schriftgrößen und Farbcodes und listet sie ordentlich in einer Art Mini-Styleguide auf. Größen, Abstände, Grids - all die Dinge, die wir in den eigenen Pattern Librarys manuell beschriften mussten sind in Zeplin per Hover und Mausklick herauszulesen. Und falls es doch einmal etwas mehr Erklärungsbedarf und Fragen gibt erleichtert eine einfache Notiz-Funktion die Kommunikation zwischen allen Beteiligten. Großartig!

Fazit

Es stimmt schon, Zeplin nimmt uns bei der Übergabe an die Entwicklung sehr viel Arbeit ab. Das bedeutet allerdings nicht, dass wir jetzt nur noch auf einen Button klicken und dann die Füße hochlegen! Die Zeit, die wir früher für Beschriftungen und Bezeichnungen verwenden mussten, wird jetzt einfach besser genutzt. Anstatt Abstände zu beschriften, unterstützen wir die Entwicklung nun durch hilfreichere Zusatzinformationen - wie beispielsweise Klickstrecken – um ein noch besseres Verständnis zu ermöglichen oder Hinweise auf besondere Interaktionen zu geben. Je nachdem was für das Projekt gerade benötigt wird.