Reibungslosere Projekte mit Sketch und Versionkontrolle

Dies ist eine Zusammenfassung eines Vortrags, den Andree, unser Director Experience Design bei blended.io 2016 auf dem UX Camp Berlin gehalten hat. Der originale Artikel in English findet sich hier.

Design-Werkzeuge verändern sich aktuell grundlegend. Man könnte argumentieren, dass die Technologie die Designwelt frisst, um Marc Andreessen zu paraphrasieren, der bekannterweise sagte: "Software eats the world" in 2011.

(Pssst: blended.io startet zwei Workshops: Version-controlled Sketch for Skillful Designers & Design Teams & Git for Marvellous Designers )

Ein Designer, der den Vortrag im UX Camp Berlin 2016 gesehen hat, skizzierte diese Zusammenfassung.

Ein Designer, der den Vortrag im UX Camp Berlin 2016 gesehen hat, skizzierte diese Zusammenfassung.

Design-Tools werden immer "technischer Know-how". Damit möchte ich umschreiben, dass Design Tools und vor allem Sketch, dem Designer verstärkt technische Entwicklung ermöglichen ohne dabei technisch zu sein. Der Designer nimmt somit dem Entwickler sehr viel Arbeit ab. Ein neuer Artikel darauf ein, wie Visual Designer mehr und mehr Frontend-Entwickler sind.

warum github.com so beliebt ist

Soweit ich der Lage war, habe ich in Gesprächen lediglich herauszufinden können, dass Versionskontrolle Designern nicht viel sagt.

Deshalb hier eine sehr kurze Erklärung: Versionskontrollsysteme (VCS) zeichnen die Veränderungen von Informationen (z.B. in einer Datei) auf. Das populärste System, das heute bei Start-ups und kleineren Unternehmen eingesetzt wird, ist die Open-Source-Technologie Git. GitHub.com war die "erste" Firma, die Git ins Web gebracht und bekannt machte. Dies ist einer der Gründe, warum der Dienst in Entwicklerkreisen so beliebt ist.

GitHub.com war die "erste" Firma, die Git ins Web brachte und bekannt machte.

Ein VCS verfolgt Änderungen in beliebigen Datei (-typen), seien es einfache Textdokumente oder sogar Bilder. Hierbei gibt es zwei Arten von Dateien: Solche, die man im Text Editor öffnen und lesen kann und solchen, welche zwar zu öffnen sind aber Binärcode enthalten. Typische Code-Dateien enthalten reinen, lesbaren Text. Das Nachverfolgen von Änderungen in Textdateien ist sehr einfach. Binäre Informationen in proprietären Formaten (PSDs) sind ein Grund, warum Designer ihre Arbeit nicht mit solchen Systemen tracken.

Screenshot A: Versionskontrollsysteme protokollieren die Änderungen an Dateien und visualisieren sie wie oben gezeigt.

Screenshot A: Versionskontrollsysteme protokollieren die Änderungen an Dateien und visualisieren sie.

Um zu sehen, wie ein VC Textänderungen aufzeichnet und wie diese Änderungen visualisiert werden, öffne DiffChecker.com und kopiere einen Text, den Sie zur Hand haben, in das linke und rechte Textfeld. Dann änder einige Wörter oder Sätze auf der rechten Seite. Drücke "Find Difference". Et voilà.

Die Art und Weise, wie DiffChecker die effektiven Änderungen darstellt, die Sie auf der rechten Seite vorgenommen haben, ist sehr ähnlich der Art und Weise, wie VCS (z.B. auf GitHub oder Bitbucket) Änderungen visualisieren. Wenn du das nächste Mal eine überarbeitete Version eines Vertrags bekommst, kopiere und füge einfach Altes und Neues in DiffChecker. So findest du schnell die Unterschiede.

Screenshot B: Zeigt unser blended.io-Repository auf GitHub.com. Ich habe die Adresse aktualisiert, nachdem unsere Firma umgezogen ist: Die alte Adresse ist rot hervorgehoben, die neue Adresse grün markiert.

Screenshot B: Zeigt unser blended.io-Repository auf GitHub.com. Ich habe die Adresse aktualisiert, nachdem unsere Firma umgezogen ist: Die alte Adresse ist rot hervorgehoben, die neue Adresse grün markiert.

kollaboration ist das entscheidende verkaufsargument

