Top 9 kostenlose und kostenpflichtige Prototyping-Tools für UX / UI-Designer

Entdecken Sie die besten Prototyping-Tools für UX & UI-Designer, die Ihre Produkterstellung schneller und effektiver machen.


Beste Protoyping-Tools für UX / UI-Designer

Der Prototyp funktioniert besser als tausend Meetings.

Schließlich können Ihre zukünftigen Benutzer und Stakeholder dies sehen und durchklicken. Dies ist eine großartige Möglichkeit, um Feedback zu sammeln und Ihr Produkt zu verbessern – in einem frühen Stadium, nicht wenn es fast fertig ist.

Deshalb versuchen Designer auf dieser Bühne ihr Bestes zu geben, und die richtigen Werkzeuge können sicherlich helfen.

Es ist jedoch schwierig, sich in dieser Vielzahl von Apps zu verlieren – kostenlose, kostenpflichtige, webbasierte und Desktop-Apps.

Um Ihnen bei der Auswahl der richtigen Software zu helfen, habe ich die 9 besten Prototyping-Tools für 2020 aufgelistet, sowohl trendy als auch effektiv.

Lassen Sie uns sie überprüfen.

Top kostenlose Prototyping-Tools

Was bringt es, Hunderte für Software auszugeben, wenn Sie kostenlose Prototyping-Tools verwenden können??

Es gibt jedoch einen Haken – kostenlose Tools sind meist einfach und haben nur eingeschränkte Funktionen. Sie funktionieren nicht, wenn Sie mit einem großen Entwicklerteam am UI / UX-Design arbeiten.

Wenn Sie jedoch an einem einzelnen Projekt wie Ihrer Unternehmenswebsite arbeiten, sind kostenlose Tools möglicherweise mehr als ausreichend.

Ich habe einige Prototyping-Tools zusammengestellt, die Sie vielleicht ausprobieren möchten – und die Sie keinen Cent kosten.

Adobe XD

Plattformen: macOS, Windows

Screenshot des Adobe XD Prototyping-Tools

Adobe XD kommt mit einer bemerkenswert einfachen, aber benutzerfreundlichen Oberfläche, die zu anderen Creative Cloud-Apps passt.

Im Abschnitt “Prototypen” können Designer Zeichenflächen oder Bildschirme verknüpfen, fertige Prototypen anzeigen und zur Überprüfung durch die Kunden freigeben.

Kernfunktionen:

  • Drahtprototyp fließt. Designer können vom Entwurfsmodus zum Prototyp wechseln und Zeichenflächen verbinden. Es hilft ihnen, den Fluss von Multi-Screen-Apps zu kommunizieren und zwischen verschiedenen Szenarien zu wechseln.
  • Voice Prototyping. Entwickler interagieren mit ihren Prototypen mithilfe von Sprachauslösern und Sprachwiedergabe. Einfach ausgedrückt, in Adobe XD können Designer Sprachbefehle als Auslöser verwenden.
  • Vorschau von iOS und Android auf dem Gerät. Beim Erstellen von Prototypen für iOS- oder Android-Apps können Designer die Vorschau ihrer Arbeit auf kompatiblen Geräten mithilfe der mobilen XD-App anzeigen. Auf diese Weise können sie die App gleichzeitig in der Vorschau anzeigen und testen.
  • Import von Skizzen-, Photoshop- und Illustrator-Dateien. Adobe-Designtools sind miteinander kompatibel, sodass Sie ein Element in Illustrator kopieren und in Adobe XD einfügen können. Neben den Adobe-Tools gibt es auch ein Plugin für Sketch.

Starterplan Benutzer haben Zugriff auf unbegrenzte freigegebene Dokumente, Editoren und freigegebene Links (bis April 2020)..

InVision

Plattformen: webbasiert

Screenshot des Invision-Prototyp-Tools

InVision ist bei weitem das beliebteste Tool für Wireframing, Prototyping und Modelle.

Kernfunktionen:

  • Erstellen umfangreicher interaktiver Prototypen. Das Hauptmerkmal, mit dem Designer effizient mit InVision umgehen und neue, saubere Prototypen erstellen können.
  • Kommentare hinterlassen. Das Designteam kann Kommentare zu verschiedenen Prototypen verfassen. Außerdem können sie den Änderungsverlauf einsehen. Die Dateien werden aktualisiert, sobald sie bearbeitet werden.
  • Synchronisation. Projekte werden mit Cloud-Speichern wie Google Drive oder Dropbox synchronisiert. InVision verfügt außerdem über ein Projektmanagementsystem, um den Workflow effizient zu organisieren.
  • Plugins. Einige Plugins, mit denen Benutzer Designs von Sketch und Photoshop an InVision senden können.

Free Plan bietet einen Prototyp mit unbegrenzten Bildschirmen, was für einzelne Designer ausreichend sein kann.

Wunder

