12 Top-Prototyping-Tools

Seite 1 von 2: Seite 1

Prototyping ist ein wesentlicher Bestandteil jedes digitalen Designprozesses. Es hilft uns, unsere Designs zu simulieren und verschiedene zu erkunden Benutzererfahrungen und testen Sie Reisen und Benutzerströme innerhalb unserer Projekte. Die Zeiten des Druckens und Bereitstellens von PDFs von Designs sind lange vorbei.

Es gibt genügend von Webdesign-Tools herum, aber Prototyping-Tools haben sich in den letzten Jahren wirklich bewährt. Mit diesen Prototyping-Tools können Sie alle Designherausforderungen bewältigen, unabhängig davon, ob Sie aus einer Idee etwas Schönes oder Technisches erstellen möchten. Bei jedem Prototyp ist es wichtig, Ihre Benutzeroberfläche zu testen und damit zu spielen, damit Sie die Erfahrung validieren können.

Die meisten dieser Tools sind mit einem Preisschild ausgestattet, einige bieten jedoch freien Zugriff für ein einzelnes Projekt oder begrenzte Seiten, sodass Sie die richtige Anwendung für Ihr Projekt finden.



Wenn Sie speziell nach Wireframing-Tools suchen, lesen Sie unsere Liste der beste Drahtgitterwerkzeuge verfügbar.

Hauptabbildung: Newton Ribeiro

01. Proto.io

Preis: Ab 24 USD / Monat (Kostenlose Testphase)

Vorteile:

  • Benutzertests aufzeichnen
  • Gemeinsam nutzbare Prototypen
  • Mobile App verfügbar
  • Unterstützt VR-Prototyping
  • Add-Ons verfügbar

Nachteile:

  • Nicht gut für den Offline-Gebrauch

Proto.io ist ein unglaublicher Anwärter auf die Erstellung lebensechter Prototypen von groben Ideen bis hin zu vollwertigen Designs. Das Tool bietet auch viele Möglichkeiten für Ihre Projekte, einschließlich der Erstellung detaillierter Animationen und benutzerdefinierter Vektoranimationen.

Es ist sicherlich einer der Spitzenreiter bei der Bewertung von Tools zur Erstellung Ihrer Prototypen. Mit Proto.io ist das Starten eines Projekts so einfach, wie Sie es möchten. Mit nur einer groben Idee können Sie sofort loslegen und vordefinierte Assets verwenden, um Ihr Konzept schnell weiterzuentwickeln.

Sobald Sie mit Ihren Ideen zufrieden sind, können diese zur weiteren Validierung und Reflexion in poliertere und präsentablere Drahtgitter umgewandelt werden. Im nächsten wichtigen Schritt können Sie das Design Ihrer Prototypen so anpassen, dass sie dem Endergebnis so gut wie möglich entsprechen.

Proto.io ist ein webbasiertes Tool und verfügt über eine Vielzahl von Add-Ons und Funktionen, darunter das Importieren von Sketch- und Photoshop-Dateien, VR-Prototyping, UI-Bibliotheken und sogar Bildschirmaufzeichnungen für Benutzertests. Dies kann wirklich hilfreich sein, wenn Sie zu und von anderen Anwendungen wechseln.

Letztendlich müssen Sie sich etwas Zeit nehmen, um sich mit diesem Tool vertraut zu machen. Es kann viel damit gemacht werden und es gibt eine große Anzahl von Optionen und Menüpunkten, mit denen man spielen kann. Sobald Sie sich damit vertraut gemacht haben, wird es schwierig sein, es wegzuräumen. Die Aussicht, detaillierte Animationen zu erstellen, macht dieses Tool zu einem hervorragenden Werkzeug und zur perfekten Möglichkeit, Ihre Ideen so realistisch wie möglich umzusetzen.

02. Adobe XD CC 2018

Preis :: 9,99 $ / Monat | £ 9,98 / Monat
Probieren Sie eine kostenlose Testversion aus :: UNS | Vereinigtes Königreich

