UX-Design-Tools - Den Nutzer grafisch begeistern

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.

Die Wireframes werden vom UX-Designer mit Photoshop oder Fireworks entworfen. Der Webdesigner baut alles in Photoshop, Indesign oder Illustrator nach, gestaltet und bemaßt es und übergibt es dann dem Webentwickler. Der übersetzt das Ganze in gängige Programmiersprachen wie HTML oder CSS und fügt mit PHP oder Javascript Funktionen hinzu.

Schnell wird 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. 

7 Tools im Test

Ein Blick auf die jungen Start-Ups 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, UXpin, Zeplin, Axure 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 2020
Screenshot Sketch
Logo Adobe XD

Adobe XD

ProSehr einfach, schnelles Prototyping mit vielen Optionen, Übergabe an Entwicklung ohne Zusatztools möglich (Cloud), lokale Speicherung möglich
ContraSymbolverwaltung mit wenigen Features (Elemente werden nicht auf einer Seite verwaltet), Verwaltung über Absatzformate mangelhaft
WorkflowAlle Plattformen, kein gemeinsames Arbeiten (nur anschauen und kommentieren), Vorschau im Browser über Adobe-Cloud, im Prototyp Inspect-Mode vorhanden
Preis19,99 Euro/Monat/Lizenz, kann für einen aktuellen Prototypen kostenlos genutzt werden
Logo Figma

Figma

ProInteraktion an Sketch angelegt, cloudbasiertes Arbeiten im Team möglich, lokale Speicherung als Archiv vorhanden, Spezifikationen für Softwareentwicklung direkt in Software
Contraklickbarer Prototyp mit nur wenigen Features möglich, Files liegen in unbekannten Cloud,Symbolverwaltung mit wenigen Features (Elemente werden nicht auf einer Seite verwaltet, zurück zu Instance fehlt)
WorkflowPlattformunabhängig, funktioniert als Programm im Browser und offline als App (Windows/Mac), Livemodus für Teamarbeit, Kommentarfunktion, Export als png, jpg und svg
Preis12 US $ / Monat / Lizenz
Logo Sketch

Sketch

Proumfangreiche 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
ContraPrototypen können nur in Sketch oder mit Zusatztool angesehen werden (Beta Version mit Inspect-Mode vorhanden), Prototyping fehlerbehaftet und wenigen Features als XD
WorkflowLäuft nur auf Mac, zum Teilen der Designs mit den Entwicklern und Kunden wird Zusatztool, z.B. Zeplin oder Invision nötig, mit jedem Update kommen zusätzliche Funktionen für besseren Workflow
PreisTestversion möglich, einmaliger Lizenzkauf: 99 US $ inkl. Updates für ein Jahr, Mehrfachlizenzpakete möglich
Logo Invision

Invision

Tool dient zur Visualisierung der Prototypen und der Übergabe der Componenten an Softwareentwicklung. Der Import erfolgt über Plugins aus Sketch oder Photoshop.
ProPrototyp 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
ContraImport nur über Sketch oder Photoshop, komplexe Projekte mit vielen Seiten werden hier unübersichtlich, entspricht keinem Styleguide
WorkflowArbeit im Browser, dadurch plattformunabhängig, Kommentieren möglich, einfaches Update einer neuen Version der Sketchdatei über Plugin in Sketch, Anbindung an Slack vorhanden
Preis22 US $ / Monat / Lizenz
Logo UXpin

UXpin

Provereint alle Funktionen Layout, Prototyp und Quellcode, Export als PDF und HTML möglich
Contralocale, nur Googlefonts, locale Fonts nur mit Aufpreis – 5 Dollar je Monat oder typkit Anbindung, Preis
WorkflowArbeit im Browser, dadurch plattformunabhängig
PreisAb 19 US $ / Monat / Lizenz, kostenlose Testversion
Logo Axure

Axure

ProTeamprojekt anlegbar, lokales Arbeiten und synchronisieren möglich, Boolsche Operationen, umfangreiche Bibliotheken, Widget definiert alle UI Elemente
ContraWidget definieren alle UI Elemente
WorkflowPC und Mac App, kommentieren und anschauen und Prototyp im Browser möglich
Preis29 US $ / Monat / Lizenz oder einmalig 495 US $
Logo Zeplin

Zeplin

Tool dient zur Visualisierung der Entwürfe und Übergabe der Componenten an Softwareentwicklung.
ProSchnelle Ausgabe eines Styleguides, CSS und Bemaßung
Contrakein lokaler Export des Styleguides möglich
WorkflowArbeit im Browser, dadurch plattformunabhängig, Kommentieren möglich, einfaches Update einer neuen Version der Sketchdatei über Plugin in Sketch, Anbindung an Slack vorhanden
Preis26 US $ / Monatfü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:

Susanne Aurin

Susanne AurinLeitung Grafikdesign