8 wichtige Tools für das UI-Prototyping

Wenn ein Bild mehr sagt als tausend Worte, dann sagt ein guter Prototyp mehr als tausend Treffen. Beim Design von Benutzeroberflächen ist es entscheidend, klare Prototypen zu teilen, denen alle Beteiligten folgen und die sie verstehen können, um eine reibungslose und effiziente Entwicklung und Übergabe ohne Kopfschmerzen zu erreichen. Das Prototyping hilft Designern und Kunden, in allen Phasen auf derselben Seite zu bleiben, indem es Kunden ein klares Fenster in die Erstellung und die Möglichkeit gibt, mit Feedback zu antworten.

Es gibt viele Prototyping-Tools auf dem Markt und keine perfekte Lösung, die für jedes Produkt oder jede Phase der Produktentwicklung geeignet ist. Jedes Tool hat einige Vorteile und Funktionen, die anderen fehlen. Das beste Tool für ein bestimmtes Projekt oder eine bestimmte Aufgabe hängt also davon ab, was Sie in Bezug auf Wiedergabetreue, Anpassungsfähigkeit, Zusammenarbeit, Benutzerfreundlichkeit und natürlich Kosten benötigen. Hier sind acht der nützlichsten Tools auf dem Markt, mit denen Prototypen für Feedback- und Usability-Tests entwickelt und gemeinsam genutzt werden können. (Schauen Sie sich auch unseren speziellen Beitrag an Benutzertests .)

01. InVision

Prototyp-Tool



InVision ist einfach zu verwenden, um einfache Click-through-Prototypen zu erstellen(Bildnachweis: InVision)
  • Beste für: Eine niedrige Lernkurve
  • Preis: Ein Prototyp, frei; Unbegrenzte Prototypen, 25 USD pro Monat

Webbasiert InVision ist eines der beliebtesten Tools zum Erstellen interaktiver Prototypen statischer Bildschirme, für die keine High-Fidelity-Mikrointeraktionen oder ausgefeilte Zustandsübergänge erforderlich sind. Die App hat dank ihrer Ähnlichkeit mit dem Designtool Sketch eine geringe Lernkurve. Es bietet einen einfach zu verbindenden Workflow, mit dem Designer auf sehr einfache Weise statische Screenshots hochladen und anklickbare Prototypen erstellen können. Timeline-Animationen werden unterstützt und die Interaktion ist schnell und einfach zu verstehen, obwohl die Leistung bei komplexeren Prototypen immer noch uneinheitlich sein kann.

Funktionen für die Projektzusammenarbeit ermöglichen Feedback, erreichen jedoch nicht die von Figma angebotene Echtzeitzusammenarbeit. Ein weiterer Nachteil ist, dass Sie ohne Desktop-App nur online bearbeiten können. Es gibt eine mobile Anwendung für natives Prototyping, aber einige Designer beschweren sich, dass sie nicht so gut funktioniert wie der Browser. InVision bietet auch eine eigene Design-App, InVision Studio für Mac und Windows, mit der Designer Sketch oder Photoshop überspringen und direkt in InVision entwerfen können.

02. Wunder

Prototyp-Tool

Die Marvel App ist eines der am einfachsten zu verwendenden Prototyping-Tools(Bildnachweis: Marvel)
  • Beste für: Einfachheit der Verwendung
  • Preis: Ein Projekt, kostenlos; unbegrenzte Projekte $ 12 p / m

Marvel ist eines der einfachsten und intuitivsten Prototyping-Tools und eine weitere gute Option, um einfache Prototypen für die Bildschirmverknüpfung zu erstellen, wenn Sie keine komplexeren Mikrointeraktionen testen müssen. Es funktioniert direkt aus vorgefertigten PSD- oder Sketch-Dokumenten, sodass visuelle Entwürfe ohne Konvertierungsformatierung verwendet werden können. Es ist möglicherweise die einfachste App für Nicht-Designer und für Stakeholder sehr einfach zu verwenden, um Feedback zu geben. Wie InVision, Wunder ist auf eine Online-App beschränkt.