Vorteile:

  • Fügen Sie Interaktionen mit nur wenigen Klicks hinzu
  • Bereinigen Sie die Benutzeroberfläche
  • Führen Sie Prototypen aus und exportieren Sie sie, um sie einfach zu testen
  • Erstellen Sie Prototypen mit sehr wenigen Einschränkungen

Nachteile:

  • Die Animationsoptionen sind begrenzt

Adobe XD bietet die beste Umgebung für digitale Projekte unter Adobe Kreative Wolke Sammlung von Designwerkzeugen. Wenn Sie ein begeisterter Adobe-Benutzer sind und XD noch nicht kennen, ist die Benutzeroberfläche möglicherweise zunächst nicht sehr vertraut, aber sie kann sich mit den anderen führenden Tools messen. Es ist ein Sprung, wenn Sie schon eine Weile in Photoshop entworfen haben. Es lohnt sich jedoch, wenn Sie ein großer Adobe-Fan sind.

Mit diesem Tool können Sie mit sehr wenigen Einschränkungen High-Fidelity-Designs und -Prototypen erstellen. Es wird sicherlich immer zur Waffenkammer für die visuelleren Projekte gehören. Es ist sehr designorientiert und sehr einfach zu bedienen, mit einigen wirklich netten Funktionen, um den Designprozess effizienter und zufriedenstellender zu gestalten.

Es gibt zwei Modi für Ihre Leinwand: Design und Prototyp. Sobald Sie eine Reihe von Oberflächen und Zeichenflächen erstellt haben, können Sie Beziehungen zwischen anklickbaren Elementen und Seiten zeichnen. Sie können zwischen Übergangsstilen wie Gleiten, Schieben und Auflösen wählen. Mit XD können Sie dann Prototypen ausführen und exportieren, um sie zu testen und Kunden zu zeigen.

Die beste Adobe Creative Cloud von heute bietet AdobeEmpfohlener Händler Creative Cloud Alle Apps £ 49.94 / mth Aussicht beim Adobe Kreative Wolkenfotografie £ 9,98 / mth Aussicht beim Adobe Creative Cloud Single App £ 19.97 / mth Aussicht beim Adobe

03. Axure

Preis: Ab 29 USD / Monat

Vorteile:

  • Ideal für komplexe Websites und Ideen
  • Hervorragend im Umgang mit dynamischen Daten
  • Bedingte Logik
  • Kann als HTML-Dateien exportiert werden
  • Sehr funktional

Nachteile:

  • Nicht ideal für das Prototyping von High-Fidelity-Designs

Axure hat es geschafft, einen Ruf als eines der besten Wireframing-Tools auf dem Markt aufzubauen und die perfekte Wahl für komplexere Projekte zu sein, die dynamische Daten erfordern. Mit Axure können Sie Ihre Aufmerksamkeit wirklich darauf richten, Projekte zu erstellen, die sowohl technischer sind als auch mehr Aufmerksamkeit in Bezug auf Struktur und Daten erfordern.

Obwohl es nicht unbedingt die erste Wahl für das Prototyping eines High-Fidelity-Designs ist, ist es dennoch großartig, um größere Projekte / Softwareplattformen schnell durch die Drahtmodellkonzepte der ersten Stufe zu führen.

Ein Hauptvorteil von Axure besteht darin, dass dynamische Inhalte sehr gut verarbeitet werden und Sie sie entsprechend bestimmten Benutzerreisen oder Interaktionen ändern können. Dies wird durch eine Kombination aus bedingter Logik und Manipulation von Seiten, Inhaltsblöcken oder Text durch Festlegen von Variablen und Parametern erreicht.

Das Potenzial dessen, was Sie mit Axure tun können, hört hier jedoch nicht auf. Es ist eine großartige Option für die Visualisierung von Flussdiagrammen und Diagrammen. Dies ist genau das Richtige, um Ihnen zu helfen, einige der technischeren Reisen zu artikulieren, auf die Sie möglicherweise stoßen.

