7 Prototyping-Tools für Webdesigner

Kennst du den Unterschied zwischen Wireframe, Attrappe, Lehrmodell, Simulation und Prototyp? Diese drei Ausdrücke werden oft synonym verwendet, um dasselbe zu bedeuten. Das Problem ist, du solltest nicht.

EIN Wireframe ist ein statische, detailgetreue Darstellung eines Designs. Sie gibt einen Überblick über das Aussehen oder die Form eines vorgeschlagenen Designs, nicht jedoch über dessen Funktionalität oder sein Erscheinungsbild. EIN Attrappe, Lehrmodell, Simulation liefert eine größere Menge an Informationen. Mockups sind Mittlere bis hochauflösende Darstellungen eines vorgeschlagenen Designs. Mockups sind auch statisch und Sie beweisen keine Interaktivität.

Prototypen, auf der anderen Seite sind dynamisch. Sie können repräsentieren Sie Ihr endgültiges Design zu fast jedem gewünschten Detail. Ein Prototyp kann sogar getestet werden als wäre es das eigentliche Endprodukt, da es das gleiche Look and Feel bieten kann. Von den dreien würde der Prototyp derjenige sein, der den besten Eindruck machen würde.

So erstellen Sie einen Prototyp

Ziel eines Prototyps ist es nun, ausgewählte Konstruktionsmerkmale genau zu beweisen. Prototypen für Web- oder App-Anwendungen werden normalerweise in entwickelt drei Stufen:

1. Die Seitenflüsse (wie ein Benutzer navigieren könnte) sind skizziert.
2. Auf jeder Seite werden mehrere Versionen mit niedriger Wiedergabetreue erstellt und die Benutzerfreundlichkeit getestet.
3. Aus den gelernten Lektionen werden Details hinzugefügt, um ein Modell mit hoher Wiedergabetreue für das vorgeschlagene Design zu erstellen.

In diesem Beitrag werden wir ein paar Prototyping-Tools kennenlernen, die den Prozess vereinfachen, die Arbeit erleichtern und Prototypen schneller entwickeln können. Hier sind 7 Prototyping-Tools zum Ausprobieren.

InVision

InVision steht laut Forbes neben Leuchten wie Slack, Dropbox und MailChimp an der Spitze der Liste der Private Cloud-Unternehmen weltweit. Diese Ehre ist zum Teil auf die "Always-On" -Plattform von InVision zurückzuführen Zusammenarbeit, Feedback und der Aufbau von High-Fidelity-Prototypen ist so einfach.

Mit InVision können Sie Projektbildschirme und -status von einem einzigen Ort aus verwalten, in Echtzeit zusammenarbeiten und die Versionskontrolle beibehalten Erstellen Sie pixelgenaue Prototypen, die wie echte Web- und mobile Apps aussehen. Mit InVision können Sie sogar Führen Sie kostenlose, unbegrenzte Tests durch auf Ihren Prototypen.

Melden Sie sich für eine kostenlose Testversion an, um herauszufinden, was die Designwelt und die mehr als 2 Millionen Benutzer von InVision an dieser Plattform schätzen. Klicken Sie einfach auf den InVision-Link, um zu beginnen.

Pidoco

Ob du eine brauchst Click-through-Drahtmodell, oder ein voll interaktiver UX-Prototyp, Pidoco bringt Sie schnell und ohne Umwege dorthin. Beginnend mit der einfachen Skizzierfunktion können Sie eine Gruppe von erstellen benutzerdefinierte Vorlagen, das erstellen interaktive Elemente du brauchst, Präsentieren Sie Ihren Prototyp an andere und warten auf ihr Feedback - was nicht lange auf sich warten lässt.

Pidoco bietet Ihnen alles, was Sie zum Erstellen von Prototypen mit niedriger Wiedergabetreue benötigen, um schnelles Feedback von vornherein oder High-Fidelity-Modelle mit dem gleichen Erscheinungsbild wie das vorgeschlagene Web- oder App-Design zu erhalten. Dieses Tool wird sogar generiert Spezifikationsdokumente Dies kann als Blaupause für Teammitglieder dienen oder den Kunden zur Abzeichnung vorgelegt werden.

Proto.io

Proto.io ist die ideale Wahl, wenn Sie ein hochwertiges Prototyping-Tool benötigen, um Sie bei der Entwicklung mobiler Apps zu unterstützen. Proto.io ist eine dedizierte Plattform für mobiles Prototyping läuft auf den meisten Browsern, erfordert keine Codierung, und ermöglicht es Ihnen Bereitstellen vollständig interaktiver Prototypen für mobile Apps und Simulationen das hat das Aussehen und das Gefühl der realen Sache.