03. Figma

Prototyping-Tool

Figma eignet sich dank seiner Tools für die Zusammenarbeit in Echtzeit hervorragend für Teams(Bildnachweis: Figma)
  • Beste für: Kollaboratives Arbeiten
  • Preis: Starterkonto, kostenlos; professionelles Konto $ 12 pro Editor p / m

Figma wird als kollaboratives UI-Designtool in Rechnung gestellt und dieser Aspekt hat es so beliebt gemacht. Die Zusammenarbeit in Echtzeit macht es vergleichbar mit der Arbeit an einem Google-Dokument. Die App behält ihre reibungslose Leistung bei, auch wenn mehrere Teammitglieder gleichzeitig an einem Projekt arbeiten. Dies macht es großartig, Prototypen mit mehreren Stakeholdern zu teilen und sofortiges Feedback zu erhalten, und spart Zeit, indem Teams den schrittweisen Ansatz aufgeben und gleichzeitig über ein gesamtes Projekt hinweg arbeiten können. Wie bei Google Docs können frühere Versionen problemlos abgerufen werden, sodass Iterationen problemlos nachverfolgt werden können.

Das webbasierte Tool verfügt auch über Desktop-Versionen für Windows und iOS, und Prototypen können problemlos für Windows, iOS und Android freigegeben werden. Ein Nachteil für den Moment ist das Fehlen von Animationsfunktionen, da Lottie-Dateien noch nicht unterstützt werden.

04. UXPin

Prototyping-Tool

Mit UXPin können Prototypen Animationen enthalten, die der Realität näher kommen(Bildnachweis: UXPin)
  • Beste für: Animationen
  • Preis: Ab £ 20 pro Monat

Wenn Sie leistungsstarke Animationen in einem Prototyp präsentieren müssen, anstatt nur Bildschirme miteinander zu verknüpfen, dann UXPin ist eine der besseren Möglichkeiten. Sie animieren zwischen verschiedenen Versionen eines Elements und aktualisieren die Eigenschaften zwischen Status mit einem einzigen Klick. Sie können Prototypen auch eine Logikebene hinzufügen und Regeln festlegen, wann Interaktionen stattfinden sollen. Dies ist ein gutes Werkzeug, um zu zeigen, wie Interaktionen im fertigen Produkt wirklich funktionieren. Sie können auch JavaScript verwenden, um Rechenkomponenten wie Einkaufswagen zu erstellen, und Prototypen können über den UXPin Mirror problemlos für iOS und Android freigegeben werden.

UXPin verfügt auch über Tools für die Zusammenarbeit und bietet automatische Spezifikationen für die Übergabe. Dies macht es zu einem All-in-One-Paket, das von der ersten Entwurfsphase bis zur Auslieferung verwendet werden kann. Es ist für Windows, Mac und online verfügbar.

05. ProtoPie

  • Beste für: Code-freie High-Fidelity-Prototypen
  • Preis: $ 13 p / m

Protopic kommt zur Geltung, wenn Sie komplexere Interaktionen zeigen müssen, die der Realität nahe kommen. Sie können Interaktionen mit einem Objekt, einem Trigger und einem Antwortfluss demonstrieren. Es bietet auch die Möglichkeit, Sensoren für intelligente Geräte in Prototypen zu steuern, einschließlich Kompass-, Neigungs-, Ton- und 3D-Berührungssensoren. Dies alles macht es derzeit zu einer der besten Optionen für die Erstellung von High-Fidelity-Prototypen ohne Codierung und für echte Usability- oder UX-Evaluierungszwecke, wenn Sie fortgeschrittene Benutzerreisen mithilfe von Variablen und Bedingungen anzeigen müssen, die logische und dynamische Eingaben verarbeiten können.

Gemeinsam nutzbare Prototypen können interaktiv in der Browser-App angezeigt und erlebt oder nützlicher auf einem mobilen Gerät bereitgestellt werden, damit sie wie eine echte native App getestet werden können, indem einfach ein QR-Code gescannt wird.

