Anzeige
Anzeige
How-To
Artikel merken

Versionskontrolle für Webdesigner: So wird die Finalisierung von Projekten einfacher

Endlich gibt es für Webdesign und App-Entwicklung eine Versionskontrolle, die so gut ist wie Github oder Gitlab – wenn Designer und Design-Teams ihren Workflow etwas umstellen. Eine Anleitung für ein Versions-Management.

Von Justin Schüer
8 Min. Lesezeit
Anzeige
Anzeige

(Shutterstock: Anastasia_B)

Was mit „Website_FINAL_01“ einmal begann, endet nicht selten mit „Website_FINAL_FINAL!!11!“. Welcher Designer kennt das nicht: Eine Finalversion reiht sich an die andere.  Seit jeher gehört dieser Versionsdschungel zum Alltag eines Webdesigners. Doch wo ein Designer in einem kleineren Projekt vielleicht noch durchblickt, ist so etwas bei größeren, komplexeren Projekten mit womöglich mehreren Designern eine richtig lästige Angelegenheit. Natürlich gibt es ebenso regelmäßig den guten Vorsatz, das Problem zu beheben – entweder mit Hilfe einer eigenen Namenskonvention in Verbindung mit beispielsweise Dropbox oder durch eine Software-Lösung für die Versionierung. Wirklich zuverlässig und hilfreich waren die bisher aber nicht. Vor allem die Größe üblicher Designdateien macht eine simple Adaption der Git-Technologie – wie sie die Software-Entwicklung für die Versionskontrolle nutzt – durchaus kompliziert.

Anzeige
Anzeige

Doch nun die gute Nachricht: Gleich mehrere Tools wollen es geschafft haben, die Versionskontrolle optimal aus der Software-Entwicklung in den Designkontext zu übertragen. Aktuell beschränken sich diese allerdings noch auf Sketch – ein für UI-Design optimiertes Programm, das ausschließlich Mac-Nutzern zur Verfügung steht (Photoshop-Anwender müssen dagegen weiter auf Lösungen von Adobe hoffen). Dabei hat sich das erst 2017 erschienene und auf Git basierende Abstract schnell zum Platzhirschen aufgeschwungen. Doch zunächst eine kleiner Exkurs zu den Grundlagen der Versionskontrolle.

Versionskontrolle: so funktioniert’s

Das Prinzip der Dateienversionierung ist im Grunde simpel: Eine Software kennzeichnet alle Änderungen in einer Datei und protokolliert sie nachvollziehbar. Dabei speichert sie mehrere ­Versionen von „Datei-01“ im Hintergrund. Nutzer können somit einen bestimmten Stand zu einem späteren Zeitpunkt wiederherstellen oder auch nur einzelne Teile daraus verwenden. Eine Versionskontrolle knüpft an die Versionierung der Dateien an und erleichtert die Zusammenarbeit mehrerer Teammitglieder. So können zum Beispiel zwei Menschen gleichzeitig an derselben Datei arbeiten und diese zu einem bestimmten Zeitpunkt miteinander abgleichen.

Anzeige
Anzeige

Die detaillierte Änderungsverfolgung hilft dabei nachzuvollziehen, wer was wann verantwortet hat. Zudem können sie auch einzeln kommentiert werden. (Screenshot: Abstract)

Die Versionsverwaltung ist in diverse, baumähnliche Bereiche unterteilt – generell hilft das Bild des Baumes, um sie besser zu verstehen. Der gesamte Baum und allgemeine Ausgangspunkt ist die sogenannte „Repository“. Sie sammelt alle Dateien. Der Baumstamm der Versionskontrolle ist der sogenannte „Master“. Er ist immer die primäre Quelle der Dateien und trägt daher auch die Bezeichnung „Single Source of Truth“. Dort sollte immer der aktuellste Stand liegen. Vom Master ausgehend sind so genannte „Branches“ (Abzweigungen) möglich – die Äste des Baums. Hier findet die eigentliche Arbeit statt. Innerhalb eines oder mehrerer Branches können Designer allein oder im Team an ein oder auch mehreren Dateien (gleichzeitig) arbeiten. Änderungen innerhalb einer Sketch-Datei speichern sie dabei wie gewohnt ab. Durch das Speichern allein übernimmt die Software die Änderungen jedoch nicht in den Branch. Erst durch das sogenannte „commiten“ (einchecken, übergeben) aktualisiert sich der Stand im jeweiligen Branch. Zusätzlich können Designer von einem Branch auch ein „Sub-Branch“ erstellen – was die Zweige des Astes wären. Dabei übernimmt die Software den Stand des übergeordneten Parent-Branches. Nachdem alle notwendigen Änderungen vorgenommen und commitet sind, muss der Designer den Branch in den Master „mergen“ – also überführen. Nur so ist die „Single Source of Truth“ auf dem aktuellsten Stand.

Anzeige
Anzeige

