UX/UI Design für CGWire - Showcase von Ev Henke

CGWire entwickelt ein Open Source Production Management Tool für Animationsstudios und hat sich zum Ziel gesetzt, die Koordination von Animationsfilmen und Filmproduktionen zu erleichtern. Für die Weiterentwicklung der Plattform hat CGWire regelmäßig Bedarf an UX und UI Design, aber auch immer wieder an Unterstützung in Sachen Branding und Kommunikationsdesign.

Vor dem Projekt

1. Wer ist der Kunde?

CGWire ist ein kleines selbst finanziertes Startup. Das Kernteam besteht momentan aus 4 Personen, und arbeitet komplett remote.

2. Wie ist CGWIRE auf dich aufmerksam geworden?

Ich kenne den Gründer Frank aus meinem persönlichen Umfeld. Vor einigen Jahren, kurz nachdem er CGWire gründete, hat mich Frank gefragt, ob ich ihm bei ein paar Illustrationen für seine Webseite helfen könnte. Seitdem unterstütze ich CGWire regelmäßig in verschiedenen Bereichen von Branding über Kommunikationsdesign und lllustrationen bis hin zu Konzept und UI Design der Plattform. Zuletzt habe ich an einer SVG-Animation für die Landing Page gearbeitet.

3. Wie habt ihr euch auf das Ziel der Zusammenarbeit verständigt?

Durch die langjährige Zusammenarbeit finden die meisten Absprachen recht unkompliziert und auf eher unformelle Weise statt. Das ist allerdings nur bei überschaubaren Projekten möglich und erfordert viel gegenseitiges Vertrauen.

Für ein größeres Feature Redesign haben wir zu Projektbeginn aber auch schon mal einen remote Kickoff Workshop gemacht, zu welchem wir den COO von Blender eingeladen haben. Blender nutzt für seine Eigenproduktionen ebenfalls das Production Management Tool von CGWire und konnte uns wertvolles Feedback zu den bestehenden Features geben.

Bei der letzten Zusammenarbeit mit CGWire war zunächst das Ziel, eine bestehende Grafik der Landing Page zu aktualisieren. Das wir am Ende die Grafik als Animation umsetzen war eher eine spontane Idee, die Frank kam, als er meinen ersten Design Vorschlag gesehen hat. Damit, dass die Umsetzung dann so leicht als SVG-Animation umsetzbar ist, hätte er zu dem Zeitpunkt gar nicht gerechnet.

Während des Projekts

4. Wie hat sich euer Team zusammengesetzt?

Bisher habe ich für CGWire alleine als Designerin gearbeitet, bin dabei aber immer in engem Austausch und Abstimmung mit dem Kernteam.

5. Wie habt ihr euch organisiert?

Da CGWire eine Management- und Kommunikationsplattform entwickelt, liegt es Nahe, das eigene Tool auch für Design-Abstimmungen zu verwenden. Die Plattform ist zwar auf die Prozesse und Abwicklungen der Animations- und Filmproduktion zugeschnitten, prinzipiell erlaubt sie aber Koordination, Kommunikation, Abstimmung und Zusammenarbeit innerhalb von Teams für jegliche Art von Projekten. Über das Tool können auch Zeiten erfasst und Projektpläne erstellt werden. Die Nutzung der Plattform hilft dabei, das Tool besser kennenzulernen, aber vor allem auch Schwachstellen und Verbesserungspotentiale aufzudecken, und das Nutzererlebnis aus erster Hand zu erfahren.

Neben der eigenen Plattform nutzen wir auch Email oder Telefon als Kommunikationskanäle und Skype für Videokonferenzen.

6. Welche Tools hast du für deine Arbeit genutzt?

Die meisten UI Designs für CGWire setze ich in Figma um, durch welches eine direkte Abnahme und Handoff für die Frontend-Entwickling möglich ist.

Illustrationen dagegen erstelle ich vorwiegend in Illustrator. Ich versuche Illustrationen, Icons und andere Grafikelemente grundsätzlich als Vektordateien umzusetzen und diese auch im Vektorformat für die Einbindung auf der Webseite oder im jeweiligen Produkt zur Verfügung zu stellen. Vektordateien haben den Vorteil, dass sie im Vergleich zu mittelgroßen Rastergrafiken meistens deutlich kleiner sind und verlustfrei skalieren. Das hält Webseiten schlank bei gleichbleibender Qualität. Vektorgrafiken haben zusätzlich den Vorteil, dass sie direkt über den Code angesteuert und angepasst und dadurch auch animiert werden können. Die SVG-Animation für CGWire habe ich ebenfalls in Illustrator erstellt und die Animation anschließend im Texteditor handanimiert.

Nach dem Projekt

7. Was lief gut bei diesem Projekt?

Da CGWire komplett remote arbeitet sind alle gut auf diese Art von Zusammenarbeit eingespielt. Das Arbeiten in einem kleinen Team ermöglicht ausserdem eine hohe Flexibilität und direkte Abstimmungem ohne lange Wege. Dadurch sind auch kurzfristige Änderungen möglich und das Ausprobieren von Ideen wie die Umsetzung der Animation, die an erster Stelle gar nicht vorgesehen war.

8. Was hat dich bei diesem Projekt überrascht?

Es ist immer überraschend, wie klein Vektorgrafiken im Vergleich zu mittelgroßen Rastergrafiken sind. Die finale SVG-Animation ist gerade einmal 90 KB gross und damit wesentlich kleiner als die meisten Standbilder.

9. Was hast du bei bei diesem Projekt gelernt?

Es bleibt immer aufs Neue lohnenswert, neue Techniken und Methoden auszuprobieren. Vor dem Projekt hatte ich nur wenig Erfahrung mit CSS Animationen und war mir nicht sicher, welche Einschränkungen aber auch Möglichkeiten SVG-Animationen mit sich bringen.

Gerade wenn SVG-Animationen handgecodet sind, stößt man mit dieser Methode natürlich schnell an Grenzen. Insbesondere wenn komplexere Animationen oder Effekte gefragt sind, da nur gewisse Parameter animiert werden können. Für kleine illustrative Animationen sind SVG-Animationen aber sicherlich eine effektive Methode, die eine hohe Abbildungsqualität bei überraschend kleiner Dateigröße bieten. Durch die direkte Einbindung in den Code können SVGs außerdem von Screenreadern gelesen werden und sind dadurch barrierefrei.

Komplexere Animationen können mit spezieller Animations-Software wie After Effects umgesetzt werden. Mit Hilfe eines Plugins können SVG-Animationen offenbar aus After Effects exportiert und anschließend in Webanwendungen integriert werden. Das würde auch die Einbindung von komplexeren Animationen mit den Vorteilen von SVG Grafiken ermöglichen. Dieses Plugin habe ich selber noch nicht ausprobiert, aber vielleicht beim nächsten Mal?

Zum Profil von Ev Henke