Warum setzen Ingenieure solche Werkzeuge ein? Der Hauptaspekt ist die Zusammenarbeit. Mit VCS können Teams an immer größeren Codebasen zusammenarbeiten. Die Änderungen, die ein Ingenieur lokal in einer Datei vornimmt, werden schließlich in das Haupt- (Remote-) Projekt (oder Repository in Nerd-Begriffen) eingespielt. VCS ermöglichen es auch vielen Ingenieuren, an einer einzigen Datei zu arbeiten und die Änderungen aller Beteiligten in die Hauptquelle einzubinden. Da jede Änderung protokolliert wird, kann jeder, der Zugriff auf das Repository hat, überprüfen, was sich in letzter Zeit (oder vor einem Monat) geändert hat. Ein Feature von VCS ist auch die Änderungen rückgängig zu machen, die kürzlich vorgenommen wurden, um z.B. einen Fehler aus dem Code zu entfernen, der mit neuen Änderungen eingeführt wurde.

Screenshot C: Designer erstellen eine Reihe von Kopien von Dateien, wenn sie Änderungen vornehmen; Entwickler verwenden Versionskontrolle, die alle Änderungen verfolgt und speichert, in einer Datei.

Screenshot C: Designer erstellen eine Reihe von Kopien von Dateien, wenn sie Änderungen vornehmen; Entwickler verwenden Versionskontrolle, die alle Änderungen verfolgt und speichert, in einer Datei.

designer und kollaborative versionskontrolle?

So wie Ingenieure in Teams arbeiten, so tun es auch Designer. Aber aus irgendeinem Grund hat die kollaborative Versionkontrolle niemals Anwendung gefunden. Warum ist das so?

Bei einem Gespräch im vergangenen Jahr stellte ein Kollege fest, dass sein Team bei ihrer Designarbeit nicht wirklich auf frühere Versionen zurückgreifen.

Tatsächlich tun das weder Software-Ingenieure oft. Aber warum setzen Designer nicht auf VCS? Ich denke, ein Grund dafür ist, dass die Designteams in der Regel kleiner sind und aus 1-2 Designern bestehen. Im Hinblick auf die "digitalen Transformation", so sollte klar werden, dass Designteams aber nicht lange klein bleiben bleiben.

Darüber hinaus schätze ich, dass Designer von sich denken, dass sie in erster Linie Kreative sind und dass daher systematische Prozesse ihrer Kreativität entgegenwirken. Nun, ich habe noch keine Designteams gesehen, die keinem Prozess verfolgen. Vielleicht ist es aber auch nur die Art von Design Tool, die sie davon abhält?

Betrachtet man jedoch die Bewegung der "digitalen Transformation", so sollte klar werden, dass Designteams nicht lange klein bleiben werden.

In der Tat, und wie wir weiter unten sehen werden, gibt es (oder waren) auch technische Einschränkungen. Da die typische Designdatei auf binären Daten (kein Klartext) beruht, lässt sich ein Textvergleich nicht so einfach machen. Ein weiteres Problem macht die Sache für Designer noch komplizierter: Die Tonnen von pixelbasierten Daten, die erstellt wurden, gepaart mit einer langsamen Internetverbindung, macht selbst VCS zu schaffen. Glücklicherweise sind langsame Internet-Verbindungen nicht so das Problem. Und wie wir in einem neuen Beitrag sehen werden, sind auch Pixel-basierte Daten nicht mehr das zentrale Problem.

designer können zeit und aufwand reduzieren

Stellen wir uns ein typisches Web- oder Mobile-Projekt vor. Der Designer hat das Interaktionsdesign für die Anwendung abgeschlossen und lässt seine Kollegen in der Entwicklung mit dem Aufbau der gesamten UI-Struktur beginnen. Die Entwickler bemerken einen Flow, der aus technischen Gründen nicht so realisiert werden kann. Der Entwickler nimmt entsprechende Änderungen vor. Jetzt muss auch der Designer noch Änderungen vornehmen.

Wie findet der Designer heraus, welche Details sich geändert haben? Nun, sie öffnet beide Dateien, die alte und die neue, und versucht die Unterschiede zu finden. Selbst mit Tools wie Invision werden wird man auf ähnliche Problem stoßen. Der Screenshot unten zeigt, wie schmerzhaft der Prozess sein kann. Diese Arbeit macht nicht viel Spaß und ist eine echte Zeitverschwendung.

Screenshot D: Das rechte Rechteck zeigt an, wie groß der Canvas ist. Der Designer sucht mühselig nach Änderungen. Nicht viel Spaß und totale Zeitverschwendung.

Screenshot D: Das rechte Rechteck zeigt an, wie groß der Canvas ist. Der Designer sucht mühselig nach Änderungen. Nicht viel Spaß und totale Zeitverschwendung.

wie ingenieure vcs täglich einsetzen

Da eine detaillierte Anleitung zu VCS nicht im Mittelpunkt dieses Beitrags steht, hier ist lediglich eine kurze:

Schritt 1: Eine Entwicklerin nimmt Änderungen an einer Datei im Repository (dem Projektordner) vor.