Plattformen: Web, iOS, Android

Screenshot des Marvel-Prototyp-Tools

Wunder ist ein weiteres Prototyping-Tool mit vorinstallierten Elementen (Schaltflächen, Menüs) für verschiedene Plattformen.

Kernfunktionen:

  • Realistische Prototypen bauen. Designer können Designmodelle innerhalb von Minuten in interaktive mobile oder Web-Prototypen verwandeln. Ohne eine einzige Codezeile zu schreiben.
  • Benutzertests. Da UX eine entscheidende Rolle bei der Erstellung digitaler Produkte spielt, erhalten Designer möglicherweise während des Betatests Feedback von Benutzern und nehmen Änderungen vor, um die Anforderungen der Kunden zu erfüllen.
  • Automatisierte Erstellung von Designspezifikationen. Marvel verfügt über ein integriertes Handoff-Tool, mit dem Designer ihr Design an Entwickler übergeben können, indem sie ihnen eine URL senden.

Die Marvel-App ist recht einfach zu bedienen – die Benutzeroberfläche ist übersichtlich, sodass auch Anfänger damit umgehen können.

Außerdem hat Marvel ein Plugin für Sketch für bessere Interaktionen und produktive Arbeit.

Figma

Plattformen: webbasiert

Screenshot des Figma-Prototyp-Tools

Figma ist ein Cloud-basiertes Designtool, das Sketch ähnelt, aber für die Teamzusammenarbeit noch besser ist.

Firma macht es super einfach, Prototypen mithilfe von Übergängen zu erstellen, und Sie müssen dafür keine einzige Drittanbieter-App herunterladen.

Kernfunktionen:

  • Reibungslose Übergabe. Alles, was das UI / UX-Team tun muss, ist, einen Link mit Entwicklern zu teilen, und sie haben Zugriff auf alle Informationen – Readlines, grafische Elemente, Messungen, die zum Export bereit sind.
  • All-in-One-Plattform. Designer können problemlos zwischen Designdatei und Live-Prototyp wechseln. Die Änderungen werden sofort im Prototyp angezeigt.
  • Zusammenarbeit. Teammitglieder, einschließlich Kunden, können fertige Entwürfe einfach überprüfen, Feedback in Echtzeit hinterlassen und über Slack kommunizieren, das in Figma integriert ist.
  • Plugins. Designer können die Kernfunktionen von Figma mithilfe von Plugins wie Unsplash, Figmotion, Color Bling usw. erweitern – derzeit mehr als 100.

Figma ist für einzelne Designer kostenlos – bis zu 2 Redakteure und 3 Projekte.

Webflow

Plattformen: webbasiert

Screenshot des Webflow-Prototyp-Tools

Webflow ist ein Mehrzweckwerkzeug und die beste Wahl, wenn Sie es herausfinden möchten wie man Webdesign erstellt – und viel üben.

Mit Webflow erstellen Sie eine Website-Benutzeroberfläche, Animationen und Layouts sowie deren weitere Veröffentlichung.

Kernfunktionen:

  • Sich entwickeln&Design. Designer wandeln ihr Design in einen sauberen Code um, der allen erforderlichen Standards entspricht. Ein Designer wird wiederum auch zum Entwickler.
  • 3D-Animationen / Transformationen. Das UI / UX-Team erstellt 3D-CSS-Transformationen, ohne den Code schreiben zu müssen.
  • Eine breite Palette von Komponenten. Webflow enthält anpassbare Formulare, Dropdown-Menüs, Registerkarten, reaktionsschnelle Website-Navigation usw..
  • Webflow CMS. Mit Webflow CMS können Websitebesitzer ihre Website verwalten – in jedem Browser oder Gerät.
  • Integrationen. Als vollwertiger Website-Builder verfügt Webflow über Integrationen mit Google Analytics, Google Optimize, MailChimp und Zapier.

Daher ist Webflow eine gute Wahl für Designer, die alles selbst erledigen müssen.

Top bezahlte Prototyping-Tools

Mit kostenpflichtiger Software können Sie Vorteile wie unbegrenzten Speicherplatz, neue hilfreiche Funktionen, private Plugins und Schriftarten und vieles mehr erwarten.

Lassen Sie uns herausfinden, welche Prototyping-Tools im Jahr 2020 ihr Geld wert sind.

Skizzieren

Plattformen: Mac OS

Screenshot des Sketch-Prototyp-Tools

Wenn Sie jemals in die Nähe des UI-Designs gekommen sind, haben Sie sicher schon davon gehört. Heute, Skizzieren ist eines der beliebtesten und leistungsstärksten Prototyping-Tools.

Mit Sketch können Benutzer Wireframes, Modelle und Prototypen erstellen und aufgrund mehrerer Plugins mit anderen Prototyping-Tools interagieren. 

