Kampf dem Versions-Chaos! Wie wir mit Sketch und Abstract kollaborativ arbeiten

Kampf dem Versions-Chaos! Wie wir mit Sketch und Abstract kollaborativ arbeiten

21. September 2017 | von Jessica Müller

Es ist ein wenig stiller geworden hier. Wir schreiben einfach zu viel – in unserem internen Blog. Genau dort erklärten uns Jess und Janni kürzlich, wie sie Versions-Chaos vermeiden und trotzdem an den gleichen Dateien arbeiten. Weil euch das auch interessieren könnte, leaken wir heute unser interes Blog und erzählen, mit welchen Tools und Workflows unsere Designerinnen stressfrei zusammenarbeiten:

OMG! Versions-Chaos!

Für Entwickler ist es ein alter Hut – Versionsverwaltung. Zu vorigen Arbeitsständen zurückkehren und kollaborativ an denselben Dateien arbeiten zu können, ist wichtig für uns als teilweise dezentral arbeitendes Team. Wir alle nutzen diese Funktion ganz selbstverständlich, wenn wir gleichzeitig an Google Docs oder Spreadsheets herumwerkeln.

Wir Designer nutzen andere Tools. Adobe-Programme oder Sketch sind nicht textbasiert, sondern jonglieren teils mit riesigen Datenmengen. Synchron an einer Datei arbeiten? Schwierig. In Google-Drive werden mehrere Versionen abgelegt, wenn verschiedene Personen gleichzeitig an einer Nicht-Google-Datei arbeiten. Einzelne Vorreiter-Tools wollten Kollaborationen möglich machen, scheiterten aber an der Realität und Nutzerfreundlichkeit. Und wir möchten in Konzeption und Screendesign auch nicht mehr auf Sketch verzichten.

Was ist eigentlich dieses Sketch und warum ist es so toll? Ein kurzer Exkurs.

Adobe macht gute Programme, keine Frage. Doch die Stärke der Programme ist gleichzeitig eine Krücke: Sie sind so mächtig und breit aufgestellt, dass sie in einzelnen Spezialgebieten dann doch nicht alle Funktionalitäten abdecken. „Responsive Design” heißt, gestalten für verschiedenste Größen und Formate. Wenn man Buttons oder andere Elemente für jede Bildschirmbreite wieder neu anlegen muss, so wie das in pixelbasierten Adobe-Produkten eben passiert, ist das sehr zeitraubend. Weiterer Knackpunkt: Adobe schafft nicht die Brücke zwischen Pixeln und Vektordaten – wir müssen uns immer für einen Weg entscheiden.

Nicht so bei Sketch. Sketch exportiert und importiert sowohl Pixel als auch Vektoren, spielt verschiedenste Formate mit einem Klick aus und hat eine clevere Funktion: Symbole. Symbole können überall innerhalb der Datei referenziert werden und wenn dann am Symbol etwas verändert wird, wird die Änderung in allen referenzierten Instanzen übernommen. „Naja“, sagt ihr jetzt, „das ist doch das gleiche wie Smart Objects bei Adobe!“ Jaja, Moment! Das beste kommt erst noch. Mit ein paar Klicks bauen wir in Sketch ein responsives Modul nach, das sich in unterschiedlichsten Bildschirmgrößen flexibel anwenden lässt.

Symbole flexibel anpassen mit Sketch

Wir bauen ein Element also nur noch ein Mal und passen es dann flexibel auf alle erdenklichen Größen an. Und dann kann man Symbole auch noch verschachteln, innerhalb eines Moduls austauschen … Es spart Unmengen von Zeit und macht responsives Design viel einfacher!

Ein Videobeispiel zur Anpassbarkeit von Symbolen
Noch ein Videobeispiel zur Anpassbarkeit von Symbolen

So weit, so praktisch – und was hat das mit Versionsverwaltung zu tun?

Sketch bietet viele gute Funktionen – aber kollaborative Nutzung leider nicht. Bei Git oder bei Google wird automatisch die Arbeit der Einzelnen in eine Datei zusammengeführt. Was machen wir Designer? Bisher legte jeder seine eigene Datei an und einer von uns hatte die glorreiche Aufgabe, die Dateien von Hand zusammenzuführen und Unterschiede zu vereinheitlichen. Wenn man was übersieht? Pech gehabt. Wenn Sketch dabei Dopplungen anlegt? Mehr Arbeit, das aufzuräumen.

Beim Relaunch der Website der Verlagsgruppe Rhein-Main – gestalterisch und konzeptionell ein kleines Mammutprojekt – haben vielleicht zum ersten Mal überhaupt alle Designer am selben Projekt gearbeitet. Entsprechend sahen unsere Dateien dann so aus:



Hunderte Wireframes, über 80 Symbole im Screendesign … und jedes Mal führte Janni mit viel Geduld und Mühe (und dem ein oder anderen Ausraster über alle Probleme und Fehler und Sketch-Bugs) die Dokumente zusammen. Wir werkelten und exportierten und merkten alle: Das ist super zeitaufwändig und nervenaufreibend und keine Lösung für die Zukunft.

We <3 Abstract!

Ganz zufällig lief uns ein neues Add-on für Sketch über den Weg: Abstract! Schon Anfang 2017 ließen wir uns auf die Mailingliste für potentielle Tester der Closed Alpha setzen – im Juni war es dann soweit und wir bekamen unseren Testaccount.

Der erste Test am realen Projekt kam schnell – und zwar kollaborativ. Alle Ansichten liegen in Abstract ab, wir können dort den Projektverlauf kommentieren und gestalterische Entscheidungen dokumentieren (und beim „Branches mergen“ eine Anglizismenparty im Kopf feiern).

Screenshot Abstract

Das Tool erkennt automatisch, welche Teile bearbeitet wurden und welche neu hinzugekommen sind (sichtbar an den blauen und grünen „Added“ und „Edited“-Statusanzeigen), nur selten muss man mal einen Konflikt von Hand lösen. Und selbst wenn, ist das sehr einfach und schnell gemacht. Die Zusammenarbeit hat damit prima funktioniert – viel einfacher, als hätte man alles manuell synchronisieren müssen.

In der Gesamtwertung vergeben unsere Designerinnen dafür fünf von fünf Punkten – und wir sind mittlerweile begeisterte Kunden. Nie wieder Synchronisationsprobleme! Hoffentlich.

Kommentare

Senf dazu?

Es gibt noch keine Kommentare.

Senf dazu!

Mehr Lesestoff

Zurück nach oben