Schritt 2: Sie speichert die Änderungen lokal und protokolliert diese dann mit dem Versionskontroll-Tool über eine kurze Nachricht, z.B. "Change header height to 56px". Dieser Schritt wird technisch als "making a commit" bezeichnet.

Schritt 3: Dann speichert sie die Änderungen (Commit) im lokalen Projekt. Wenn sie fertig ist, lädt sie den aktuellen Status (Push) ihres lokalen Projektordners (das Repository) in den Remote-Projektordner auf z.B. GitHub.com oder Bitbucket.com hoch.

Sobald sie ihre Änderungen vorgenommen hat, kann jeder andere den neuen Status des Projektordners in seinen lokalen Projektordner herunterladen (Pull). Obwohl technisch nicht ganz korrekt (aber um es vorerst einfach zu halten) wird dieser Download den lokalen Projektordner überschreiben. In Theorie einfach, ist es in der Praxis immer etwas komplizierter.

Screenshot E: Der Bildschirm oben zeigt, dass zwei Ingenieure drei Änderungen am 7. November und fünf Änderungen am 3. November vorgenommen haben. Es zeigt auch die Commit-Meldung neben dem Avatar an.

Screenshot E: Der Bildschirm oben zeigt, dass zwei Ingenieure drei Änderungen am 7. November und fünf Änderungen am 3. November vorgenommen haben. Es zeigt auch die Commit-Meldung neben dem Avatar an.

was sind die vorteile für die designer

  • Einfacher und besser kommunizieren, was mit den Layouts oder Designspezifikationen erreicht werden soll.

  • Verstehe den Entwickler besser, spreche seine Sprache.

  • Verstehe die Gründe dafür, warum ein technischer Algorithmus "auf diese Weise" ausgeführt wird.

  • Sei emphatischer

  • Bring alle im Team schneller auf den neuesten Stand.

  • Garantiere, dass deine Ingenieure wichtige Teile in Design-Spezifikationen nicht verpassen.

Ein großer Teil eines jeden digitalen Projekts ist die mündliche oder schriftliche Kommunikation. Während meiner mehr als 15 Jahre in der Industrie habe ich selbst erlebt, dass Details nicht unbedingt klar verstanden werden. Verkaufen nicht Designer, dass Empathie eine Eigenschaft ist, die sie beherrschen? Warum also nicht zuerst mit unserem eigenen Prozess und Toolset beginnen, bevor wir anderen die Schuld zuschieben?

Designer im Jahr 2017/2018 verwenden immer noch arkane und uralte manuelle Methoden, um einfache Dinge zu tun, die fehleranfällig und repetitiv sind, welche Entwickler als WET und nicht DRY beschreiben würden. Das DRY-Prinzip zielt auf eine Reduzierung von Wiederholungen und Informationen ab, ein Prinzip, das auch Designern zugute käme.

Ich habe Ingenieure gesehen, die sich die Köpfe zerkratzen, warum Designer auf "solche alten Methoden" zurückgreifen.

VCS hilft Entwicklern, den Zeitaufwand für die Erstellung von Spezifikationen und Dokumentationen zu reduzieren. Ich habe viele Entwickler gesehen, die sich den Kopf kratzen, weil die Designer in der Regel immer wieder auf "uralte Methoden" zurückgreifen - Methoden, die auch automatisiert werden können.

Automatisierung ist ein weiterer Grundsatz, auf den Ingenieure schwören. Ingenieure wollen nichts manuell machen, also haben sie alles automatisiert. Dieser Ansatz ist sicherlich nicht auf Schritt und Tritt geeignet, spart aber oft Zeit. Wir haben die Werkzeuge zur Hand, warum machen Designer also immer noch Dinge manuell? Dieses an sich ist ein Thema für einen anderen Beitrag, aber lassen Sie uns die Vorteile weiter erforschen.

VCS führt zu einer leichtgewichtigen Dokumentation, die on-the-fly erstellt werden, damit jeder sie sehen und verfolgen kann. Stell dir vor, dass nach einiger Zeit der Senior Designer, der an einem Projekt gearbeitet hat, krank wird und durch einen neuen ersetzt werden muss. Mit der leichtgewichtigen Dokumentation, kann sich der neue Mann oder Frau schnell und einfach auf den neuesten Stand bringen.

VCS gleicht die Terminologie an, die in Design- und Engineering-Teams verwendet wird, da sie es den Designern ermöglicht, einen Engineering-Prozess besser zu verstehen. Kümmert es einen Designer was passiert, wenn seine Definitionen als PDF exportiert und an das Engineering gesendet werden?