Kernfunktionen:

  • Prototyp entwickeln. Benutzer erstellen mit Sketch interaktive und robuste Prototypen und zeigen eine Vorschau ihres Designs an, um zu sehen, wie sie in Aktion arbeiten.
  • Vektorbearbeitung. Da Sketch ein vektorbasiertes Entwurfswerkzeug ist, verwendet das UI-Team Vektorbearbeitungsfunktionen, um vorhandene Formen zu erstellen und zu bearbeiten.
  • Voreinstellungen hinzufügen, speichern, exportieren. Designer erstellen Lieblingsvoreinstellungen und speichern sie in Sketch. Anschließend können sie diese Voreinstellungen exportieren, um sie mit Teammitgliedern zu teilen.
  • Code-Export. Design kann als Code exportiert werden. Somit trägt es zur Zusammenarbeit zwischen Designern und Entwicklern bei.
  • Hunderte von Plugins. Sketch bietet viele nützliche Plugins, die den Entwurfsprozess vereinfachen und das Gesamterlebnis verbessern.

Kosten: $ 99 für die persönliche Lizenz

Prinzip

Plattformen: Mac OS

Screenshot des Hauptprototyp-Tools

Prinzip populäreres Prototyping-Tool zum Erstellen animierter und interaktiver Schnittstellen.

Kernfunktionen:

  • Erstellen animierter Schnittstellen. Mit dem Prinzip können Designer interaktive und animierte Benutzeroberflächen erstellen.
  • Prototypen exportieren und anzeigen. Wenn Designer sehen möchten, wie ein Prototyp auf einem Telefon aussieht, können sie die Principle-App für das iPhone herunterladen und ihr Smartphone mit dem Mac verbinden, um die Vorschau zu testen.
  • Mehrere Bildschirme. Sie können mehrere Bildschirme für eine App mit mehreren Bildschirmen erstellen.
  • Importieren. Designer importieren Skizzendateien und animieren sie, wenn sie statisch sind.

Kosten: 129 $

Axure

Plattformen: macOS, Windows

Screenshot des Axure-Prototyp-Tools

Axure ist ein fortschrittliches UX-Prototyping-Tool, mit dem Designer Prototypen für Web- und mobile Plattformen erstellen können.

Kernfunktionen:

  • Prototyp entwickeln. Die neueste Axure-Version (RP 9) verfügt über den mobilen Modus mit Touch-Cursorn und mobilen Bildlaufleisten, um das mobile Erlebnis, Skalierungsoptionen, Verknüpfungen für nächste / vorherige Seiten usw. zu verbessern.
  • Formular-Widgets. Axure bietet benutzerdefinierte Stile, einschließlich Typografie, Rahmen und Füllungen, Stileffekte, mit denen Designer benutzerdefinierte Elemente hinzufügen können.
  • Dokumentation hinzufügen. Designer können Dokumentation in ihre Prototypen und Diagramme aufnehmen. Es hilft beim Schreiben detaillierter Informationen zu jedem Prototyp oder Diagramm – wie der Prototyp funktioniert, Hauptkomponenten der App und mehr.
  • Zusammenarbeit auf hoher Ebene. Designer arbeiten in Axure zusammen mit ihren Kollegen an demselben Prototyp. Es ist einfach, Designs mit Aktionären oder potenziellen Benutzern zu teilen, um deren Feedback zu erhalten.

Kosten: 29 US-Dollar für die Axure RP 9 Pro-Version pro Monat (495 US-Dollar – unbefristet)

JustInMind

Plattformen: macOS, Windows

Screenshot des Prototyp-Tools von Just In Mind

Einer der besten Vorteile von JustInMind Das Prototyping-Tool ist die Desktop-Version. Sie können es auf Ihrem Computer installieren und im Offline-Modus arbeiten, auch wenn Sie gerade keine Internetverbindung haben.

Kernfunktionen:

  • Vorinstallierte UI-Kits. JustInMind enthält UI-Kits, mit denen das Prototyping von Web- und Mobilversionen einfacher und schneller wird.
  • Anforderungsmanagement. Designer können alle Projektanforderungen zum Prototyping-Prozess hinzufügen und Text verknüpfen. Auf diese Weise verwalten sie alle Anforderungen und stellen sicher, dass jede von ihnen ausgeführt wird.
  • Integration. JustInMind kann in Sketch, Adobe Suite und JIRA integriert werden, um kollaborative Prozesse zu erweitern.
  • Zusammenarbeit. Designer teilen ihre Arbeit mit Teammitgliedern, arbeiten schnell zusammen und hinterlassen Kommentare.

Kosten: 29 USD pro Monat (228 USD jährlich)

Das ist es! Wie Sie sehen, gibt es eine große Auswahl an Prototyping-Tools – für einzelne Designer und Teamplayer.

Und es liegt nur an Ihnen, welche Sie verwenden. Wählen Sie also mit Bedacht aus.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map