Heute gewähre ich mal einen ersten Blick in meine persönliche Werkzeugkiste. Beginnen möchte ich mit den Prototyping-Tools.

Bei der Gestaltung von Benutzeroberflächen (UI) sind Prototypen ganz entscheidende Elemente. Für den Erfolg einer digitalen Anwendung oder einer Website sind sie extrem wichtig. Dabei sind spezialisierte Tools wie Axure RP, Figma und Adobe XD unverzichtbare Helfer für uns UI-Designer. Während mein persönlicher Favorit Axure RP ist, arbeitet mein Team gerne mit Adobe XD. Global gibt es aber auch eine extrem große Figma-Fanbase, weswegen ich diese drei Tools hier einmal gegenüberstelle.

Axure RP – mein persönlicher Favorit

Axure RP ist ein extrem leistungsstarkes Wireframing- und Prototyping-Tool, das sich insbesondere für komplexe und interaktive Wireframes eignet. Es ist bekannt für seine sehr umfangreichen Funktionen und bietet sowohl Einsteigern als auch erfahrenen Designern umfassende Möglichkeiten.

Es gibt mittlerweile die Möglichkeit, Figma-Designs zu importieren. Allerdings denke ich, dass die Reihenfolge erst ein Design zu erstellen und dann die Funktionen zu testen unsinnig ist. M. E. ist es sinnvoller erst einen groben, aber interaktiven Wireframe zu erstellen und dann ein Design zu erstellen.

Vorteile

1. Flexibilität: Axure RP ermöglicht es, komplexe Interaktionen und Animationen zu erstellen, was für fortgeschrittene Prototypen ideal ist.
2. Für Webdesigns sind die „Adaptive Views“ – also projektweite Breakpoints für Responsive Designs – extrem praktisch
3. Spezielle Widgets: Es gibt eine große Auswahl an Widgets und Vorlagen, die für unterschiedliche Branchen und Anwendungsfälle angepasst werden können.
4. Collaboration: Axure RP bietet Funktionen für Teamarbeit, wie zum Beispiel gleichzeitiges Arbeiten und Versionsverwaltung.

Nachteile

1. Axure eignet sich hervorragend für Wireframes mit interaktiven Funktionen.
   „Schöne“, Designs sind selbstverständlich auch umsetzbar, aber nur mit erheblichem Aufwand. Da sind die anderen Tools besser.
2. Lernkurve: Aufgrund der vielen Funktionen ist Axure RP für Einsteiger schwieriger zu erlernen. Aber es lohnt sich. Und es gibt hervorragende Tutorials im Netz 😉
3. Preis: Axure RP hat eine höhere Preisschwelle im Vergleich zu Figma und Adobe XD.

Figma – Browserbasiert mit riesen Fanbase

Figma ist ein browserbasiertes Design- und Prototyping-Tool, das sich auf Zusammenarbeit und Benutzerfreundlichkeit konzentriert. Es ermöglicht Designern, nahtlos zwischen UI-Design und Prototyping hin- und herzuwechseln.

Vorteile

1. Einfache Bedienung: Figma hat eine intuitive Benutzeroberfläche, die den Einstieg erleichtert.
2. Collaboration: Die Echtzeit-Zusammenarbeit und Kommentarfunktionen machen die Arbeit im Team besonders effizient.
3. Plattformunabhängig: Da Figma im Browser läuft, ist es auf verschiedenen Geräten und Betriebssystemen zugänglich.

Nachteile

1. Internetabhängigkeit: Figma benötigt eine stabile Internetverbindung, um effektiv arbeiten zu können.
2. Begrenzte Interaktionsmöglichkeiten: Figma bietet nicht die gleiche Tiefe an Interaktionen und Animationen wie Axure RP.

Adobe XD – Läuft aus

Adobe hat das Ende von XD angekündigt.

Insofern kann ich Euch XD natürlich nicht mehr empfehlen.

