Noch vor kurzem nutzte die Mehrheit aller UX Designer (User Experience) entweder Sketch, Illustrator oder Photoshop für Entwürfe. Auch ich - kommend vom herkömmlichen Grafikdesign - nutzte bislang meistens Illustrator um Wireframes und Prototypen für Websites zu gestalten.
In den letzten Jahren sind unzählige neue und innovative Tools zur Erstellung von Designentwürfen auf den Markt gekommen. Jedes mit seinen eigenen Stärken und Schwächen, jedoch mit dem gemeinsamen Ziel, den Workflow von UX-Designern zu verbessern. Als ich mich in Richtung UX-Design spezialisierte, stand ich daher vor einer Riesenauswahl an Tools. Ich musste mich entscheiden.
Zwar gibt es wie erwähnt unzählige Tools zur Erstellung von Wireframes und Prototypen und gefühlt wird jede Woche ein neues präsentiert. Bei meinen Recherchen und beim Nachfragen im Team kristallisierten sich jedoch drei Tools heraus, die ich in diesem Beitrag vergleichen möchte:
Sketch
Ging es um das Entwerfen von Bildschirmprodukten, war Sketch lange Zeit die erste Wahl. Es war eines der ersten Tools, das spezifische Funktionen für Interface-Designer anbot, die in herkömmlichen Grafikprogrammen nicht zu finden waren. 2010 erschienen, wurde das Programm stetig weiterentwickelt und verbessert, gleichzeitig wurde aber auch die Konkurrenz immer stärker und innovativer.
Vorteile:
- Umfangreiche Plug-In Bibliothek
- Sehr grosse Community
- Unzählige Guides und Tutorials abrufbar
- Langjährige Erfahrung der Entwickler
- Regelmässige Updates
Nachteile:
- Nur für Mac OS verfügbar
- Keine Gratisversion (99$/Jahr)
- Weniger intuitive Benutzeroberfläche im Vergleich mit der Konkurrenz
«Sketch is the most developed tool out there. They were the first to create such a program and they have the biggest community. All the other programs are based on Sketch.»
– Jordy, Teammitglied und Sketch-Nutzer
Adobe XD
Obwohl viele Designer mit Adobe Photoshop und Co gross geworden sind, waren Interface Designer nie die Zielgruppe. Adobe hat dies gemerkt und eine von Grund auf neue App entwickelt. Als Adobe XD veröffentlicht wurde, konnte es Sketch mit all seinen Plug-Ins und der riesen Community nicht das Wasser reichen. Das änderte aber Ende 2018 als Adobe ein umfangreiches Update herausgab, das viele neue und einzigartige Funktionen mitbrachte.
Vorteile:
- Viel Budget für Updates
- Einbindung von Sprachinteraktionen in Prototypen
- Kollaboration im Team und mit Kunden wurde verbessert und funktioniert einfach und reibungslos
- Nahtlose Einbindung von Programmen aus der Adobe Cloud (Photoshop, Illustrator, etc.)
- Intuitive und eingängige Benutzeroberflächen und Funktionen
- Kostenlos mit Einschränkungen
Nachteile:
- Die Plug-In Bibliothek ist noch nicht sehr gross
- Text und Bildbearbeitung sind nicht oder kaum vorhanden
«Ich finde, dass Adobe XD sehr intuitiv gemacht ist und dass das Teilen von Projekten super funktioniert, um meine Designs dem Kunden zu präsentieren. Er sieht die Webseite dann bereits in der richtigen Grösse und mit den wichtigsten Funktionen und kann meinen Entwurf kommentieren. Viel besser, als wenn ich das Projekt als PDF verschicken müsste.»
– Tom, Teammitglied und Adobe XD-Nutzer
Figma
Figma wurde 2013 ins Leben gerufen. Das Ziel war, die Kollaboration im Team in den Mittelpunkt zu stellen und so einfach wie möglich zu gestalten. Der Begründer Dylan Field erklärte in einem Artikel auf Techcrunch.com, dass Figma «für Interface-Design tun will, was Google Docs für Textbearbeitung tat.»
Vorteile:
- Browserbasiert
- Läuft extrem flüssig
- Gratisversion mit eingeschränkten Kollaborationsfunktionen (Figma Professional kostet 12$/Monat)
- Intuitive Benutzeroberfläche und Funktionen
- Umfangreiche Kollaborationsfunktionen
- Überall abrufbar da cloudbasiert
- Umfangreiche Pluginbibliothek
- Mit Smart Animate lassen sich robuste klickbare Prototypen erstellen
Nachteile:
- Permanente Internetverbindung ist fast zwingend
- Hohe RAM und Grafikkarten Anforderungen
«Ich persönlich nutze Figma, weil die Bedienung intuitiv ist und viele Gestaltungsmöglichkeiten bietet. Über Wireframes bis zu Prototyping lässt sich praktisch alles über Figma erstellen, auch werden viele Datentypen für den Import und Export unterstützt. Ein weiteres Plus ist die aktive Community und die fleissigen Entwickler, die auf Feedback hören und stetig neue Updates herausbringen.»
– Bobby, Teammitglied und Figma-Nutzer
Fazit
Die Hersteller der drei Tools liefern sich ein Kopf-an-Kopf-Rennen und entwickeln ständig neue Features, die die Konkurrenz distanzieren sollen. Doch dauert es meistens nur ein paar Wochen, bis auch die Konkurrenz mit den gleichen Neuheiten auffährt. Selbst während ich diesen Beitrag geschrieben habe, musste ich die Vor- und Nachteile der jeweiligen Programme immer wieder anpassen, da ständig neue Updates veröffentlicht wurden.
Welches Tool sich für UX-Designer am besten eignet, hängt vor allem mit den eigenen Präferenzen und denen des Teams ab. Brauchbar sind alle und fehlt einmal eine Funktion, kommt bestimmt bald ein Update, die diese integriert.
Ich selber habe mich für Figma entschieden. Als UX Einsteiger hatte ich das Tool im Handumdrehen gelernt und konnte bereits nach einem Tag ohne Probleme erste Websites gestalten. Mir gefällt, dass Figma seine Files in die Cloud speichert und ich somit von jedem Gerät auf meine Designs zugreifen kann. Auch die Kollaborationsfeatures haben sich bei der Übergabe der Prototypen an den Entwickler als äusserst nützlich herausgestellt.
Quellenangaben:
Logos
Video Sketch
Video Adobe XD
Video Figma