In Bezug auf die technischen Aspekte eines Projekts sollte Axure ganz oben auf Ihrer Einkaufsliste stehen, wenn es um technische Aspekte des Designs sowie datengesteuerte oder dynamische Plattformen geht, wobei Design am Ende nur eine kosmetische Überarbeitung darstellt. Funktion über Form fällt mir ein.

04. Origami Studio

Preis: Frei

Origami wurde ursprünglich von Facebook entwickelt, um dem Team beim Aufbau und Design von Produkten zu helfen. Jetzt ist es kostenlos verfügbar: Sie können sich als Apple-Entwickler registrieren und dann Xcode mit Quartz Composer herunterladen und installieren, damit Origami auf einem Mac ausgeführt werden kann.

Die Installation dieses Tools erfordert mehr Arbeit als andere Prototyping-Optionen. Nach der Installation können Sie jedoch mit der Erstellung von Designkonzepten beginnen, die das Scrollen, Tippen, Wischen und Seitenlinks simulieren. Origamis Dokumentation, Tutorials und Videos mit Anleitungen erleichtern den Einstieg.

Skizzen- und Photoshop-Designs können in Origami importiert werden, und Ihre Projektebenen bleiben erhalten und können nach Bedarf verknüpft, animiert und transformiert werden. Origami ist auch nicht auf mobiles Design ausgerichtet: Sie können reaktionsschnelle Websites entwerfen und Funktionen wie Texteingabe, FaceTime-Kamera und OS X per Drag & Drop simulieren.

Sie können Ihre Prototypkomponenten (einschließlich Animationen) mit nur einem Klick exportieren, sodass Ingenieure sie kopieren und in das Projekt einfügen können. Origami enthält ein Präsentationstool, mit dem Sie Ihrem Design einen benutzerdefinierten Hintergrund hinzufügen, im Vollbildmodus anzeigen und verschiedene Geräte simulieren können.

Als kostenlose Prototyping-Lösung hat Origami viel zu bieten. Ein Nachteil ist jedoch, dass Ihre Kunden oder das Designteam noch keinen direkten Kommentar zum Projekt- oder Versionsverlauf abgeben können.

05. Webflow

Das Entwerfen von Prototypen ist mit Webflow schnell und nahtlos, aber dieses Tool glänzt wirklich, wenn Ihr Prototyp fertig ist. Mit einem Klick können Sie Ihren fertigen Prototyp in eine produktionsbereite Site verwandeln.

Vor kurzem hat Webflow eine bahnbrechende neue Funktion eingeführt: ein CMS für Ihre Prototypen. Das CMS von Webflow ist vollständig visuell und ermöglicht es Ihnen, leistungsstarke, dynamische Websites zu erstellen, ohne eine einzige Codezeile zu schreiben. Eine weitere besonders nützliche Funktion ist die Möglichkeit, ein Blog mit dem Prototyp-Konzept Ihrer Blog-Seite zu erstellen.

Wenn Sie ein freiberuflicher Designer sind und Schwierigkeiten hatten, einen Entwickler zu finden, der Ihre Entwürfe in Produktionsstätten umwandelt, ist Webflow möglicherweise das Richtige für Sie. Sie können sogar Benutzerkonten einrichten oder einen Administrator für die Verwaltung von Inhalten festlegen, und Ihre Kunden können Änderungen visuell vornehmen.

Alternativ ist es einfach, den Prototyp in Code zu exportieren. Der saubere, semantische Code von Webflow kann Ihren Ingenieuren Stunden bei der Codebereinigung ersparen.

Webflow enthält Websitevorlagen und Webkomponenten, die per Drag & Drop in Ihren Prototyp gezogen werden können. Diese beschleunigen den Prototyping-Prozess, da Sie häufig verwendete Design-Assets nicht neu erstellen müssen.