Dieses Werkzeug besteht aus drei Teilen: einem Dashboard, einem Editor und einem Player. Das Dashboard dient als Hauptsteuerungs- und Projektmanager. Der Editor besteht aus einer Reihe von Tools, mit denen Sie Ihr Design nachahmen und Interaktionen erstellen können. Mit dem Player können Sie Ihren Prototyp in Ihrem Webbrowser anzeigen, mit ihm interagieren, Feedback einholen und auf echten mobilen Geräten testen. Wenn mobiles App-Design Ihr Ding ist, ist dies das Werkzeug für Sie.

Webflow

Für jeden, der nach einem sucht All-in-One-Werkzeug für Design, Prototyping und Entwicklung, Die Suche endet hier. Zuallererst mit Webflow Erstellen und testen Sie die High-Fidelity-Prototypen Sie müssen Ihre Konstruktionsbemühungen unterstützen. Aber hier kommt der Unterschied ins Spiel: Alles, was Sie bauen, basiert auf produktionsfähigem HTML / CSS und JavaScript. Das Ergebnis?

Sie können nahtlos von einem vollständig interaktiven Prototyp zu einem entwickelten Produkt übergehen. Prototyp, Design und Entwicklung sind im selben Paket enthalten, das auch die erforderlichen Funktionen und Funktionen für die Zusammenarbeit enthält. Und nebenbei, alles ist ansprechend auch.

PowerMockup

Dieses spezielle Toolkit für Prototyping wurde für den PowerPoint-Benutzer entwickelt. PowerMockup ist in der Tat ein PowerPoint-Add-On, das Sie verwenden können Erstellen Sie Wireframes und Modelle für Websites, Desktop-Apps oder mobile Apps. Es ist lediglich eine Frage der Auswahl von Formen und Designelementen aus der PowerMockup-Bibliothek und deren Ablegen auf einer PowerPoint-Folie.

Dann kannst du Verwenden Sie die Diashow- und Animationsfunktionen von PowerPoint, um eine Vorschau Ihres Designs mit anderen anzuzeigen. Sie können der Bibliothek auch eigene Formen und Elemente hinzufügen und diese bei Bedarf für andere PowerPoint-Benutzer freigeben.

Lucidchart

Lucidchart ist eine Online-Anwendung mit einem Bibliothek mit Designelementen und Gerätetypen Daraus können Sie schnell Wireframes oder Mockups Ihrer Website oder Ihres App-Designs erstellen. Es hat ein saubere, benutzerfreundliche Schnittstelle, und es verfügt über Drag & Drop-Technologie, interaktive Demonstrationsmöglichkeiten, und eine Layer-Technologie, mit der Sie hochkomplexe Simulationen erstellen können.

Lucidchart ist auch ein praktisches Werkzeug für Erstellen professioneller Projekt-Workflow-Diagramme und Flussdiagramme, und die Funktionen für die Zusammenarbeit funktionieren reibungslos und sind einfach zu bedienen.

HotGloo

Die Emulation der vorgeschlagenen UX eines Designs kann manchmal zu Herausforderungen führen. Deshalb brauchen Sie HotGloo. Mit einem riesigen Elementbibliothek und UI-Widget-Galerie, exportieren und teilen Funktionen sowie die Zusammenarbeit mit den Teammitgliedern ermöglicht den Start in kürzester Zeit.

Wenn Sie Fragen haben oder Hilfe benötigen, verfügen sie über eine vollständige Dokumentation sowie hilfreiche Video-Tutorials und Live-Webinare verfügbar. Erstellen Sie Ihre Prototypen direkt in Ihrem Browser, geben Sie sie frei oder zeigen Sie sie auf jedem Mobilgerät an. Du kannst sogar Exportiere deine Arbeit nach HTML. Wireframing und Prototyping waren noch nie einfacher und unterhaltsamer!

Verpacken

Es gibt eine große Auswahl aus dieser Liste, von Werkzeugen für spezielle Zwecke bis hin zu einem All-in-One-Werkzeug, das auf jeden Fall einen Blick wert ist. Dies sind alles Werkzeuge von höchster Qualität, es besteht also kein Risiko, und Sie können jederzeit eine Demo ansehen oder eine kostenlose Testversion anfordern.

Diese Produkte haben eine große Benutzerbasis. Sie werden von großen Unternehmen verwendet oder empfohlen. Egal für welches Sie sich entscheiden, Sie werden sich in guter Gesellschaft befinden. Egal, ob Sie ein Modell, ein Drahtgitter oder ein Prototyping-Werkzeug suchen, Sie finden oben ein Werkzeug für Ihre Anforderungen.