UX-Design-Tools - Den Nutzer grafisch begeistern

User Experience Design Tools

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. 

8 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, Affinity Designer, Invision Craft/Prototyping, 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 2018
Screenshot Sketch
Logo Adobe XD

Adobe XD

Prosehr einfach, schnelles Prototyping, Maße und Infos zum Layout einfach sichtbar (ähnlich Sketch)
ContraBibliothek nur über Photoshop oder Illustrator erstellbar, Schriften nur als Schriftfamilie speicherbar (kein echtes Absatzformat), keine CSS-Ausgabe, nur rudimentärer Styleguide (z.B. keine Zuordnung H1 bis Hx möglich)
Workflowalle Plattformen, kein gemeinsames Arbeiten (nur anschauen und kommentieren), Vorschau im Browser (ähnlich Invision Craft), im Prototyp jedes Element klickbar (dann sieht man Maße und Farben)
Preisca. 12 Euro/Monat/Lizenz, kann für einen aktuellen Prototypen kostenlos genutzt werden
Logo Figma

Figma

ProBoolsche Operationen, Bibliotheken für Symbole, Musterseiten, klickbarer Prototyp möglich, Spezifikationen für Softwareentwicklung
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

ProBoolsche Operationen, Arbeit mit Symbolen aus Bibliothek (ermöglicht Speichern verschiedener Stati), Hilfslinien möglich, Rastereinblendung ohne Hilfslinien als Spalten, Export einzeln, als Gruppe oder Slice, auch komplette Seite als PDF oder JPG zur Ansicht, viele Plugins zur Funktionserweiterung (z.B. Stylefinder), Bemassung der Elemente, Ausgabe CSS Code, Absatzformate möglich (aber nicht in gleichem Textfeld), tolle Zusatzfunktionen durch Shortcuts (z.B. Abstände messen), reaktive Designs einfach möglich
Contrakeine Hyperlinks, minimaler Funktionsumfang (Plugins notwendig), Prototypen können nur in Sketch angesehen werden, Bedienung hauptsächlich über Shortcuts (längere Einarbeitungszeit)
Workflowläuft nur auf Mac, dadurch wird Zusatztool, z.B. Zeplin nötig
PreisTestversion möglich, einmaliger Lizenzkauf: 99 US $ inkl. Updates fürs erste Jahr, danach freiwillig Lizenz für Updates: 69US$/Jahr, Mehrfachlizenzpakete möglich
Logo Affinity

Affinity

ProSVG Support, gute Symbolverarbeitung, Reaktive Designs, Bedienung analog zu Adobe Produkten, keine Einschränkung für Layout (besser als Sketch), Absatzformate möglich
Contrakein Prototyping, keine Plugins und Schnittstellen zu invision oder anderem Prototyp Programm, kein CSS Export, kein reines Webprogramm (ähnlich zu Illustrator)
WorkflowPlattformunabhängig, keine Zusammenarbeit mit Zeplin möglich
Preis49,99 US $ (einmalig)
Logo Invision

Invision

ProQuellcode kopierbar für Softwareentwicklung
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
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
Preis29 US $ / Monat / Lizenz (max. 3 Lizenzen)
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
Preis49 US $ (einmalig)
Logo Zeplin

Zeplin

ProSchnelle Ausgabe eines Styleguides, CSS und Bemaßung
ContraNur für Sketch, Figma, Adobe XD und Photoshop
WorkflowAnbindung über Interface des Grafikprogrammes
Preis26 US $ / Monat

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:

Ihr Ansprechpartner in Sachen Webdesign

Susanne Aurin

Susanne AurinLeiterin Grafikdesign