Die Frage nach den Tools für UI-Designer wird immer wieder gern gestellt, z.B. vor dem Hintergrund der Workflow-Performance. In den letzten Monaten hat sich für mich das optimale-Setup aus einer Reihe von Tests und Versuchen herauskristallisiert. Neben performanter Hardware (MacBookPro und 4K-Monitor, spielt die gewählte Software eine entscheidende Rolle. Für mich kommt es darauf an, hochqualitative UI-Flows zu konzipieren, als Wireframe oder im HiFi-Modus zu erstellen und effektiv zu kommunizieren, Designs schnell an Developer auszuliefern und das mit geringer Interpretationstoleranz. Speed kommt durch das Zusammenwirken der Software im individuellen Design-Workflow und über die Teamfähigkeit der Tools zustande. Cloud-Lösungen sind heute eine sinnvolle Ergänzung zu gewöhnlichen Netzwerkspeichern wie NAS. In meinem Fall setzten wir nur auf Own-Cloud-Lösungen, da im Delivery gern auch an einem Tag der Woche remote gearbeitet wird. Im Nachgang der Produktion ist eine QA notwendig, dafür müssen Apps auf dem Desktop ausgespielt werden können und Screenshots oder Analyse-Videos in den Bug-Prozess überführt werden können. Gelegentlich kann es vorkommen, dass ich als UI-Designer XML-Layouts korrigieren muss. Ein Verständnis für die entsprechenden Entwicklungsumgebungen wäre demnach sehr hilfreich.
Tooling (Mac)
Diese Übersicht zeigt kompakt eine Liste der Protagonisten im Setup für meinen UI-Design-Workflow.
- Sketch (Mac), Sketch Mirror (IOS)
- Plugins für Sketch
- Zeplin Desktop App
- Quicktime (Mac)
- Vysor mit Lizenz für Video-Aufnahmen
- Bildschirmfoto (Screenshot-Tool)
- Android File Transfer
- Apple Configurator 2
- Cisco Any Connect (für Home Office)
- Color Contrast Analyzer
- Touch Pen (für Kommentare auf Screenshots)
- Slack
- Digitale Bilder
- Android Studio
- XCode
Sketch (Mac)
Sketch ist eine Desktop Applikation für Interaktion- und Design-Konzepte, User-Interface-Design und UX-Konzepte. Diese Soft-Ware ist die am weitesten entwickelte und spezialisierte Applikation in diesem Bereich. Sie hat eine breite Anhängerschaft.
Pro
- mit Plugins bis zum Platzen erweiterbar
- Symbolbibliotheken für verteiltes Arbeiten
- zentrale Styles für Schriften und Ebenen (Farben, Schatten usw.)
- Sketch Mirror IOS App gibt die einzelnen Screens (Artboards) auf dem Iphone wieder (Simulation)
- Cloud-Dienst für verteiltes Arbeiten
Contra
- Sketch Mirror App gibt es nicht für Android
- der Konkurrent Adobe XD, der (Stand: Artikeldatum) eigentlich keiner ist, hat ein paar gute Funktionen die Sketch noch fehlen, u.a. Android Unterstützung für die Simulation, bessere Lösungen zur Spezifikation von Animationen und Interaktionsverhalten
Sketch Mirror IOS
ist die Companion-App zu Sketch und kann Sketch-Artboards auf dem Iphone anzeigen. Sketch Mirror kann die Verbindung zu Sketch via USB oder WLAN aufnehmen. Mit Sketch Mirror lässt sich eine App schon früh erfahrbar machen.
Crystal Android
Sketch Mirror bietet keine Android-Variante, weshalb man dort auf Crystal für Android zurückgreifen muss.
Crystal kann Sketch-Artboards auf Android-Geräten abbilden. Per WLAN Verbindung nimmt Crystal Kontakt mit einem Mac auf, dem gerade Sketch geöffnet ist. Crystal hat nicht den gleichen Funktionsumfang wie Sketch Mirror. So z.B. muss man derzeit noch auf fixierte Elemente verzichten.
Zeplin.io
wird zur Auslieferung von Design an die Developer verwendet. Zeplin bietet sowohl ein Web-Interface als auch eine Desktop-App an. Oft verwende ich beide Interfaces, da sie jeweils eigene Vorteile haben. Zeplin unterstützt Developer beim Basis-Setup für eine App, da dort Gestaltungselemente auf Code-Basis extrahiert werden können (mit Einschränkungen). Man benötigt ein kostenfreies Konto, um als Developer Designs einsehen zu können. Die Bezahl-Accounts haben weitere Features insbesondere für Designer und Unternehmen.
Unabdingbare Plugins für Sketch
Quicktime (Mac)
kann in der kostenlosen MAC-Version bereits Screen-Videos von Iphones, dem Mac-Desktop oder anderen Video-Quellen machen. Dazu kann Ton aufgenommen werden. Damit lassen sich Demonstrations-Videos erstellen. In der Analyse kann man Quicktime für die Einzelbildbetrachtung nehmen, hilfreich bei Animationseffekten.
Vysor / Vysor Android
erfüllt diese Funktion für Android-Smartphones. Vysor gibt es als kostenlose Version, die jedoch einen zu geringen Funktionsumfang hat um damit produktiv arbeiten zu können. Für Video-Aufnahmen muss eine Pro-Version erworben werden. Vysor hat auch eine Android-App die dabei hilft das Smartphone entsprechend zu konfigurieren.
Android-File Transfer (Mac)
macht das, was der Name schon hergibt. Es stellt vermutlich die einfachste Art dar, Dateien (z.B. APKs) auf das Android-Smartphone zu bekommen, wenn man kein Entwickler ist. Screenshots lassen sich darüber ebenso leicht finden. Die Software ist aber auch etwas hakelig, so z.B. werden Ordner nicht aktualisiert, wenn auf dem Smartphone ein Screenshot erstellt wurde.
Apple Configurator 2 (Mac)
hat iTunes als Hilfstools für die Installation von IPAs auf dem Iphone/Ipad abgelöst und konzentriert sich zudem auf das wesentliche. Drag’n’Drop-fähig. Funktioniert zuverlässig und ist intuitiv.
Color Contrast Analyzer
hilft bei der Findung und Analyse von Farbkontrasten vor dem Hintergrund der Barrierefreiheit. Sketch bietet da auch ein Plugin. Mit diesem Tool kann Farben Desktop-weit picken oder numerisch eingeben und nach WCAG/BITV2 bewerten lassen.
Touch-Pen
ist ganz praktisch für ein schnelles Feedback oder eine Markierung auf einem Screenshot. Er sollte auf allen Smartphones funktionieren.
Slack (Android/IOS)
benutze ich auch um einen Screenshot von einem beliebigen Test-Handy an mein Account zu senden. Slack sollte in der Workbench auf jedem Test-Handy installiert sein. Wenn nicht bitte nachinstallieren und mit dem Workbench-Account anmelden.
Digitale Bilder (Mac)
eignet sich hervorragend um größere Mengen von Screen-Shots und Screen-Videos schnell auf den Mac-Desktop zu importieren. Mit den richtigen Einstellungen funktioniert das vollautomatisch und ohne viel Verwirrung. Bilder werden auf Wunsch in Ordnern mit der Typenbezeichnung des Handys als Ordner-Namen abgelegt. Digitale Bilder gehört zur Standard-Mac-Installation.
Vorschau (Mac)
Das MAC-Vorschau-Tool bietet ein paar versteckte Features. Dazu gehört die Werkzeug-Leiste, die man leider mit jedem App-Start immer wieder per Tastatur-Kürzel Shift-Command-A aktivieren muss. Danach hat man ein paar einfache Werkzeuge für Anmerkungen zur Verfügung. Die Vorschau gehört zur Standard-Mac-Installation.
Android Studio und XCode
sind die jeweiligen Entwicklungsumgebungen und muss man haben wenn man direkt im Code arbeiten muss, z.B. wenn XML-Layouts gemacht oder kontrolliert werden müssen. In Android Studio gibt es ein Video-Tool.
Tooling (PC)
In der nachfolgenden Liste kann man schon erahnen, dass ein Windows-System nicht 100%ige Alternativen bietet und in Einzelfällen läßt sich mein Setup nicht übertragen. Beider Authoring-Software für Windows kann mit Einschränkungen auf Adobe-XD zurückgreifen, Adobe macht da gerade ziemlich viel, bietet auch eine Cloud-Lösung, simuliert und animiert für Mockups ziemlich gut. Es gibt auch keine Hürde zwischen iOS und Android Endgeräten. Mal sehen was da noch kommt. Wer nahe am Code sein möchte muss jedoch vollständig auf die iOS-Entwicklungsumgebung verzichten, ein Support des iOS-Teams bzgl. der Umsetzung von Layouts in Code fällt somit aus. Im Falle von App-Installationen hat man beispielsweise einen Performance-Verlust durch die umständliche Installation via iTunes.
Sketch (Mac), Sketch Mirror (IOS) keine Authoring möglich, wenn Datei-übergreifend gearbeitet wird, sonst wäre Adobe XD eine eingeschränkte AlternativePlugins für Sketch dto.- Zeplin Desktop App
Quicktime (Mac)- Vysor mit Lizenz für Video-Aufnahmen
- Screenshot-Tool
Android File Transfer Windows ExplorerApple Configurator 2 iTunes, sehr umständlich- Color Contrast Analyzer
- Touch Pen (für Kommentare auf Screenshots)
- Slack
Digitale Bilder Fotos- Android Studio
XCode keine Alternative