Von der Ideenentwicklung bis zur Umsetzung digitaler Produkte.
Sicherlich hat der eine oder andere bereits von Photoshop gehört. Dies war einst die non-plus-ultra Software für das Designen von Webseiten: pixel perfect inklusive ausgiebigen Möglichkeiten für Bildbearbeitung. Was will man mehr?
Um genauer zu sein, möchte man nicht mehr, sondern weniger, dafür aber eine einfache/ intuitive Bedienung und schnelleres Arbeiten. Photoshop ist irgendwann einfach zu komplex, zu schwer geworden und entsprach nicht mehr dem Zeitgeist des digitalen Mindset - und wurde sehr schnell von Sketch (Bohemian Coding) oder durch das von Adobe selbst entwickelte XD ersetzt.
Dieses Beispiel zeigt sehr deutlich, dass heutzutage nichts mehr so ist, wie es einmal war und wie schnell ein milliardenschwerer Konzern durch ein smartes Start-Up in die Flucht geschlagen wird. Das alles “nur”, weil Sketch simpel ist und den Need der heutigen Workflows und Zielgruppe abdeckt.
Nun zu den Workflows
Früher hatten wir viele - zu viele - Prozesse, die weder unserem Verständnis von “Exzellent” entsprachen noch Kundenbedürfnisse effizient bedienten. Es musste schleunigst eine Veränderung her, um wieder “on Track” zu sein und effektiv arbeiten zu können. Systematisch begannen wir unsere Prozesse zu analysieren und zu verbessern, unter anderen um mit Menschen weltweit zusammenarbeiten zu können. Und da der Bereich Digital bei nk seit Jahren ständig wächst, möchten wir auf diese Prozesse etwas genauer eingehen.
Interne Kommunikation
Vom ersten Kundenkontakt bis zum Launch eines digitalen Produktes sind sehr viele unterschiedliche Schritte und Menschen mit Spezialwissen nötig. Für die interne Team-Kommunikation verwenden wir den Messenger Slack; Mail und Telefon vornehmlich für den Kundenkontakt ;-)
Warum eignet sich Slack so gut für die interne Kommunikation innerhalb der Teams?
Slack ist eindeutig im Vorteil gegenüber Skype oder anderen ähnlichen
Messenger-Apps, da man sog. Channels einrichten kann und alle eingeladenen Personen innerhalb eines Projekts persistent miteinander kommunizieren (vergleichbar mit einem Chatroom). Hilfreiche Tools, dies Slack-Bots, posten automatisch z.B. neue Kalendereinträge oder informieren über Cloud-Freigaben aus Google Docs, git-Commits, sowie auch Trello Notifications. Unsere neueste Entdeckung ist ein Übersetzer-Bot, sprich man muss nicht jedes Mal den Google Übersetzer bemühen. Das spart jedes Mal ein paar Sekunden unserer Zeit.
Ein viel wichtigerer Grund Slack zu nutzen ist die Transparenz in der Kommunikation, die dieses Tool schafft. Jeder innerhalb des Teams kann in den Channels jederzeit alles nachlesen und alle geteilten Links, Dokumente oder Dateien anschauen. Das hilft enorm und spart ebenfalls Zeit.
Keinesfalls sollte man Slack oder ein anderes Tool dazu verwendet, um “im Jetzt” eine Antwort zu erwarten. Wenn jemand beschäftigt ist, dann ist derjenige beschäftigt und antwortet erst, wann er oder sie Zeit hierfür findet. Im Gegensatz zum Telefon, bei welchem der Angerufene eine Art Zwang verspürt, abzuheben (es könnte ja etwas sehr sehr Wichtiges sein), ist Slack dezent und kann auch mal rechts liegen gelassen werden – es geht ja nichts verloren. Auch sollte Slack nicht als Dateiablage missverstanden werden. Wer kennt nicht die Frage “wo hat mir xy die Datei gesendet? Mail? Skype? Slack? Ausdruck?” Und plötzlich sind alle ständig am Suchen. Jedes Projekt braucht eine strukturierte Dokumenten-Ablage (z.B. im G-Drive) - und definitiv außerhalb eines Messangers.
Ach ja, Telefon und Mail: ausschließlich für den Kundenkontakt oder bei wichtigen und dringenden Fragen. Aber ganz ehrlich: anstatt zu schreiben oder zu telefonieren kann man sich einen Kaffee holen und beim Kollegen vorbei schnallen und alles besprechen. Vorausgesetzt, sie/er hat Zeit und steckt nicht in einer komplexen Aufgabe, die es noch zu knacken gilt.
So, jetzt aber wirklich zu unseren Workflows im digitalen Alltag.
Denkfläche für die Konzeption
Der erste große Schritt, nach einem Kundenbriefing, ist das Konzept. Es schafft die valide Grundlage für weitere Schritte und ein gemeinsames Commitment über kommende Aufgaben und das gemeinsam zu erreichende Ziel - im Buzzword-Bingo auch Big Picture genannt. Für die Konzeptphase haben wir sehr lange das Programm Omnigraffle verwendet. Damit lassen sich im Handumdrehen komplexe Vorgänge visualisieren und strukturieren. Im Prinzip besteht es aus vielen schönen Kästchen und bunten Pfeile mit Überschriften, womit sich User Flows, Workflows und Wireframes darstellen lassen. All dies macht man auf einem großen Board mit viel Freiraum. Das hilft enorm, “groß” zu denken und die Übersicht zu behalten.
Mittlerweile neigen wir jedoch dazu, die Vielfalt der Tools Schritt für Schritt zu minimieren und verwenden Sketch auch für die Konzeptarbeit. Denn wie bereits oben erwähnt: es ist sehr einfach in der Bedienung und schnell erlernbar. Ehrlicherweise muss erwähnt werden, dass auch Omnigraffle in die Jahre gekommen ist und von Sketch und anderen Programmen längst überholt wurde. Wir sehen deshalb keine Vorteile in der Verwendung mehr. Trotzdem wollten wir es erwähnen, denn dieses Tool hat uns lange begleitet und Platz für viele Konzepte geschaffen.
Abb.: Omnigraffle, Quelle: Omnigroup
Sketch als das State of the Art Programm für Screen Design und mehr
Nach der Konzeptphase (dazu gehören Idee, User Flows und Wireframing) gehen wir über in das Screen Design. Dazu verwenden wir ausschließlich Sketch. Wir könnten hunderte von Seiten schreiben, warum Sketch so genial ist, jedoch versuchen wir es kurz: Primär geht es uns um die Möglichkeit effizient und Pixel perfekte Screen Designs auszuarbeiten, diese unseren Kunden vorzustellen, Klickdummies zu bauen und anschließend an das Entwicklerteam weiterzugeben.
Skech war damals weit und breit das einzige Programm, welches auf einer schier unendlichen Fläche erlaubte, unendlich viele Artboards zu erstellen. Z.b. ein Arboard für das Design für Desktop, daneben für Tablet, und rechts davon für Mobile. Es war eine unheimliche Befreiung, alles auf einer Fläche zu sehen. Aber das ist noch nicht alles. Sketch hat unendlich viele Plugins und Bibliotheken, die bei der täglichen Arbeit helfen, wie z.B. das automatische Erstellen von Dummy-Texten oder Bildern, das Resizing von Artboards (Responsive Design) oder den Export der fertigen Artboards/Designs für Zeplin.
Abb.: Sketch App, Quelle: Bohemian Coding
Von der Code-Versionierung zur Design-Versionierung
Es gehört ebenfalls in die Sammlung der Apps, die uns wichtig sind: Abstract - eine Design-Versionskontrolle. Normalerweise kennt man solche Systeme aus der IT und Programmierung. Versionierung dient dazu, die Historie des entwickelten Codes nachzuvollziehen und gemeinsam an einem Projekt zu arbeiten, ohne sich gegenseitig “in die Quere” zu kommen. Abstract funktioniert nahezu identisch: man setzt ein Designprojekt auf, erstellt eine Sketch-Datei und beginnt gemeinsam ein Projekt zu designen. Eine Versionskontrolle ist folgendermaßen aufgebaut: es gibt den sog. Master-Strang, aus dem Branches (Abzweige) erstellt werden. Jeder arbeitet in seinem Abzweig bis er fertig ist, danach “merged” er alles in den Master zurück. Dadurch füllt sich der Master Tag für Tag mit neuen Designs von unterschiedlichen Menschen. Und das gute daran: es geht nichts verloren und wenn mal ein Fehler passiert, kann man in der Historie zurückgehen und den vorherigen Status wiederherstellen
.
Abb.: Abstract, Quelle: blog.prototypr.io
Abb.: Abstract, Quelle: blog.prototypr.io
Übergabe des Design an das Development mit Zeplin
Zeplin bildet den Übergabepunkt, an der man das Design weiter in Richtung Umsetzung, also der Programmierung des Frontends, weiterreicht. Einem Programmierer bietet es die Möglichkeit, sich direkt die CSS Klassen mit allen im Design definierten Attributen kopieren und in seinen Quellcode einsetzen zu können. Bedeutet, dass man im Gegensatz zu “früher” nicht mehr das Design aus Photoshop Pixel für Pixel nachmisst, sondern sich alles kopiert was man braucht: vom Farbwert bis hin zu Abstand und Größen. Die Kommentarfunktion bietet außerdem die Möglichkeit, Design und Animationen “an der richtigen Stelle” zu erläutern. Genau so können Entwickler kommentieren, falls etwas unverständlich ist. Ein essentieller Erfolgsfaktor für vertei
lte Teams.
Abb.: Zeplin App, Quelle: https://www.smashingmagazine.com/2017/04/photoshop-illustrator-sketch-ui/
GitLab für die Projektsteuerung und als Code Repository
Nun sind wir an der Stelle angekommen, wo alles an das Entwickler-Team übergeben wurde (Konzepte, Wireframings und das Screen Design liegen in Abstract, bzw. wurden bereits in Zeplin hochgeladen) und man mit der Entwicklung des Codes startet. Vorher allerdings setzten wir noch schnell ein Porjekt in GitLab auf. GitLab ist im Prinzip identisch zu Abstract, jedoch für Code. Es bietet ein WiKi sowie Kanban-Board zum Projekt, um den Backlog zu schreiben, Aufgaben zu verteilen und diese auch zu tracken. Für uns ist sehr wichtig, dass wir keinem hinterherlaufen müssen. Alle arbeiten agil und sind für ihr Tagespensum verantwortlich, achten also stark darauf, dass die eigenen Tasks in Richtung “Ready for test” oder “Done” wandern.
Zusätzlich verwenden wir GitLab als Steuerungsinstrument für alle digitalen Projekte. Dort lassen sich die Prozesse sehr gut und v.a. mit geringem Komplexitätsgrad (z.B. im Vergleich zu Jira) aufsetzen und abbilden. Aus GitLab geht der Code dann automatisiert weiter in Richtung Test- und Produktivserver.
Abb.: GitLab Kanban Board, Quelle: https://about.gitlab.com/images/8_11/issue_boards.gif
Unser Workflow ≠ dein Workflow
Im Grunde war’s das schon. Einer mag sagen, dass es viel zu viele Tools sind, ein anderer hat sich genau das gewünscht. Eins steht fest: es gibt leider (noch) kein Schweizer Taschenmesser für alles, was die Agenturlandschaft von heute braucht. Dafür viele Tools, die man smart kombinieren kann, die bereits jetzt helfen, bessere Resultate zu erzielen und effizienter zu sein. Unsere nächste Challenge ist die Testautomatisierung, insbesondere im Frontend. Und vielleicht wird einst der Tag kommen, an dem die Systeme nahtlos ineinander greifen und wir an dem einen oder anderen Tag einfach mal eine Stunde früher nach Hause gehen können. Da wir, ganz einfach, viel effizienter waren.
Wichtig jedoch: keine Angst vor Veränderungen – testet Tools, tauscht sie aus, sucht nach neuen Möglichkeiten, bis ihr euren idealen Workflow gefunden habt. Für den Moment. Und dann optimiert den Prozess immer weiter.
Unser Digital-Ökosystem auf einen Blick
