Von Effektivität und Zeitersparnis – unsere Erfahrung mit dem Hand-Off Tool Zeplin

27. Januar 2017 at 17:13
Hand Off Prozess

Zeplin bietet plattformübergreifenden Funktionalität

Der „Hand Off“ Prozess wird in englischsprachigen Wörterbüchern mit dem Beispiel der Übergabe eines Sportgerätes an einen Mitspieler (Football, Staffellauf) beschrieben oder dem Zeitpunkt in der Luftfahrt, in dem ein Flugzeug von einem Tower an den anderen übergeben wird. Die Gemeinsamkeit beider Beispiele: beide Zeitpunkte sind die kritischen Momente, in denen der Prozess durch äußere Einwirkung oder eigene Fehler mit negativen Folgen scheitern kann.

Überträgt man den Begriff des „Hand Off“ nun auf das Arbeiten im digitalen Design, lassen sich diverse Analogien aus den oben genannten Beispielen ableiten. Die Übergabe zwischen zwei Gewerken (z.B. Design und Entwicklern) kann dabei durchaus einige Hürden beinhalten, die Zeit und Arbeit kosten können. Wie genau definiert man die einzelnen Elemente? Wo hält man diese fest? In einem (Living) Styleguide? In einem eigenen Wiki? Wo legt man die Assets ab? Auf einem Server oder in einem von überall zugänglichen Cloud Service? Welche Version der Layout Datei ist die aktuellste? Was wurde geändert?

In einem gut angelegten (Living) Styleguide lassen sich die meisten dieser Fragen zwar klären, diesen anzulegen erfordert allerdings viel Arbeit. Dabei wird die Problematik der Assets und der Versionierung auch nur bedingt gelöst und erfordert meistens noch ein weiteres Tool (Server/Cloud/offene Design Dateien).

An diesem Punkt kommen „Hand Off Tools“ ins Spiel. In einer Zeit, in der kaum eine Woche vergeht in der kein neues UX/UI Tool erscheint, haben sich einige Software Studios darauf spezialisiert, die Prozesse um den eigentlichen Designprozess herum zu vereinfachen. Von Sketch Plug-Ins wie „Marketch“ und „Sketch Measure“ bis zu vollständigen plattformübergreifenden Tools wie „Sympli“ und „Zeplin“ oder auch dem sich noch in der Beta Phase befindenden „Insight“ von InVision, gibt der Markt mittlerweile eine ganze Bandbreite an neuen Tools her, die uns das Designer-Leben vereinfachen und jede Menge Zeit sparen sollen.

Als kürzlich ein Projekt vom Design zur Entwicklung übergeben werden sollte, haben wir uns dazu entschieden, diesen Tools eine Chance zu geben. Wir haben getestet, ob und wie die Schnittstelle zwischen den Gewerken optimiert werden kann.

Aufgrund der plattformübergreifenden Funktionalität (MacOS/Windows, Photoshop/Sketch, Desktop App/Browser App) fiel unsere Wahl hierbei auf Zeplin.

Zeplin Benutzeroberfläche

Zeplin Benutzeroberfläche

Die App besteht aus zwei Teilen: einem Plug-In für Photoshop/Sketch und der Zeplin App. Mit dem Plug-In können die Artboards und Assets markiert und in die App exportiert werden. Dieser Prozess funktioniert direkt im Design-Programm, so dass die Screens und die zugehörigen Assets schnell exportiert werden können. Nach dem Upload der Daten und dem Wechsel zur Zeplin App, erscheinen dort alle exportierten Screens. In den Screens selber können die einzelnen Elemente nun per Klick direkt inspiziert und alle nötigen Infos angezeigt werden. Bei Schriften werden Schriftart, Schriftschnitt, Größe, Ausrichtung, Zeilenabstand, Hexcode und die Position dargestellt. Diese Elemente können direkt als CSS, SCSS oder SASS ausgegeben werden.

Hand Off Prozess

In den Screens selber können die einzelnen Elemente nun per Klick direkt inspiziert und alle nötigen Infos angezeigt werden.

Bei Flächen und Formen werden ebenfalls Größe, Farbe, Position, Eckenradius etc. angezeigt und direkt in CSS ausgegeben. Inspiziert man die Elemente, die man vorher als Assets definiert hat, können diese direkt herunterladen werden. Zeplin generiert bei allen Bilddateien automatisch JPGs und PNGs in jeweils drei verschiedenen Größen sowie bei Vektordateien eine SVG-Datei. Ändert sich etwas in der Designdatei, kann diese via Plug-In einfach in der App überschrieben werden, so dass die Datei immer aktuell ist und die neuesten Assets beinhaltet. Es ist nicht mehr nötig Zip-Files via E-Mail zu verschicken oder in Clouds abzulegen, alles befindet sich direkt am richtigen Ort. Mit einem weiteren Klick lassen sich Schriften und Farben direkt im App internen Styleguide festhalten. Das manuelle Eintragen von Schriftgrößen und Farben ist nicht mehr nötig. Die Zeitersparnis – ein vollständiges Designprojekt mit Zeplin weiterzugeben, anstatt alles mit der Hand einzutragen – ist enorm und der komplette Prozess sehr einfach und intuitiv.

Zeplin Styleguide

Zeplin Styleguide

So viel zur Effizienz, doch wie bewährt sich das Tool in der Praxis? Nachdem das Projekt vollständig hochgeladen wurde, lädt der „Owner“ alle weiteren Teammitglieder ein. Diese können ebenfalls die Screens inspizieren und alle nötigen Infos ansehen sowie die Assets herunterladen.
Eine weitere Funktion ermöglicht es, direkt in der App Kommentare einzufügen. Die Benachrichtigungen erscheinen wahlweise in der App, per E-Mail oder via Slack Integration.

Nach einigen Tagen Arbeit mit Zeplin habe ich die involvierten Entwickler um Feedback und Anmerkungen gebeten, die sehr positiv ausfielen. Besonders wurde die Übersicht der einzelnen Screens und die Verfügbarkeit der Assets hervorgehoben.

Das Gesamtfazit fällt also durchweg positiv aus. Das generieren von Styleguides, Assets und allen wichtigen Informationen funktioniert wesentlich unkomplizierter und schneller als die manuelle Erstellung eines Styleguides. Alle wichtigen Informationen und Dateien sind immer am selben Ort und ständig aktuell. Die Kommunikation ist direkt und präzise aufgrund der Kommentarfunktion und von Benachrichtigungen.

Quelle: uxtools.com

Quelle: uxtools.com

Hand Off Tools sind eine gute Möglichkeit, die Schnittstellen zwischen Design und Entwicklern effektiver und besser zu gestalten. Es gibt bereits eine große Anzahl an verschiedenen Apps und es werden wohl weitere hinzukommen. Es bleibt spannend, ob Software Hersteller wie Adobe oder Bohemian Coding (Sketch) eigene Lösungen anbieten, die ein weiteres Tool eventuell sogar überflüssig machen würden.