Branch, Commit und Merge mit Abstract

Abstract ist ein eigenständiger Mac-OS-Client und bietet ein relativ simples, intuitives User Interface für die Versionsverwaltung von Sketch-Dateien. Mithilfe eines automatisch installierten
Sketch-Plugins überwacht Abstract alle Änderungen in einer Datei und speichert diese als eine separate Version lokal und im Hintergrund ab. Der Nutzer bekommt von diesem Vorgang nichts mit. Jedoch muss er einige grundlegende Aspekte beachten, was eine Umstellung des Workflows bedeutet. Hierbei hilft Abstract-Einsteigern ein liebevoller How-to-Artikel im Comic-Stil auf der Abstract-Website.

 Konkret sieht der Workflow mit Abstract wie folgt aus: Zu Beginn muss ein Projekt in Abstract angelegt und die Sketch-Dateien – sofern diese bereits vorhanden sind – importiert werden. Ansonsten können Dateien auch direkt aus Abstract erstellt werden. Dabei erzeugt Abstract automatisch den Master – die „Single source of truth”. Um die Datei zu bearbeiten, legen
Designer zuerst einen neuen Branch an, indem sie im Menü „New Branch” einen Namen vergeben (beispielsweise „App Design Kickoff”). Es empfiehlt sich, die Branches anhand der jeweiligen Funktionen, Bereiche oder Iterationen zu erstellen. Daraufhin erzeugt Abstract eine Eins-zu-Eins-Kopie des Masters.

Anzeige
Anzeige

Um nun mit der eigentlichen Arbeit zu beginnen, müssen Designer die Dateien immer via Abstract und den Menüpunkt „Edit file in Sketch“ öffnen. Tun sie dies nicht, kann Abstract die Änderungen auch nicht erkennen, commiten und abgleichen. Sobald es erste Änderungen in der Datei gibt, die der Nutzer wie gewohnt speichert, zeigt das Abstract-Plugin am unteren Rand von Sketch die Info „Preview and Commit“. Per Klick auf diesen Button exportiert Sketch den neuen Stand der Datei in Abstract, zeigt eine Vorschau aller Artboards und öffnet das sogenannte „Commit Overlay“.

Jede Änderung muss erst durch einen Commit bestätigt werden, bevor sie in den Master überführt wird. (Screenshot: Abstract)

Jeder Commit sollte einen kurzen, möglichst aussagekräftigen Titel erhalten, zum Beispiel „Button-Farbe angepasst”. Dazu sollte eine optionale Beschreibung kommen wie „Aus Grün wird Rot”. Auch der Text im Bereich „Commit Message“ sollte so konkret wie möglich sein, damit Team-Mitglieder die Nachricht nachvollziehen können. Nachdem ein Designer den ersten Commit erstellt hat, protokolliert Abstract ihn in der linken Spalte und zeigt ihn auf der rechten Seite im Hauptbereich an. Später können alle im Team jederzeit auf jeden beliebigen Commit zugreifen und auch wiederherstellen. Alle Dateien speichert Abstract dabei lokal in einem temporären, von ihm erstellten Ordner und synchronisiert sie nach jedem Commit mit den Abstract-Servern. Nachdem alle notwendigen Änderungen vorgenommen und commitet sind, muss der Designer den Branch „App Design Kickoff“ in den Master mergen, sodass Abstract alle Branches von dort aus aktualisieren kann.

Abstract im Team

Am interessantesten ist Abstract sicherlich dann, wenn mehrere Designer gemeinsam an ein oder mehreren Dateien arbeiten. Hier zeigt die Lösung ihre wahren Stärken und Vorzüge. Meist legt ein Designer die erste Datei in Sketch an, alle anderen kopieren sich diese anschließend, um von nun an gleichzeitig daran zu arbeiten. Oder, noch schlimmer, sie arbeiten nacheinander an derselben Datei und speichern ihren Stand in immer neuen Versionen ab. All dies ist mühselig und vor allem auch fehleranfällig.

Anzeige
Anzeige

Abstract ist hier der wesentlich bessere Weg. Der Workflow bleibt im Grunde wie oben beschrieben, Designer können zeitgleich an derselben Datei arbeiten – genau genommen ist es nicht dieselbe, da jeder eine automatisch erstellten Kopie der Ausgangsdatei erhält. Außerdem kann jeder Designer in eigenen Branches und Sub-Branches arbeiten. Sobald ein Designer beispielsweise mit der Arbeit an einem Feature oder einer Änderung fertig ist, kann er den Branch sowie den Sub-Branch zusammenlegen und somit den Master oder Parent-Branch aktualisieren. Alle Änderungen hebt Abstract dabei hervor.

