Abstract Vol.2

Wir sagen der Steinzeit adé!

In unserem ersten Teil dieser Serie habe ich erklärt was Abstract ist und warum wir es benutzen. Da diese Plattform sehr umfangreich ist, schauen wir uns heute den Workflow mit Sketch an. Denn die wirkliche Power von Abstract verbirgt sich hier.

Wir Designer sind von gestern!

Wenn ich mich hier im Büro so umschaue und sehe wie die Developer Kollegen im Team an Projekten arbeiten (git, bitbucket und Co.), und was wir sonst noch für tolle Software nutzen um bei VOLL zu arbeiten und zu kommunizieren (zum Beispiel Jira und Slack), dann muss ich gestehen, dass ich die letzten Jahre als Designer in der Steinzeit verbracht habe. Und ich glaube das geht nicht nur mir so, sondern vielen anderen Designern, Grafikern und Mediengestaltern auch. Mal ehrlich, wenn wir Designer immer so „up-to-date“ und „trendy“ sind, warum haben uns dann die Entwickler überholt? Abstract ist ein Tool das Workflows im Design Prozess implementiert die bei Entwicklern schon seit Jahren bestehen! Endlich können wir kollaborativ arbeiten ohne das man erst fragen muss: „Du, wo ist die aktuelle Datei?“ oder „Mach mal einer die Datei zu, ich muss da dran!“. Alles Sinnbilder für Probleme die auftreten wenn man im Team an einem Projekt arbeitet. Bis jetzt.

Was ist so anders?

Der Workflow an sich verändert sich. Arbeite ich mit Abstract habe ich Dateien nur temporär auf meinem Rechner liegen. Ich muss auch nicht auf den internen Server oder ein anderes Speichermedium zugreifen um dort erst Dateien zu suchen. Die Dateien an denen ich arbeite befinden sich in der Abstract Cloud. Öffne ich eine Datei, so wird sie bei mir temporär gespeichert und nach dem ich fertig bin, committe ich sie wieder zu Abstract. Fertig. Das hört sich natürlich jetzt so an als wäre Abstract ein Speicherdienst. Dem ist natürlich nicht so. Was passiert also genau? Um das zu verdeutlichen sehen wir uns einfach mal ein fiktives Projekt in Abstract an. Nehmen wir an es gibt eine Website an der verschiedene Änderungen gemacht werden müssen:

Wir gehen von einer Website aus, die mehrere Seiten hat. In Abstract liegt eine Sketch-Datei mit mehreren Unterseiten, plus einer Seite mit Symbolen die als Library dient (was das ist erklären wir euch im nächsten Teil). Man kann auch mit mehreren Dateien im Master arbeiten, dies empfiehlt sich aber eher bei sehr großen Projekten. Diese Datei ist unser Master. Und wird später das Design für die ganze Website.

VOLL Blog Post Image

Wenn nun jemand Änderungen oder Ergänzungen vornehmen will, erstellt er oder sie nun einen sogenannten Branch vom Master. In diesem Branch befinden sich alle Seiten, die auch im Master vorhanden sind. So ist es möglich, dass gleichzeitig mehrere Designer an der gleichen Datei arbeiten. Es kann auch ein Designer mehrere Branches gleichzeitig haben, um zum Beispiel eine bessere Übersicht der verschiedenen Tasks zu haben.

In unserem Beispiel habe ich nun im Branch „Produktseite erstellen“ einen ersten Entwurf für das Layout der Produktseite erstellt. Meine Änderungen lade ich zu Abstract hoch indem ich aus Sketch „committe“. Hier sieht man schon den Unterschied zum normalen „speichern“ und „hochladen“. Im folgenden Dialog-Fenster kann ich nun sehen welche Seiten sich zu der vorherigen Version geändert haben und werde aufgefordert zu beschreiben was ich gemacht habe. Ohne Beschreibungstext kann ich meine Änderungen nicht hochladen. Das ist super! Denn so zwingt Abstract mich dazu für andere verständlich zu beschreiben was passiert ist. Das ist für die spätere Historie wichtig.

In dieser Historie der Commits kann man nachverfolgen, welche Änderungen gemacht wurden und man bekommt angezeigt welche Seiten oder Elemente in diesem Schritt verändert wurden.

VOLL Blog Post Image

Sollte man zu einer früheren Version zurück wollen, weil sie einem zum Beispiel besser zusagt, so kann man dies tun indem man einfach auf den entsprechenden Punkt in der Timeline klickt. Et voilà: der alte Stand ist wiederhergestellt! Zusätzlich hat man hier und an anderen Stellen die Möglichkeit einen Zwischenstand zu kommentieren. Dies ist besonders in der Entwurfsphase wichtig, da es die Kommunikation und den Austausch vereinfacht. Nichts geht verloren und man kann sich verschiedene Korrekturschritte immer wieder ansehen und sogar vergleichen! Diese Kommentare tauchen dann aber nicht nur in der Historie auf, sondern auch gezielt dort wo man einen Entwurf markiert hat. Und wenn man immer up-to-date sein will, dann schaut man sich den Aktivitäten-Verlauf des gesamten Projekts an. Dort verpasst man nichts und kann auch auf Fragen oder Kommentare reagieren ohne jedes Mal den betreffenden Branch öffnen zu müssen.

VOLL Blog Post Image
Hurra! Konflikte!

Weiter mit meiner Produkt-Seite. Wenn diese nun fertig ist, ist es soweit sie in den Master zu mergen. Das ist jedes Mal sehr aufregend. Warum? Weil es in Projekten mit vielen Seiten und Designern auch mal zu Konflikten kommen kann. Zum Beispiel wenn ich etwas an einer Seite geändert habe, die im Master noch ganz anders aussah. Abstract warnt mich dann und zeigt mir beide Seiten nebeneinander, damit ich aussuchen kan welcher Stand beibehalten werden soll.

VOLL Blog Post Image

So wird vermieden, dass man aus Versehen eine Seite überschreibt an der man gar nichts ändern wollte oder sollte. In diesem Fall habe ich der Startseite eine Hintergrundfarbe gegeben, da sie im Master noch nicht hinterlegt war. Ich wähle aber die Seite ohne Hintergrundfarbe aus, da meine Kollegin dort schon Bilder ausgetauscht und andere Texte eingesetzt hat. Ich hinterlasse ihr einfach im nächsten Schritt einen Kommentar mit dem Hinweis, dass wir hier noch die Hintergrundfarbe ergänzen müssen. Dann gilt dieser Konflikt als gelöst und ich kann meine neu gestaltete Produktseite der Master-Datei hinzufügen.

VOLL Blog Post Image
Fazit:

Diese Arbeitsweise erspart uns Zeit und Nerven da wir immer die aktuellsten Dateien haben und genau nachvollziehen können was sich am Design verändert und warum. Gleichzeitig können wir immer in der Historie zurück gehen und uns einen alten Stand wieder holen. Natürlich bietet uns das Arbeiten mit Abstract noch viel mehr Möglichkeiten, aber gerade die Historie und somit die Versions-Kontrolle sind genau das, was wir Designer gebraucht haben!