06. Adobe XD

Prototyping-Tool

Adobe XD bietet ein All-in-One-Paket vom Design bis zum Prototyp(Bildnachweis: Adobe Inc.)
  • Beste für: Designer, die mit Adobe-Produkten arbeiten
  • Preis: £ 9,98 p / m pro Benutzer

Wenn Sie sich für die Adobe-Produktsuite engagieren, Adobe XD lässt sich gut integrieren und bietet eine All-in-One-UI-Designoption mit einer Prototyp-Registerkarte, in die einfach gewechselt werden kann. Es fühlt sich etwas anders an als andere Adobe-Produkte, bietet aber eine scheinbare Integration. Natürlich funktioniert es sowohl unter Windows als auch unter Mac, was es zu einer Alternative zu Sketch für das Entwerfen für Windows-Benutzer macht. Dies ist auch eine der wenigen Optionen zum Erstellen von Prototypen mit Sprachbefehlsauslösern und Wiedergabe, wodurch es für ganz bestimmte Projekte nützlich sein kann.

07. Framer X.

  • Beste für: Designer, die codieren
  • Preis: 144 USD pro Jahr

Framer X. ist eines der vielseitigsten aller Prototyping-Tools. Die Einschränkung ist, dass es hilfreich ist, Code zu schreiben, um sein volles Potenzial auszuschöpfen. Die meisten Prototyping-Tools sind codefrei, aber Framer X verwendet die JavaScript-Bibliothek React (lesen Sie mehr darüber wie Framer X hier funktioniert ). Dies und das Fehlen freundlicher Kontrollen führen dazu, dass die Lernkurve für Nicht-Programmierer entmutigend sein kann. Wenn Sie jedoch codieren können oder bereit sind, sich auf den neuesten Stand zu bringen, können Sie mit Framer X Prototypen erstellen, die vom Endprodukt kaum zu unterscheiden sind. Auf diese Weise können Sie vollständig interaktive Prototypen vorführen und zuverlässiges Feedback zum natürlichen Benutzerverhalten sammeln.

Es bietet nahtlose Unterstützung für HTML, CSS und Javascript. Es unterstützt das Aufrufen der Systemtastatur, die Eingabe von echtem Text und die Verwendung als Daten sowie die echte Steuerung und Überwachung von Audio und Video. Über den Komponentenspeicher können Sie auch Analysen und Heatmaps hinzufügen, um Prototypen zu testen.

08. Prinzip

Prototyping-Tool

Das Prinzip ermöglicht das Prototyping bestimmter komplexer Animationen(Bildnachweis: Prinzip)
  • Beste für: High-Fidelity-spezifische Animationen für iOS
  • Preis: 129 $

Das Prinzip zeichnet sich durch die reibungslose Anzeige spezifischer, komplexer animierter Interaktionen für mobile iOS-Apps aus. Es bietet die Möglichkeit, einzelne Assets zu betrachten und zu untersuchen, wie diese Assets unabhängig voneinander animiert werden, bis hin zu Zeitabläufen und Beschleunigungen. Dies ist ideal für das Prototyping kleinerer Interaktionen innerhalb von Designs. Es kann Sketch-Dateien importieren und die Sketch-ähnliche Oberfläche erleichtert das Erlernen der Verwendung. Benutzer von Adobe After Effects sollten auch das Hinzufügen von Animationen zu Ebenen als recht vertraut empfinden.

Prinzip ist eine Offline-App, die nur für Mac verfügbar ist, daher fehlen Tools für die Zusammenarbeit. Die Spiegel-App für Live-Tests ist auch nur für iOS verfügbar, für Android ist keine Option verfügbar.

Weiterlesen:

Creative Bloq hat diesen Inhalt im Rahmen einer bezahlten Partnerschaft mit iStock von Getty Images erstellt. Der Inhalt dieses Artikels ist völlig unabhängig und spiegelt ausschließlich die redaktionelle Meinung von Creative Bloq wider.