Nun kann es natürlich passieren, dass zwei Designer gleichzeitig am selben Element arbeiten. In diesem Fall ist leider noch immer etwas Handarbeit und ein gutes Auge notwendig. Abstract erkennt die Unterschiede in beiden Dateiversionen und zeigt sie in einer Vergleichsansicht. Anschließend muss manuell angegeben werden, welche Version korrekt ist. Die nicht gewählte Änderung verwirft Abstract, sie ist somit nicht mehr in der aktuellsten Dateiversion. Besser ist es – selbst mit der smartesten Versionskontrolle – das Team spricht sich vorher ab, wer wann woran arbeitet. Damit erspart es sich so ein Szenario.

Wo es noch mehr Potenzial gibt

Abstract hilft einzelnen Designern und auch Design-Teams, ihren Workflow zu optimieren. Dennoch läuft auch in einem so guten Werkzeug wie Abstract nicht alles perfekt oder immer so, wie man sich das vorstellt. Hin und wieder haben App und Plugin so ihren Schluckauf. Das führt dazu, dass Sketch abstürzt oder das Werkzeug relativ lange für die Synchronisierung der Dateien braucht. Gerade sehr große Sketch-Dateien, die 100 Megabyte und größer sind, können die Performance beim Hoch- und Herunterladen beeinträchtigen. Der aktuelle Stand der Arbeit ist aber immer lokal gespeichert und, über einen temporären Ordner,direkt aus Abstract erreichbar.

Anzeige
Anzeige

Dazu kommt das Thema Datenschutz: Wie viele andere Dienstleister aus den USA speichert auch Abstract die Dateien zur Synchronisation in der Cloud. Dabei greift es auf AWS von Amazon zurück. Somit ist nicht garantiert, dass Dateien auf deutschem Boden bleiben. Sind Datenschutz und Sicherheit in einer Firma ein wichtiges und sensibles Thema, sollten Designer wohl abwägen, ob Abstract die richtige Lösung ist. Im Zweifelsfall muss es bis Mitte diesen Jahres warten, denn dann soll die Enterprise-Lösung erscheinen, die Unternehmen selbst hosten können.

Darüber hinaus ist das Konflikt-Magement von Abstract noch ausbaufähig. Bei so genannten „Non-Visual Changes“ – also etwa minimalen Positionsänderungen eines Elements – kann es noch recht mühsam sein zu entscheiden, welche Version denn nun die richtige ist. Meist sind dies dann aber auch zu vernachlässigende Abweichungen. Abstract-CEO Josh Brewer hat beim Sketch Hackathon in Berlin aber auch schon Optimierungen in diesem Bereich versprochen.

Alternativen zu Abstract

Abstract ist kostenpflichtig: 9 US-Dollar im Monat pro Nutzer. Neben Abstract gibt es noch ein paar andere, nennenswerte Lösungen und Plugins für die Versionsverwaltung mit Sketch. Sie alle bauen auf demselben Grundprinzip auf und sind daher auch im Handling ähnlich. Sie unterscheiden sich jedoch teilweise in den Funktionen und auch bei den Kosten.

Anzeige
Anzeige

Plant

Plant ist – im Gegensatz zu Abstract – ein reines Plugin, das sich in der rechten Spalte von Sketch einnistet. Das ist einerseits praktisch, da Designer so jederzeit alle Funktionen direkt auswählen können. Andererseits ist es aber auch umständlich, weil es an der gleichen Stelle wie andere Plugins „sitzt“ – etwa „InVision Craft“ – und somit relativ viel Platz einnimmt. Außerdem zeigt Plant die eigentlichen Dateien und Änderungen aktuell nur in der Web-App. Plant setzt ebenfalls auf ein Abomodell. Die kostenlose Version ist auf wenige Projekte und Nutzer beschränkt, die Pro-Versionen beginnen bei 12 US-Dollar im Monat.

Kactus

Kactus ist eine Mac-App des Programmierers Mathieu Dutour, der seit 2017 zum Kern-Entwicklerteam von Sketch gehört und schon zuvor diverse Plugins geschrieben hat. Anders als Abstract oder Plant setzt Kactus einen Github-Account und grundlegende Git-Kenntnisse voraus. Die App selbst macht einen recht übersichtlichen Eindruck und ist stark an das Github-Interface angelehnt. Neben der Gratis-Version gibt es eine Premium- und eine Enterprise-Version für 5 sowie 12 US-Dollar pro Monat.

Fazit

Vor allem Teams sollten für die Einführung von Abstract oder einem anderen Versionierungswerkzeug gemeinsame Workshops zu den Grundlagen und den Änderungen des Workflows durchführen. Je weniger Erfahrung Designer mit dem Prozess der Versionskontrolle haben, desto ungewohnter und schwieriger kann der Einstieg sein. Es lohnt sich daher auf jeden Fall, alle abzuholen und eine gewisse Grundstruktur zu definieren, an der sich das gesamte Team orientieren sollte. Doch die Mühe lohnt sich. Denn es gibt nun endlich adäquate, zeitgemäße und performante Lösungen für Webdesigner.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige