So wählen Sie die richtigen UX-Design-Tools 

By Giles Airey

In den letzten Jahren sind unzählige neue UX-Designtools aufgetaucht – von Sketch und Adobe XD über Framer bis hin zu Figma. Vereinfachen diese Tools den Designprozess wirklich und woher wissen Sie, welches für Ihr Team geeignet ist? Wir haben dazu Giles Airey befragt, den Associate Creative Director von Inviqa.

Der überfüllte Markt für Designtools

In den letzten fünf Jahren hat sich Rapid Prototyping als wichtiger Dreh- und Angelpunkt nicht nur des Webdesigns, sondern auch des Produktdesigns etabliert. Die Geschwindigkeit der technologischen Entwicklung, von der Betriebssoftware bis zur App-basierten Funktionalität, motiviert uns zu erforschen, wie wir uns weiter mit unserer Umwelt verbinden können.

Das Entwerfen und Erstellen von digitalen Lösungen war noch nie so offen und erfordert daher heute eine Vielzahl von Planungsoptionen und Ansätzen. Design Sprints, Service Blueprinting und Experience Mapping sind nur einige Beispiele, an denen wir Informationen über Kunden und Demografie gewinnen können.

Vielleicht ist es symptomatisch für eine Welt, die im Hier und Jetzt existiert, aber die Tage der sauber montierten und ausgedruckten Visuals scheinen überholt. Kunden möchten berühren, erleben und sehen, wie ihre Produkte funktionieren und wie sie sich anfühlen.

Und natürlich wollen sie das alles morgen (oder am besten schon gestern!), als Designer müssen wir deshalb auf dem Laufenden bleiben, nicht nur, um das Produkt in seinem besten Licht zu zeigen, sondern auch, um zu zeigen, dass wir als Dienstleister auf dem neuesten Stand sind.

Glücklicherweise bietet der Markt inzwischen eine Vielzahl von Softwarelösungen, mit denen bereits in einem frühen Stadium genaue Produktversionen erstellt und prototypisiert werden können, um die Kluft zwischen Kunden und Designer sowie zwischen Designer und Entwickler erfolgreich zu überbrücken.

Das Problem besteht nun darin, herauszufinden, welche Lösung für Sie am besten geeignet ist.

Die Anforderungen an heutige Designtools

Digitale Teams können jetzt aus einer Vielzahl von ausgereiften, Cloud-basierten Tools auswählen, mit denen sich der Design-Prozess demokratisieren und Elemente des Design-Workflows vereinfachen lassen, sodass Designer und Nicht-Designer gleichermaßen darauf zugreifen können.

Diese Tools sind jedoch mit Kosten verbunden. Doch woher soll man am Anfang wissen, welche man auswählen soll? Und falls Ihre Teams mehre Tools verwenden, sind diese miteinander kompatibel?

Wie einfach ist es, gleichzeitig mit diesen Tools zu arbeiten? Und wenn sich ein Tool mit einem bestimmten Teil des Design-Workflows befasst, wie einfach ist es dann, zwischen verschiedenen Umgebungen zu wechseln – beispielsweise vom visuellen Design zum Prototyping? Es stellt sich auch die Frage, wie viel Upskilling- und Onboardingzeit Ihr Team für den Einstieg benötigt.

Als 41-jähriger Designer mit mehr als 20 Jahren Erfahrung in den Bereichen Grafikdesign, Marketing, Branding, Werbung und UX gebe ich gerne zu, dass das Tempo, mit dem diese Anwendungen auf den Markt kommen, überwältigend ist, was oft Entscheidungen im Frühstadium schwieriger als nötig macht. Aber, wie bei allem anderen, habe ich Zeit und Anstrengung investiert, um Einblick zu erhalten.

Im Folgenden finden Sie eine allgemeine Übersicht über einige der beliebtesten Tools und die Aufgaben, für die sie am besten geeignet sind.

Beachten Sie bitte, dass es sich dabei nicht um einen detaillierten Vergleich der technischen Daten handelt; dies sind nur einige Beobachtungen, die auf meinen Erfahrungen bei der Arbeit mit diesen Tools für Kunden hier bei Inviqa basieren.

Es ist auch wichtig zu beachten, dass es verschiedene Möglichkeiten gibt, an einem Designprojekt zu arbeiten, und dass es kein „Silver Bullet“-Tool gibt, das allein alle Probleme im Design-Workflow löst.

Eine Übersicht gängiger UX-Designtools

 

Framer

Überblick

  • Möglicherweise das fortschrittlichste Prototyping-Tool auf dem Markt auf einem Level, wo Design auf Entwicklung trifft. Es bietet das realistischste Beispiel dafür, wie ein Produkt funktionieren, sich anfühlen, bewegen und anpassen kann. In den Händen eines erfahrenen Framer-Designers kann es das Prototyping auf eine andere Ebene heben und Agenturen virtuelle Replikat-Outputs für Benutzertests bereitstellen.

Die Vorteile

  • Erfordert grundlegende JavaScript-Eingaben, sodass eine sehr gute Umsetzung in die Entwicklung und eine frühzeitige Zusammenarbeit ermöglicht wird.
  • Unterstützt komplexe Prototypen wie AR- und VR-Erfahrungen.
  • Es kann mit seiner beeindruckenden Nutzerschnittstelle einen nuancierten Unterschied in der Wahrnehmung machen.
  • Hervorragend geeignet, um wichtige und anspruchsvolle Transitions zu erstellen, welche das elegante und ansprechende UI und UX frühzeitig in die Anforderungen eines Projekts einbetten und sicherstellen, dass sie nicht vernachlässigt werden.
  • Großartige Community-Meetups zur Weiterentwicklung und Unterstützung der Anwendung.

Die Nachteile

  • Benötigt eine menge Upskilling, um mit ihm auf einem Niveau zu arbeiten, bei dem es einen wirklichen Unterschied zu anderen Anwendungen macht

Ideal für

  • Spezielle UI-Designer, die ihre Arbeit auf ein anderes Level heben wollen. Es ist ein großartiges Werkzeug, mit dem Teams Prototypen erstellen können, ohne Entwicklungsteams einbeziehen zu müssen.
 

Adobe XD

Überblick

  • Ich war ein großer Fan davon, als es herauskam. Vielleicht war es das Maß an Komfort und Voreingenommenheit, das ich nach vielen Jahren mit Adobe CS empfand. Vielleicht lag es daran, dass es das erste Prototyping-Tool war, das ich wirklich erforscht habe. Nach ein oder zwei Projekten wurden allerdings die Einschränkungen immer deutlicher.

Die Vorteile

  • Intuitiv mit den anderen Adobe CS Interfaces verzahnt (der Name „Adobe“ schafft Vertrauen).
  • Erhältlich mit Ihrem CS-Paket.
  • Guter Support, wie Sie es von Adobe erwarten, und viele Informationen in zahlreichen Foren.
  • Hervorragende Integration von Design und Animation; hält die beiden Elemente klar und sauber voneinander getrennt.
  • Alles in einem: Bietet Links zu Entwürfen und Aufzeichnungen von Demos, ohne dass Plugins und Anwendungen von Drittanbietern erforderlich sind. Dies macht es zu einem großartigen Tool für erfahrene Profi-Designer, die dem Team schnell ihre „Vision“ vermitteln möchten.
  • Kann Ihr Design vollständig und präzise offline erstellen, in der Vorschau anzeigen und wiedergeben, was es für lange Zugfahrten außerordentlich wertvoll macht.
  • Zuverlässige Funktionalität für das mobile Mirroring.

Die Nachteile

  • Es ist begrenzt und hat Mühe, einige der grundlegendsten Funktionen zu bieten.
  • Noch nicht ausgereift genug für High-End-Prototyping.

Ideal für

  • Schnelle Ideenfindung und Prototyping für Designer auf allen Ebenen. Besonders nützlich für leitende Designer, UX-Strategen und Kreativdirektoren, die ihre Ideen schnell an ihr Team und den Kunden weitergeben müssen, ohne detaillierte Symbolbibliotheken und Stylesheets erstellen zu müssen.
 