Wenn Sie zu irgendeinem Zeitpunkt nicht weiterkommen und Hilfe benötigen, können Sie die ausführliche Dokumentation von Webflow lesen oder sich die hilfreichen Videokurse ansehen. Wenn Sie Webflow zum ersten Mal verwenden, hilft diese Unterstützung natürlich dabei, die Lernkurve zu minimieren.

Webflow reagiert von Natur aus, sodass Ihre Website-Layouts für alle Geräte optimiert werden: Desktop, Mobile und Tablet. Wenn das nicht genug war, können Sie Animationen entwerfen, die auf Mobilgeräten und allen modernen Browsern funktionieren. Und es endet immer noch nicht dort: Webflow verfügt über eine integrierte Erweiterbarkeit, mit der Sie Ihre Live-Prototypen einfach mit Slack, MailChimp, Google Drive und mehr als 400 anderen Diensten verbinden können.

06. Skizzieren

Preis: 99 USD / Jahr (Kostenlose Testphase)

Vorteile:

  • Übersichtliche Benutzeroberfläche
  • Sehr flexibel in Bezug auf Funktionalität
  • Einfach zu bauende Prototypen
  • Erstellen Sie Symbole und wiederverwendbare Assets
  • Add-Ons verfügbar
  • Teilen Sie einfach Ihren Prototyp

Nachteile:

  • Die Animationsoptionen sind begrenzt

Sketch ist eine Anwendung, die in der Design-Community sehr beliebt ist. Es ist einfach zu bedienen und bietet Ihnen alles, was Sie zum Erstellen schöner Benutzeroberflächen benötigen. Bis vor kurzem war Sketch auf Erweiterungen von Drittanbietern für Prototypen mit InVision angewiesen, bietet jetzt jedoch eine eigene Umgebung.

Mit vordefinierten Zeichenflächen können Sie mit sehr geringem Aufwand schnell mit Sketch beginnen. Starten Sie einfach das Laden in Grafiken oder geben Sie ein. Das Entwerfen in diesem Tool ist schön und einfach.

Eine der Funktionen, die in Sketch sehr gut funktionieren, ist der Umgang mit Symbolen. Dies ist eine saubere Möglichkeit, kleine oder sogar große Schnittstellenobjekte zu verpacken und immer wieder zu verwenden. Mit Ihren Symbolen können Sie sie auch nicht dekonstruktiv bearbeiten. Beispielsweise kann ein Schaltflächenelement in ein Symbol gepackt sein, das Text, ein Symbol und einen Rahmen verwendet. Sie können das Symbol um Ihr Design wiederverwenden und das Textelement bei Bedarf ändern. Wenn Sie das Symbol an der Quelle bearbeiten, können Sie beispielsweise den Schriftstil und die Farbe ändern und alle Ihre Symbole in Ihrem Design aktualisieren. Sehr ordentlich und oft eine große Zeitersparnis.

Für das Prototyping können Sie Beziehungen zwischen Objekten auf Ihrer Leinwand und Seiten zeichnen. Durch diese Beziehungen erhalten Sie Links zwischen Ihren Seiten, über die Sie eine Verbindung herstellen können, und können die Reisen Ihrer Benutzer simulieren, während diese durch Ihre Website navigieren. In Sketch können Sie Ihre Prototypen auch über einen eindeutigen Link freigeben und bei Bedarf Aktualisierungen am Projekt vornehmen.

Skizze ist ein Favorit für viele und auf jeden Fall einen Blick wert. Es ist ein sehr sauberes und vielseitiges Designwerkzeug. Es gibt eine Reihe von Erweiterungen, die den Entwurfsprozess noch schneller oder einfacher machen.

07. Framer

Preis: $ 15 / Monat (kostenlose Testversion)

Framer ist eines der beliebtesten Prototyping-Tools. Es basiert auf der Prämisse, dass mit Code alles prototypisiert werden kann, was zu neuartigen und bahnbrechenden Designs führt.