Nun, das sollten sie. Wenn ein Designer verstehen kann, wie ein Ingenieur täglich seine Arbeit verrichtet, wird der Designer besser verstehen, wie er die Definitionen am besten zur Verfügung stellen kann, so dass jedes Detail am besten kommuniziert wird.

ein besseres verständnis

Ein besseres Verständnis führt zu einer reibungsloseren und direkteren Feedback-Schleife zwischen den Teams und senkt die unsichtbaren Barrieren, die zwischen verschiedenen Teams und Personen bestehen. Es weckt Einfühlungsvermögen für Ihre Kollegen oder technischen Produktmanager.

Die Nutzung der Funktionen, die VCS bietet, verkürzt und beschleunigt die Zeit, die Designteams benötigen, um Dinge zu erledigen und zu definieren. Die eingesparte Zeit bietet mehr Raum für Kreativität oder Definition. Ich gehe davon aus, dass dies etwas ist, worüber sich jeder Designer freuen würde.

Auf technischer Ebene werden die Konstrukteure auf Wunsch langsam aber sicher das Handwerk und die Werkzeuge erlernen, die von den Ingenieuren verwendet werden. Sie werden in der Lage sein, zum Beispiel Bitbucket oder GitHub auf eigene Faust zu öffnen und herauszufinden, was in die Produktion gepusht wird, möglicherweise sogar hineingehen und selbst Änderungen an Design oder Code vornehmen. Deine Entwickler werden dich lieben, weil du in der Lage bist, eine Farbe oder Größe selbst zu ändern, anstatt neben ihnen zu sitzen und zu warten dass sie es machen.

warum wir so begeistert sind

Sketch ist "das neue Kind auf dem Block", das den Weg weist. Die Entwickler haben es von Grund auf mit dem Gedanken entwickelt, dass Entwickler von Drittanbietern in der Lage sein sollten, Features (über Plugins) hinzuzufügen. Das ist natürlich nichts Neues, aber immer noch genial. Das einzige Problem, das wir bisher in Bezug auf Plugins erlebt haben, ist, dass einige Entwickler nicht mit neuen Versionen von Sketch mithalten können, aus Gründen des fehlenden Interesses oder finanziellen. Aber die Leute fangen an, eine Paywall einzurichten, die dazu beitragen wird, dass die Leute daran interessiert sind, ihr Plugin zu aktualisieren.

Screenshot A: Versionskontrollsysteme protokollieren die Änderungen an Dateien und visualisieren sie wie oben gezeigt.

Screenshot A: Versionskontrollsysteme protokollieren die Änderungen an Dateien und visualisieren sie wie oben gezeigt.

Der Hauptgrund, warum wir so aufgeregt sind, ist folgender: SVG-Dateien werden heutzutage überall verwendet. Eine SVG-Datei ist eine reine Textdatei. Obwohl der Inhalt einfach bearbeitet werden kann, ist es nicht möglich, ihn zu interpretieren und zu verändern, um ein anderes Ergebnis zu erzielen. Nun möchte ich darauf hinweisen, dass Klartext eine bestimmte Form beschreibt, die vom Browser nach bestimmten Regeln interpretiert wird. VCs verfolgen Änderungen an einfachen Textdateien im Laufe der Zeit, die für Menschen lesbar sind. Stellen Sie sich vor, dass ein Werkzeug, und ich gehe davon aus, dass Sketch sehr bald in der Lage sein wird, Designern und Ingenieuren erlaubt, jede visuelle Form mit einfachen Regeln zu beschreiben, die für den Menschen verständlich sind.

Die Kombination, die Sketch bietet, d.h. ein vektorbasiertes Werkzeug mit Quelldateien, die von Menschen gelesen und verstanden werden können, ist nun vorhanden. Allerdings erlaubt Sketch ab Ende 2016 nur den Export von Daten im JSON-Format. Das Problem für jetzt ist, dass es nicht erlaubt, eine Sketch-Datei basierend auf JSON zu erzeugen. Ich habe jedoch das Gefühl, dass das Team hinter Sketch dies sehr bald umsetzen wird. Ein solches Werkzeug würde die Kluft zwischen Design und Code schliessen. Wir sind gespannt.

Baaaam: Die Übersetzung von JSON <> Sketch) ist jetzt möglich, lies Design Is Code & Code Is Design

(Pssst: blended.io startet zwei Workshops: Versionskontrollierte Skizze für geschickte Designer & Designteams und Git für wunderbare Designer)

• • •

Thanks for reading. We at blended.io are incredibly excited and passionated about the potential innovative leaps for software design and engineering in fintech, investtech and industry 4.0. Get in touch

Stay on the edge

Get hands-on articles about innovation, experience design or engineering! No spam and worthwhile content only.