Sketch

Überblick

  • Das Standard-Paket der Branche, das nicht nur das Web, sondern auch das Produktdesign revolutioniert hat. Es ist einfach zu bedienen und ermöglicht es einem leitenden Designer, schnell und effektiv Ideen auf anspruchsvollster Ebene zu entwerfen. Als Anwendung mit enormer Tiefe und mehreren Kategorisierungsebenen kann Sketch in den Händen eines erfahrenen UI-Designers komplette Projekte realisieren, an denen mehrere Plug-Ins und Schwesteranwendungen beteiligt sind.

Die Vorteile

  • Wird größtenteils als Industriestandard angesehen und ist das Werkzeug, das die meisten Designer verwenden – daher bei Agenturen allgegenwärtig.
  • Hat mehrere Plugins wie Craft oder Anima, die sich ständig weiterentwickeln und die Effizienz und die Qualität der Designarbeit erhöhen.
  • Obwohl zeitaufwendig, erlaubt die Struktur des Programms dem Designer bei korrekter Anwendung, ein konsequentes Archiv von Symbolen und Designregeln zu erstellen, das für die Entwicklung sehr hilfreich sein kann.
  • Es stehen eine Vielzahl von Ressourcen, Bibliotheken und Vorlagen zum kostenlosen Download zur Verfügung, mit denen Sie für jedes Projekt eine wertvolle Starthilfe erhalten können.
  • Die Verzahnung mit InVision bietet einem Team und seinen Kunden präsentierbare Links, welche die Designs in einen beispielsweise mobilen Kontext stellen.
  • Abstract ist eine großartige Kollaborationsplattform für die Zusammenarbeit mit Sketch, welche mehreren Benutzern die Möglichkeit bietet, an demselben Projekt zu arbeiten und Archive, Branches, Commits und Zusammenführungen zu erstellen. Denken Sie an GitHub für Designer.
  • Es verfügt über zuverlässige Funktionen für das Phone-Mirroring.
  • Es passt gut zu Zeplin, das durch die Bereitstellung von HTML die Lücke zwischen Design und Entwicklung schließt.

Die Nachteile

  • Man sollte Dateien von Anfang an stabil einrichten, um die Effizienz des Designs bereits in einer frühen Phase zu unterstützen. Dies kann sehr zeitaufwendig sein und erfordert einiges an Wissen, um es richtig zu machen.
  • Wenn Sketch für das gesamte Projekt verwendet werden soll, kann es später zu größeren Problemen kommen, wenn einige Symbole und Stile von Anfang an falsch dokumentiert werden.
  • Als Designleiter kann es oft recht problematisch sein, ein Projekt in Sketch zu starten und Dateien an das Team weiterzugeben, da möglicherweise Nacharbeiten erforderlich sind, um die Designs auf den neuesten Stand zu bringen. Und so kann es nach meiner Erfahrung zu Verwirrung kommen, da häufig ein Vorgänger-Design auftaucht.
  • Es werden viele Plugins und Schwesterprogramme von Drittanbietern wie InVision benötigt, was zu Beginn recht unübersichtlich sein kann.

Ideal für

  • UI-Designer, die ein Projekt vollständig „in der Hand haben“ wollen. Damit meine ich das Einrichten der anfänglichen Entwurfssysteme und das Wissen und Absicht, Abstract für die Zusammenarbeit mit anderen Designern zu verwenden, Zeplin für die Zusammenarbeit mit Entwicklern und InVision für die Zusammenarbeit mit allen, einschließlich Kunden. Ideal für diejenigen, die Zeit haben, mit Entwicklern zu arbeiten und alles detailliert einzurichten, damit das Projekt effizient und in der vorgesehenen Geschwindigkeit voranschreiten kann.
 

Figma

Im Überblick

  • Ich habe dies selbst nur als UX-Berater wirklich genutzt, aber es hat sich als großartiges Tool für die Zusammenarbeit erwiesen, mit dem ich online direkt in das Projekt eines Kunden „hineingehen“ und sehen konnte, wie alle an verschiedenen Artboards arbeiten. Ich fühlte mich zuerst ein wenig aufdringlich, aber sobald ich den Überblick hatte, konnte ich Kommentare und Rückmeldungen abgeben – entweder unabhängig voneinander oder indem ich Konversationsthreads eröffnete, um die Designs zu unterstützen.

Die Vorteile

  • Ermöglicht Designern den nahtlosen Übergang vom visuellen Design zum Prototyp.
  • Webbasierter Ansatz: browserbasiert, gemeinsame Dateien / Designstudio in der Cloud.
  • Mobile Pairing / Mirroring
  • Möglichkeit, Designs live zu kommentieren.
  • Nicht-Designer haben Zugriff / können im gesamten Team unterschiedliche Zugriffsebenen haben.
  • Es verfügt sehr gute responsive Eigenschaften, die ein schnelles Broad-Stroke-Designing für mehrere Displaygrößen ermöglichen.
  • Offline-Zugriff (mehr dazu hier)

Die Nachteile

  • Ich konnte das Mirroring auf meinem Handy einfach nicht zum Laufen bringen. Ich bin mir nicht sicher, ob dies ein Problem mit der Dateigröße war, aber es ist immer wieder fehlgeschlagen.
  • Ich hatte Mühe, die Vorschaufunktion zu aktivieren, um eine Vorstellung davon zu bekommen, wie der Flow aus gerätespezifischer Sicht in meinem Browser funktioniert.
  • Ich habe den Eindruck, dass dies ein großartiger Ideengenerator ist, aber vielleicht nicht so „dev-ready“ zur Übergabe ist wie einige seiner Konkurrenten.

Ideal für

  • Teams und unterschiedliche Rollen, die an mehreren Standorten arbeiten. Die Visualisierung der verschiedenen Konten in den verschiedenen Bereichen der Artboards und die nahtlose Integration der Kommentarfunktion sorgen für ein fast virtuelles Studio ohne Drittanbieter-Plugin, wie es bei Sketch mit InVision der Fall ist.

Verbesserte Kollaboration über Ihre Designtools hinaus

Tools wie Figma und Framer erleichtern die Entwicklung digitaler Produkte und die Zusammenarbeit mit dem gesamten Produktteam. Aber sie sind nur so effektiv wie die Strukturen, Ansätze und Denkweisen der Menschen, die sie verwenden.

Wenn Teams über ein neues Tool nachdenken, müssen sie sich darüber klar werden, wie ihre Designprozesse funktionieren und wo sie integrativer werden können. Warum? Weil es im Interesse aller liegt, mehr Menschen in den kreativen Prozess einzubeziehen.

Wenn es für einen breiteren Pool von Nicht-Designern und Geschäftsvertretern einfacher wird, auf die Fortschritte bei Entwürfen und Prototypen zuzugreifen, sie zu manipulieren und zu überwachen, bedeutet das eine bessere Zusammenarbeit und bessere Ergebnisse.

Teams sollten auch andere Möglichkeiten in Betracht ziehen, wie der Designprozess vereinfacht werden kann, denn in den meisten Fällen (insbesondere wenn mehrere Unternehmen oder Agenturen an einem Projekt zusammenarbeiten) verwenden Produktdesigner und Softwareingenieure mehrere Tools und Workflows, die zu längeren Prozessen, Kommunikationsverlusten und mehr manueller Arbeit führen können – Dinge, die alle die Qualität der Ergebnisse beeinflussen.

Aus diesem Grund lohnt es sich, Tools in Betracht zu ziehen, mit denen diese Lücken geschlossen werden und welche die Zusammenarbeit über kompatible cloudbasierte Bereiche unterstützen, was letztendlich zur Erstellung besserer digitaler Produkte führt.

Wir helfen einer Vielzahl von Organisationen dabei, bahnbrechende digitale Erfahrungen anbieten zu können.. Sprechen Sie jetzt mit uns über Ihre aktuellen UI/UX-Designanforderungen. 

Hier finden Sie den Blogpost im englischen Originaltext.