User Experience Design Tools im Test
Wer als User Experience (UX) Designer den Nutzer einer Website grafisch begeistern möchte, findet sich in einem Dschungel aus Tools und Programmen wieder. Oftmals gibt es nicht die eine Software für alle, die am Designvorgang beteiligt sind.
Früher wurden Wireframes vom UX-Designer noch mit Photoshop oder Fireworks entworfen. Der Webdesigner baute alles in Photoshop, Indesign oder Illustrator nach, gestaltete und bemaßte es, bevor er seine Gestaltung an den Webentwickler übergab, damit der das Ganze in gängige Programmiersprachen übersetzt.
Schnell wurde klar: Der Workflow ist langwierig, umständlich und fehleranfällig. Im Fokus der neuen UX-Design-Tools steht darum das Anliegen, den Workflow effizienter zu gestalten und die Kommunikation zwischen den einzelnen Teammitgliedern zu vereinfachen.
5 Tools im Test
Ein Blick auf die neuen Tools lohnt sich, locken hier doch neue Funktionen wie das plattformunabhängige Arbeiten im Webbrowser oder die Möglichkeit, im Livemodus parallel an einem Projekt zu arbeiten. Auch die automatische Erstellung von Styleguides und das Erstellen von Prototypen können die Arbeitsabläufe erheblich vereinfachen.
Wir haben die Tools Figma, Sketch, Invision, Zeplin und Adobe XD getestet. Für unsere Bewertung legten wir besonderes Augenmerk auf die plattformunabhängige Kompatibilität, das Anlegen von Absatzformaten und Symbolen für umfangreiche Projekte, die Möglichkeit, einen Styleguide zu exportieren, sowie die einfache Erstellung eines Prototyps.
Stand: Frühjahr 2023
Adobe XD
| Pro | Sehr einfach, schnelles Prototyping mit vielen Optionen, Versionsverlauf, lokale Speicherung wird zugelassen, Übergabe an Entwicklung ohne Zusatztools möglich (Cloud), Integriert sich in das Adobe Creative Cloud-Ökosystem |
|---|---|
| Contra | Symbolverwaltung mit wenigen Features (Elemente werden nicht auf einer Seite verwaltet), Verwaltung der Zeichenstile mangelhaft |
| Workflow | App für Windows/Mac, Livemodus für Teamarbeit, Vorschau im Browser über Adobe-Cloud, im Prototyp Inspect-Mode vorhanden |
| Preis | ab 11,89 € / Monat, Testversion vorhanden |
Figma
| Pro | Echtzeit-Kollaboration im Team möglich, speichert automatisch lokale Versionen, innovative Auto-Layout und Variant Funktionen, erweiterbar durch zahlreiche Plugins, robust bei großen Projekten, große Community |
|---|---|
| Contra | Files liegen in einer unbekannten Cloud, Symbolverwaltung mit wenigen Features (Elemente werden nicht automatisch auf einer Seite verwaltet) |
| Workflow | Plattformunabhängig, funktioniert als Programm im Browser und offline als App (Windows/Mac), Livemodus für Teamarbeit, Kommentarfunktion, Export als png, jpg, svg und pdf |
| Preis | ab 12 US $ / Monat / Lizenz, kostenlose Version |
Sketch
| Pro | umfangreiche Features bei der Arbeit mit Symbolen, viele Plugins zur Funktionserweiterung (z.B. Stylefinder, Schnellzugriffe), umfangreiche Features für Verwaltung durch Layer- und Absatzformate, Zusatzfunktionen durch Shortcuts |
|---|---|
| Contra | Prototypen können nur in Sketch oder mit Zusatztool angesehen werden (Beta Version mit Inspect-Mode vorhanden), Prototyping fehlerbehaftet und weniger Features als XD, kollaboratives Arbeiten ist nicht möglich, sinkende Nutzerzahlen |
| Workflow | Wird nur auf dem Mac untersützt, zum Teilen der Designs mit den Entwicklern und Kunden benötigt man zusätzlich, z.B. Zeplin oder Invision |
| Preis | ab 9 $ / Monat, Testversion vorhanden |
Invision
Tool dient zur Visualisierung der Prototypen und der Übergabe der Komponenten an die Softwareentwicklung. Der Import erfolgt über Plugins aus Sketch oder Figma.
| Pro | Prototyp in Browser klickbar - fühlt sich sehr echt an, nachträgliches Hinzufügen von interaktiven Elementen möglich, App für mobile Darstellung möglich, Inspect-Mode für Entwickler, Prototyp lokal speicherbar |
|---|---|
| Contra | Import nur über Sketch oder Figma, komplexe Projekte mit vielen Seiten werden hier unübersichtlich, entspricht keinem Styleguide, Adobe XD wird offiziell nicht unterstützt |
| Workflow | Arbeit im Browser, dadurch plattformunabhängig, Kommentieren möglich, einfaches Update einer neuen Version der Figmadatei über Plugin in Figma, Anbindung an Slack vorhanden |
| Preis | ab 7,95 $ / Monat / Lizenz |
Zeplin
Tool dient zur Visualisierung der Entwürfe und Übergabe der Komponenten an Softwareentwicklung. Der Import erfolgt über Plugins aus Sketch, Adobe XD oder Figma.
| Pro | Schnelle Ausgabe eines Styleguides, CSS und Bemaßung |
|---|---|
| Contra | kein lokaler Export des Styleguides möglich |
| Workflow | Arbeit im Browser, dadurch plattformunabhängig, Kommentieren möglich, einfaches Update einer neuen Version der Figmadatei über Plugin in Figma, Anbindung an Slack vorhanden |
| Preis | ab 8 US $ / Monat für 12 aktive Projekte |
Fazit: Lohnt sich der Umstieg?
Ob Allrounder oder Minimalist, unser Schnelltest hat gezeigt, dass jedes Tool seine ganz eigenen Vorzüge mitbringt. Welches Tool den eigenen Ansprüchen am besten entspricht, hängt daher stark von den Projekten und den technischen Voraussetzungen innerhalb des Teams ab (Stichwort: gleiches Betriebssystem).
In jedem Fall sollte bedacht werden, dass der Umstieg auf neue Tools auch Risiken mit sich bringt. So muss für die Einarbeitung in ein neues System ausreichend Zeit eingeplant werden. Darüber hinaus gilt es zu beachten, dass gerade bei Start-Ups der Langzeit-Support oft nicht garantiert werden kann. Auch die monatlichen Lizenzgebühren können sich als Kontrapunkt erweisen, wenn man die Tools auf mehreren Rechnern laufen lässt und nur gelegentlich verwendet.
Egal, wie Sie sich entscheiden: Wichtig ist, mit der Zeit zu gehen, Trends im Blick zu behalten, zu bewerten und beim Start neuer Projekte dafür offen zu sein, sich von alten Strukturen zu lösen und auch neue Software auszuprobieren.
Weiterlesen:
- User Interface Design- Gestaltung von Benutzeroberflächen
- Mobile First Design- Mobilgeräte im Fokus
- Clevere Piktogramme- Icon Fonts oder SVG-Sprites?
Susanne AurinLeitung Grafikdesign
- Telefon: 0351-44 078 34
- E-Mail: E-Mail
- Xing-Profil