(Siehe z. B. hier:https://www.golem.de/news/nach-geplatztem-figma-deal-adobe-zieht-den-stecker-bei-adobe-xd-2402-181756.html)

Variablen zur Steuerung der Wireframes bzw. Prototypen

Wie gesagt, ist Axure RP mein persönlicher Favorit. Dies liegt an den Interaktionsmöglichkeiten und den Breakpoints (genannt „Adaptive Views“) des Tools. In jedem anderen Tool bin ich irgendwann im Design-Prozess an den Punkt gekommen, wo Abhängigkeiten zu vorherigen Klicks des Users Beachtung finden mussten. Und hier spielt Axure seine echte Superpower aus.

Alle drei Programme unterstützen grundsätzlich die Verwendung von Variablen, wobei Axure RP hier deutlich leistungsfähiger ist und die größte Flexibilität in Bezug auf die Verwendung von Variablen und die Erstellung von Logik und Bedingungen bietet. Axure RP bietet die Verwendung von Variablen (in Axure als „Global Variables“ bezeichnet), um Informationen wie Benutzereingaben, Zustände oder andere dynamische Daten zu speichern und zu verwalten. Mit Axure RP können Designer sehr komplexe Logiken und Bedingungen erstellen, die auf diesen Variablen basieren, um realistische und interaktive Prototypen zu simulieren.

Figma unterstützt Variablen in Form von „Interactive Components“ und „Variants“. Mit Interactive Components können Designer wiederverwendbare, interaktive Elemente erstellen, die mehrere Zustände und Verhaltensweisen besitzen. Variants ermöglichen es, unterschiedliche Versionen eines Designs oder einer Komponente zu erstellen und diese dynamisch basierend auf bestimmten Bedingungen auszuwählen. Obwohl Figma nicht den gleichen Grad an Variablenunterstützung wie Axure RP bietet, sind diese Funktionen ausreichend, um grundlegende Interaktionen und Anpassungen in Prototypen zu ermöglichen.

Adobe XD bietet die Möglichkeit, Variablen in Form von „Component States“ und „Stacks“ zu verwenden. Mit Component States können Designer verschiedene Zustände eines UI-Elements erstellen und diese basierend auf Benutzerinteraktionen oder anderen Bedingungen dynamisch ändern. Stacks ermöglichen es, Elemente in einer Gruppe automatisch anzupassen, wenn sich die Größe oder Position von Elementen innerhalb der Gruppe ändert. Adobe XD bietet zwar nicht die gleiche Tiefe an Variablenunterstützung wie Axure RP, aber es ermöglicht dennoch die Erstellung von interaktiven Prototypen und dynamischen Anpassungen im Design.

Und was ist mit Responsive DesignS?

Alle drei Tools – Axure RP, Figma und Adobe XD – bieten Funktionen, die die Erstellung von responsiven Designs unterstützen. Hier ein Überblick:

Axure RP bietet Adaptive Views, mit denen Designer unterschiedliche Layouts für verschiedene Bildschirmgrößen und Geräte erstellen können. Mit dieser Funktion können Regeln und Breakpoints festgelegt werden, die bestimmen, welches Layout bei welcher Bildschirmgröße angezeigt wird. Allerdings ist der Prozess in Axure RP etwas komplexer als in Figma und Adobe XD – dafür aber auch flexibler. Ich möchte die Möglichkeiten in keinem fall mehr missen. Denn, durch die in Axure RP gewählte Implementierung bleiben die Projektdokumente extrem übersichtlich.

Figma bietet eine Funktion namens „Auto Layout“, die es Designern ermöglicht, flexible und responsive Layouts zu erstellen, indem automatisch Anpassungen an Größe, Abständen und Ausrichtungen vorgenommen werden. Mit Constraints (Einschränkungen) können Sie festlegen, wie Elemente innerhalb eines Rahmens skalieren und sich verhalten, wenn der Rahmen verändert wird. Figma ermöglicht auch die einfache Vorschau von Designs auf verschiedenen Geräten und Bildschirmgrößen.

Adobe XD bietet ebenfalls Funktionen zur Erstellung responsiver Designs, darunter Responsive Resize und Content-Aware Layout. Mit Responsive Resize können Designer Elemente und Gruppen automatisch anpassen, wenn sie die Größe von Objekten oder Artboards ändern. Content-Aware Layout ermöglicht es, Abstände und Ausrichtungen automatisch anzupassen, wenn Elemente in einem Design verschoben oder deren Größe geändert wird. Adobe XD bietet auch Vorschau-Optionen für verschiedene Bildschirmgrößen und Geräte.

Wie steht es um die Verwendung von Webfonts?

Die Verwendung von Webfonts ist ein nicht zu unterschätzender Aspekt des UI-Designs. Webfonts tragen dazu bei ein konsistentes Erscheinungsbild und eine gute Lesbarkeit auf verschiedenen Plattformen und Geräten zu gewährleisten. Axure RP, Figma und Adobe XD unterstützen alle die Verwendung von Webfonts, bieten jedoch unterschiedliche Möglichkeiten und Integrationen.

In Axure RP können Webfonts durch Einbetten von CSS-Code im Projekt genutzt werden. So können sowohl Google Fonts als auch benutzerdefinierte Webfonts verwendet werden, indem der entsprechende CSS-Code in den Projekteinstellungen hinzufüget wird. Sobald der Webfont eingebunden ist, steht er in der Schriftartenliste zur Verfügung und kann im gesamten Projekt verwendet werden. Die Einbindung ist allerdings recht unkomfortabel, weswegen ich persönlich in den meisten Projekten darauf verzichte. Dies hat natürlich Auswirkungen auf die Optik, die darunter im Normalfall leidet. Wenn es um das Testen von Funktionen geht, ist dies aber vernachlässigbar.

Figma bietet eine native Integration von Google Fonts, sodass man direkt auf die gesamte Google Fonts-Bibliothek zugreifen kann und die Schriftarten im Projekt verwenden kann. Darüber hinaus können benutzerdefinierte Schriftarten, die lokal auf Ihrem Computer installiert sind, in Figma verwendet werden. Um sicherzustellen, dass diese benutzerdefinierten Schriftarten in der Webansicht und in exportierten Prototypen korrekt angezeigt werden, müssen die entsprechenden Webfont-Lizenzen und -Dateien auf Ihrem Webserver bereitgestellt werden.

Adobe XD bietet eine native Integration von Adobe Fonts (ehemals Typekit), die für Creative Cloud-Abonnenten verfügbar ist. So kann man auf die umfangreiche Bibliothek von Adobe Fonts zugreifen und diese im Projekt verwenden. Darüber hinaus können in Adobe XD auch Google Fonts und benutzerdefinierte Schriftarten verwendet werden, indem sie lokal auf dem Computer installiert werden. Wie bei Figma müssen für die korrekte Anzeige der benutzerdefinierten Schriftarten in der Webansicht und in exportierten Prototypen die entsprechenden Webfont-Lizenzen und -Dateien auf Ihrem Webserver bereitgestellt werden.

Achtung: Unabhängig vom gewählten Tool müssen bei der Verwendung von benutzerdefinierten Schriftarten immer die Lizenzbedingungen beachtet werden.

UNd welches Tool ist nun das Beste?

Die Wahl des „richtigen“ UI-Design- und Prototyping-Tools hängt letztlich von den persönlichen Anforderungen und Vorlieben ab.

Axure ist ein professionelles Tool für komplexe und vor allem interaktive Prototypen. Wenn man bereit ist, ein bisschen Zeit zu investieren und sich in die vielen Funktionen einzuarbeiten, ist Axure RP definitiv das „richtige“ Tool.

Wenn man großen Wert auf Zusammenarbeit und Plattformunabhängigkeit legt und eine einfache, browserbasierte Lösung bevorzugt, ist Figma eine ausgezeichnete Wahl.

Wenn man bereits in der Adobe Creative Cloud arbeitet (wie mein Team) und ein leichtgewichtiges, intuitives Tool für UI-Design und Prototyping sucht, bietet Adobe XD eine solide Option.

Weitere Alternativen

Es gibt über die drei hier vorgestellten Tools aber auch noch gute, und vielfach genutzte Alternativen, welche ich zumindest noch kurz erwähnen möchte.

1. Sketch ist ein beliebtes Vektor-basiertes Design-Tool, das hauptsächlich für UI/UX-Design und Prototyping verwendet wird. Es ist allerdings nur für macOS verfügbar. Sketch ist bekannt für seine einfache und intuitive Benutzeroberfläche und verfügt über eine große Community und eine Vielzahl von Plugins.
2. InVision Studio ist ein Design- und Prototyping-Tool, das sich auf Zusammenarbeit und schnelle Iteration konzentriert. Es ermöglicht es Designern, Wireframes, UI-Designs und interaktive Prototypen zu erstellen, sowie Echtzeit-Feedback von Teammitgliedern zu erhalten. InVision bietet auch InVision Cloud, eine Plattform, auf der man seine Prototypen hosten und mit anderen teilen kann.
3. Balsamiq ist ein Wireframing-Tool, das sich auf die schnelle Erstellung von Low-Fidelity-Designs konzentriert. Mit seiner einfachen Drag-and-Drop-Oberfläche und einer großen Auswahl an vordefinierten UI-Elementen können Designer schnell und effizient Wireframes und Flussdiagramme erstellen. Balsamiq eignet sich besonders für frühe Designphasen, in denen Ideen und Konzepte schnell skizziert werden sollen.
4. Proto.io ist ein browserbasiertes Prototyping-Tool, das sich auf die Erstellung von interaktiven und animierten Prototypen für mobile und Web-Anwendungen konzentriert. Es bietet eine Vielzahl von Funktionen, darunter vorgefertigte UI-Komponenten, Touch- und Gestenunterstützung sowie umfangreiche Animationsoptionen.
5. Webflow ist ein webbasiertes Design- und Entwicklungs-Tool, das es Designern ermöglicht, responsive Websites und Web-Apps direkt im Browser zu erstellen, ohne Code schreiben zu müssen. Webflow bietet sowohl Design- als auch Prototyping-Funktionen und ermöglicht es, HTML, CSS und JavaScript automatisch zu generieren.

Letztlich ist es empfehlenswert, mehrere Tools auszuprobieren und zu evaluieren, um das beste für die eigenen Bedürfnisse und den genutzten Workflow zu finden. Fast alle Tools stellen kostenlose Probezeiträume zur Verfügung.