Dies mag zwar zutreffen, die proprietäre Codierungssprache des Tools zum Entwerfen und Animieren von Prototypen könnte jedoch ein Hindernis darstellen. Es gibt Leute, die die Belohnung am Ende der steilen Lernkurve möglicherweise nicht sehen, insbesondere für eine Sprache, die außerhalb von Framer nicht verwendet werden kann.

Für diejenigen, die sich der Herausforderung stellen möchten, ist die Dokumentation der Codierungssprache von Framer jedoch sehr gut strukturiert. Viele Beispiele zeigen, wie die Sprache funktioniert. Es gibt Videos mit Anleitungen sowie Kurse zu Udemy und O'Reilly.

Dieser Ansatz ist besonders nützlich für Designer, die mit dem Codieren noch nicht vertraut sind. Es bietet einen Überblick aus erster Hand, wie flexibel und leistungsfähig Code sein kann. Darüber hinaus ist die Mac-App von Framer gut gestaltet und bietet beim Schreiben von Code eine Live-Vorschau, was für diejenigen ermutigend ist, die zum ersten Mal Code schreiben.

Das heißt nicht, dass es nicht gut für Designer mit Codierungserfahrung ist, die es vorziehen, HTML / CSS zu schreiben, um ihre Designs zu prototypisieren. Framer ist möglicherweise genau das Werkzeug, nach dem Sie gesucht haben: Sie werden nicht durch die Drag & Drop-Werkzeuge anderer Apps eingeschränkt. Da Framer Code zum Erstellen von Prototypen verwendet, können Sie außerdem Echtzeitdaten aus Quellen wie Twitter und Parse in Ihren Prototyp integrieren.

Wie andere Tools unterstützt Framer Sketch- und Photoshop-Projekte und behält auch die Ebenen Ihres Designs bei. Ein weiterer Vorteil ist, dass Sie im Gegensatz zu den meisten anderen Tools auch After Effects-Dateien importieren können. Wenn Sie bereit sind, Ihren Prototyp freizugeben, kann Framer eine URL generieren, die für Ihre Kunden freigegeben werden kann. Diese gemeinsam nutzbaren URLs können auf Mobilgeräten für eine Live-Vorschau geöffnet werden. Mit Framer können Sie auch VR-Prototypen erstellen.

08. Vectr

Sie können Ihre Prototypen auf Vectr entwerfen

Sie können Ihre Prototypen in den Web- oder Desktop-Apps von Vectr entwerfen

Preis: Frei

Sie können Ihre Prototypen in den Web- oder Desktop-Apps von Vectr für Mac und Windows entwerfen. Dies ist beeindruckend, wenn man bedenkt, dass die App kostenlos ist. Die Prototypen bleiben synchronisiert, unabhängig davon, ob Sie am Desktop oder im Webbrowser arbeiten. So können Sie jederzeit arbeiten und sicherstellen, dass Sie immer Zugriff auf die neuesten Änderungen haben.

Vectr-Prototypen können mit einer URL geteilt und für eine leistungsstarke Zusammenarbeit in Apps wie Slack integriert werden. Als zusätzlichen Bonus können diejenigen, mit denen Sie Ihre Modelle teilen, diese mit Anmerkungen versehen und bearbeiten.

Im Moment ist Vectr nicht so funktionsreich wie viele andere Optionen, aber dies sollte Sie nicht davon abhalten, sich damit vertraut zu machen. Es wurde eine Roadmap für die App veröffentlicht, die eine beeindruckende Liste der geplanten Funktionen enthält. Dazu gehören: vollständig Offline-Desktop-Apps, mehr Plattformen, integrierte Versionskontrolle, ein integrierter Marktplatz für Design-Assets, vollständige gemeinsame Bearbeitung, Bildeffekte, Plugins, anklickbare Modelle, integrierte Feedback- und Anmerkungs-Tools sowie Offline-Desktop-Apps .

Lesen Sie weiter für 5 weitere großartige Prototyping-Tools ...

  • 1
  • zwei

Aktuelle Seite: Seite 1

Nächste Seite Seite 2