Prototyping als Konzept gibt es schon seit dem Internet. Normalerweise würden Menschen, die ein neues physikalisches Produkt entwickeln, zuerst das Ding bauen und sicherstellen, dass es wie beabsichtigt funktioniert. Die erste Version würde vielleicht patentiert und potentiellen Investoren gezeigt werden. Wenn der Erfinder Zugang zu seinen eigenen Produktionsmitteln hatte (wenn sie zum Beispiel in einer bestehenden Firma arbeiteten), gingen sie einfach weiter und arbeiteten die Fehler aus, bis sie ein produktionsfertiges Modell hatten.
Erinnerst du dich an diese alten Demo-Disketten? Weißt du, diejenigen, die mit Programmen mit eingeschränkter Funktionalität oder dem ersten oder zweiten Level in einem Spiel kamen? Prototypen sind diesen Demos sehr ähnlich, nur noch einfacher.
Sie erstellen einen Prototyp einer Website oder App, um sicherzustellen, dass das Konzept wie vorgesehen funktioniert
Ihr Zweck ist nicht so sehr, potenzielle Kunden dazu zu bringen, ein Produkt zu kaufen, um Ihnen zu helfen, ein besseres Produkt zu entwickeln. Sie erstellen einen Prototyp einer Website oder App, um sicherzustellen, dass das Konzept wie vorgesehen funktioniert. Sie verwenden es auch, um Ihren Kunden oder potentiellen Investoren zu zeigen, wie es funktionieren soll.
Vor kurzem haben wir viele Apps gesehen, die darauf ausgerichtet sind, Prototypen für das Web und für mobile Apps zu erstellen. Jetzt wurde Adobe Experience Designer veröffentlicht, der die Funktionalität einer web- und mobilspezifischen "Design-App" mit der einer Prototyping-App kombiniert. Angesichts der Reputation von Adobe und ihres Marktanteils im professionellen Bereich ist es naheliegend, dass viele Leute, die in der Vergangenheit noch nicht viel Prototyping gemacht haben, jetzt diesen Schritt tun könnten.
Also, wie die meisten anderen ultimativen Guides, ist dieser für Anfänger. Es ist für Leute, die gerade anfangen, regelmäßig Prototypen zu bauen, ungeachtet ihrer früheren Erfahrung (oder ihres Fehlens) in der Designindustrie.
In diesem Leitfaden haben wir versucht, vor allem die grundlegenden Prinzipien zu behandeln. Danach gibt es Links zu Guides mit weiteren Informationen und natürlich eine große lange Liste von Apps und Tools, mit denen Sie arbeiten können.
Nun, und der Designer, der schon eine Weile hier war, hat wahrscheinlich schon mit Wireframes gearbeitet und / oder in einem Bildeditor Mockups entworfen. Sind das keine Prototypen?
Nee. Nicht immer, jedenfalls.
Das Problem mit Wireframes und statischen Modellen ist, dass sie ... naja ... statisch sind. Es gibt viele Informationen, die sie einfach nicht über die Funktionalität einer Sache vermitteln können. Dies kann zu Missverständnissen in den Köpfen der Kunden oder sogar Ihrer Entwickler führen, wie das Ganze funktionieren soll. Aus diesem Grund sind Prototypen in der Regel interaktiv.
Die häufigsten Ausnahmen sind konzeptionelle Prototypen und außergewöhnlich gut dokumentierte statische Prototypen. Was den Unterschied ausmacht, ist nicht die Interaktivität selbst, sondern die Übermittlung von Informationen über die beabsichtigte Funktionalität eines Produkts.
Allerdings werden bei der Herstellung von Prototypen häufig Drahtmodelle und Modelle verwendet, so dass niemand sie verlässt.
Wann immer Sie zeigen müssen, wie etwas funktionieren soll. Das ist es.
Das offensichtliche Beispiel ist das einer Web- oder mobilen App. Apps neigen dazu, ein gutes Stück Funktionalität zu haben, die nicht leicht von einem Modell zu sehen oder abzuleiten sind. Aber auch ziemlich statische, inhaltsgetriebene Websites benötigen möglicherweise einen Prototyp.
Zum einen habe ich meine Kunden nach Modellen für eine einfache Geschäftsseite gefragt und dann gefragt: "Okay, wenn sie oben auf diese Dinge klicken, über uns", "Dienste" und so weiter, dann sind sie für andere da Seiten? "oder" Wenn sie auf das Kontaktformular klicken, bekomme ich eine E-Mail? "
Selbst einfache ... Aufgaben sind oft mit Unsicherheit behaftet ... Prototypen können dazu beitragen, das Rätselraten zu umgehen
Selbst einfache Browsing-Aufgaben sind für einige Benutzer und potenzielle Kunden oft mit Unsicherheiten behaftet, so dass Prototypen dazu beitragen können, das Rätselraten beim Sign-Off-Prozess zu umgehen.
Darüber hinaus sind sie immer nützlich beim Testen von Benutzern. Wenn Sie überhaupt Benutzertests durchführen möchten, empfiehlt es sich, mit einer frühen Vorschau des Projekts zu beginnen. Das letzte, was Sie wollen, ist, dass Sie große Veränderungen vornehmen müssen, nachdem die meisten Arbeiten bereits erledigt sind.
Bevor Sie mit dem Prototyping beginnen, sollten Sie herausfinden, welche Art Sie verwenden möchten. Sie können immer mehr als eine Art in einem bestimmten Projekt verwenden; die meisten Designer tun es irgendwann.
Die Art des Prototyps, den Sie wählen, muss für Sie, Ihren Kunden, das Projekt und sogar für die spezifische Phase des Projekts, in dem Sie sich befinden, richtig sein. Das klingt jetzt vielleicht komplex, aber es ist wirklich nicht so schlimm.
Jeder von ihnen soll in verschiedenen Phasen der Entwurfsphase eingesetzt werden. Der Rest hängt von Ihrer Präferenz ab und wie gut Ihr Kunde abstrakte Bilder versteht.
Kunden, die weniger Erfahrung mit modernen Designprozessen haben, könnten etwas "polierteres" Aussehen erwarten, damit sie das Logo größer machen, diese Linie einen Zoll nach links verschieben können und ihre Website nicht in Latein erscheint Könntest du bitte etwas Englisch hineinbringen?
Wenn Sie damit Probleme haben, sind detailliertere Prototypen - und eine Menge Kaffee - Ihre beste Wahl. Wenn nicht, dann können Sie etwas vage verwenden und sich auf die beabsichtigte Funktionalität konzentrieren.
Diese sehen oft nicht wie das fertige Produkt in irgendeiner Form aus. Bei konzeptionellen Prototypen spielen die Details und das Layout der Schnittstelle keine Rolle. Die einzigen Dinge, an denen Sie arbeiten, sind Interaktionen und Prozesse.
Das Ziel eines jeden Prototyps ist es zu zeigen, wie etwas funktioniert oder funktionieren wird. In diesem Sinne ist das Prototyping in seiner reinsten Form. Es geht buchstäblich um die Funktion, und die Form kommt nicht einmal dazu.
Sie können zu diesem Zeitpunkt wie alles aussehen. Sie können ein Flussdiagramm, Post-it-Notizen, eine PowerPoint-Präsentation, ein Video verwenden, das den Prozess mit einfachen symbolbasierten Illustrationen erklärt, oder eine Aufnahme, in der Sie in die Kamera sprechen und wild mit den Armen herumschlagen. Alles, was den Punkt bringt, wird ausreichen.
Konzeptionelle Prototypen werden typischerweise in der frühesten Phase eines Projekts verwendet. Ihr Projekt hat möglicherweise noch nicht einmal einen Namen. Es ist nur eine Idee für eine App oder eine Website, und Sie werden Dinge sagen wie: "Ja, ich denke, es sollte so funktionieren ..."
Bei Low-Fi-Prototypen fangen Sie an, Dinge wie das Layout und die Bildschirmgröße und andere, eher greifbare Probleme einzubeziehen. Sie werden normalerweise schnell gemacht und schneller verworfen.
Sie sollen Ihnen die schnellste Möglichkeit bieten, Ihre Ideen zu iterieren, bis Sie und / oder Ihr Kunde mit den Grundlagen zufrieden sind. Also nicht anhängen. Die meisten von ihnen werden nicht lange da sein, und das ist eine gute Sache.
Wie bereits erwähnt, ist der Begriff "Low-Fidelity-Prototypen" oft mit "Wireframes" austauschbar. Tatsächlich findet dieses Stadium oft auf dem Papier statt.
Wenn es in einer App gemacht wird, ist es ratsam, eines zu verwenden, das grundlegende Prototyping-Funktionen wie das Verknüpfen mit anderen Bildschirmen, Annotationen usw. hat. Wireframing-Apps haben den Vorteil, eine einfachere Zusammenarbeit über das Internet zu ermöglichen, sind aber oft etwas langsamer benutzen.
Diese werden auch am Anfang eines Projekts verwendet, aber Sie haben wahrscheinlich ein Geschäftsmodell und eine Idee für einen Namen. Es ist Zeit, die unzähligen Ideen, die um deinen Kopf herum schweben, zu sortieren und zu iterieren, bis du etwas hast, von dem du sicher bist, dass es funktionieren wird.
Manchmal reicht ein Low-Fidelity-Prototyp einfach nicht aus, und eine hohe Wiedergabetreue ist im Moment zu viel Arbeit. Vielleicht haben Sie den Styleguide nicht vollständig überarbeitet oder nicht alle Ihre grafischen Assets wurden bereits erstellt.
In jedem Fall ist dies die Art von Prototyp, die Sie von Anfang bis Mitte der Entwurfsphase verwenden können. Sie werden oft mit Prototyping-Apps erstellt, die stark von simulierten Interaktionen Gebrauch machen. Sie können auch mit HTML und CSS erstellt werden, normalerweise mit Hilfe eines CSS-Frameworks.
Yup, Bootstrap und Foundation sind wahrscheinlich zwei der größten Prototypen-Tools, die es derzeit gibt.
Sie sollten Markenbilder für diese verwenden, wenn Sie es haben, aber Lagerbilder werden es tun. Stock UI-Elemente werden normalerweise verwendet, um die simulierte Schnittstelle schneller aufzubauen. Viele Prototyping-Apps enthalten Bibliotheken dieser Elemente, um Ihre Arbeit zu beschleunigen.
Diese Art von Prototypen sind ideal für die eher wählerischen Denker, die eine enge Annäherung an die Art und Weise, wie sie aussehen und arbeiten wird, sehen müssen. Es ist einfacher für sie, eine Kopfzeile zu ignorieren, die "noch nicht fertig ist", als eine skizzenhaft aussehende Form, die nicht so aussieht wie eine Website-Kopfzeile, wie sie es kennen.
Für diese Kunden möchten Sie vielleicht Ihre Ideen schnell umsetzen und diese dem Kunden niemals zeigen. Dann machen Sie einen Prototyp mit mittlerer Wiedergabetreue, der es für Sie einfacher macht, zu sehen, wohin Sie gehen.
Nun, wir sind hier. Und so ist dein Projekt. Sie haben Ihre Modelle für jeden Bildschirm, und alles sieht gut aus. Es ist an der Zeit, den Leuten zu zeigen, wie es in all seiner Pracht funktionieren wird, wenn jemand es schließlich in den Backend-Code integriert.
High-Fidelity-Prototypen werden normalerweise verwendet, um vom Kunden eine endgültige Freigabe für das Design zu erhalten. Aber Sie können ihnen nicht einfach die PSDs schicken. Dieses Zeug muss interaktiv sein.
Dies wird typischerweise auf eine von zwei Arten erreicht. Einige verwenden statisches HTML und CSS, um die finalisierten Visualisierungen semi-interaktiv zusammenzufügen. Andere verwenden Apps, die Bilder oder sogar Roh-PSD-Dateien importieren, und fügen pseudo-interaktive Funktionen hinzu, um die endgültige Funktionalität der App nachzuahmen.
Abhängig von der App können Sie diese Prototypen sogar im Web (oder auf einem mobilen Gerät, wenn Sie an einer App gearbeitet haben) demontieren.
Nachdem wir nun die wichtigsten Arten von Prototypen besprochen haben, die Sie erstellen können, ist es an der Zeit, die Werkzeuge zu behandeln, mit denen sie hergestellt wurden. Ich habe die meisten davon im vorherigen Abschnitt und ihre grundlegende Verwendung erwähnt; aber ich würde gerne ein bisschen mehr ins Detail gehen.
Auch hier sollte die Methode, die Sie wählen, davon abhängen, was Ihnen und dem Kunden gefällt.
Diese werden häufig gemacht, um eine Idee zu verkaufen, bevor konkrete Arbeit geleistet wurde. Daher richten sie sich in der Regel an potenzielle Investoren. Sie können auch für Kunden verwendet werden; aber es gibt oft effizientere Möglichkeiten, mit einem Kunden zu kommunizieren. Ihre Laufleistung kann variieren.
Die Video- und Präsentationsprototypen, die für Verkaufsgespräche erstellt werden, folgen normalerweise einer kommerziellen Stilformel:
Einige dieser Prototypen verwenden nur Symbole, Text und Illustrationen. Andere haben Animation; und wieder andere verwenden Live-Action, um den Punkt zu vermitteln. Und das ist gut ... der Punkt. Solange Sie Ihre Idee verkaufen, haben Sie es richtig gemacht.
Hier ist ein tolles Beispiel Das mischt Video-Prototyping mit Papier-Prototyping.
Wireframes können auf Papier oder in Apps erstellt werden. Sie werden fast immer als Low-Fidelity-Prototypen betrachtet, obwohl sie auf mittlere Treue hochgestuft werden können, wenn Sie ihnen genügend Zeit geben. Es lohnt sich jedoch kaum.
In der Regel werden Drahtmodelle so entworfen, dass sie schnell gezogen und verworfen werden können. Dies ist eines der Dinge, die das Zeichnen auf dem Papier so attraktiv machen. Apps können viel genauer sein, und Sie können vorhandene Wireframes problemlos bearbeiten. aber nichts übertrifft die Geschwindigkeit einer Skizze, die niemand sehen sollte, als Sie selbst ... jemals.
Wie bereits erwähnt, haben App-basierte Wireframes jedoch den Vorteil, dass sie die Funktionalität einer Schnittstelle einfacher nachahmen. Wenn Sie auf einen Papierdraht-Rahmen tippen, wird nur ein angenehmer Thunk-Thunk-Thunk-Sound erzeugt.
Das kann Spaß machen, aber es kann deine Bedeutung nicht vermitteln.
Sie können wählen, beide zu verwenden: Papier, um die grundlegendsten Konzepte zu nageln, und eine App, um es auszufüllen und es leicht zu teilen.
Diese unterscheiden sich von Drahtmodellen dadurch, dass sie viel mehr sind als Zeichnungen. Bei dieser Art von Prototyp wird Papier verwendet, um ein physikalisches, wenn auch noch ziemlich flaches Modell der Schnittstelle zu erstellen. Sie können eine davon im obigen Video sehen.
Interface-Elemente werden normalerweise gezeichnet, ausgeschnitten, manchmal kopiert, um Extras zu machen, und dann auf einem anderen Stück Papier zusammengefügt. Dies gibt ihnen den Vorteil der Flexibilität. Wenn Sie mit einem Drahtmodell ein ganzes Blatt Papier wegwerfen, können Sie die Elemente eines Papiermodells einfach neu anordnen, bis Sie zufrieden sind. Haben Sie ein Element, das die falsche Größe hat, nachdem Sie die Dinge ein paar Mal neu arrangiert haben? Schneide einfach eine neue Version aus.
Sie fühlen sich auch etwas "realer" an als ein Drahtgitter. Auch wenn nichts Interessantes passiert, kann ein Kunde ein Papiermodell anfassen. Sie können es fühlen. Diese taktile Empfindung kann einem Klienten manchmal mehr erklären als alles, was Sie ihm jemals zeigen könnten.
Jeder braucht physischen Kontakt, um ein Objekt besser zu verstehen. Bei der Hälfte des UX-Designs geht es darum, das Gefühl der physischen Interaktion mit einer digitalen Schnittstelle wiederherzustellen.
Diese haben viel mit Papierprototypen gemeinsam. Prototypen, die mit einer App wie Invision oder einer der vielen anderen Optionen (siehe unten) erstellt wurden, werden in der Regel aus vordefinierten Elementen erstellt und dann zusammengefügt, um das Endprodukt nachzuahmen.
Der Unterschied ist natürlich, dass alles auf dem Bildschirm gemacht wird. Oh, und Sie können es mit der endgültigen Grafik und dem Branding machen, so dass der Prototyp genauso aussieht wie das fertige Produkt. Wie bereits erwähnt, können einige Apps das Produkt im Browser und auf Mobilgeräten vorführen.
Dies bringt das taktile Gefühl wieder ins Spiel, und Sie wollen dies. Wenn Sie Ihren Kunden dieses Gefühl geben können, und sie mögen es, haben Sie im Grunde ihre endgültige Zustimmung bekommen.
Natürlich, wenn Interaktion das ist, was Sie wollen, dann ist der Aufbau von Schnittstellen-Prototypen mit Code ein guter Weg, um es zu bekommen. Jetzt können Sie aus mehreren Gründen codebasierte Prototypen auswählen:
Das Prototyping im Browser kann etwas langsamer vonstatten gehen, insbesondere wenn größere Änderungen noch vorgenommen werden. Ich würde es nicht für die frühen Phasen eines Projekts empfehlen, also ist es am besten für Prototypen mit mittlerer bis hoher Wiedergabetreue.
Dennoch ist es eine der besten Möglichkeiten, ein fast abgeschlossenes Projekt zu zeigen, wenn Sie bereits mit HTML und CSS arbeiten möchten.
Prototyping mit Gerüsten
Es sollte angemerkt werden, dass die Verwendung eines Frameworks zum Erstellen von Prototypen das code-basierte Prototyping erheblich beschleunigen kann. Wenn Sie das Framework verwenden, das für das Endprodukt verwendet werden soll, müssen Sie insgesamt weniger Code verwenden.
Als eine Randnotiz haben einige Leute Drag-and-Drop-Webseiten-Editoren entwickelt, die auf populäreren Frameworks basieren, wie z Bootstrap und Stiftung . Mit diesen könnte einmal alles von den Low-Fidelity-Prototypen bis zum fertigen Produkt mit Code erstellt werden.
Einige verwenden sie jedoch nur, um Prototypen schnell zu erstellen, und verwenden dann benutzerdefinierten Code für das endgültige Projekt. Es funktioniert so oder so.
Jetzt, wo wir alle Grundlagen abgedeckt haben, ist es Zeit, wirklich ins Detail zu gehen. Wie bei fast allem anderen im Design und im Leben, gibt es keinen richtigen Weg, einen Prototyp zu bauen. Es gibt nur den Weg, der für dich funktioniert. Allerdings haben erfolgreiche Design-Prozesse einige Gemeinsamkeiten.
Hier sind ein paar verschiedene Anleitungen zum Prototyping, die sich auf verschiedene Methoden und Fidelitäten konzentrieren, um Ihnen den Einstieg zu erleichtern. Nimm von ihnen, was für dich funktioniert, ignoriere was nicht.
(Wir werden keine App-spezifischen Tutorials einschließen, da es einfach zu viele gibt.)
Dieser Leitfaden von Smashing Magazine konzentriert sich auf eine Methodik zum schnellen und wiederholten Erstellen von Prototypen.
Das ist ein mehr persönlicher Artikel von Nick Pettit auf dem Treehouse Blog, der seinen eigenen Ansatz zum Prototyping umreißt.
Hier ist ein dritter Artikel auf Rapid Prototyping. Es scheint populär zu sein. Dies ist genau hier auf Webdesigner Depot, und es skizziert ein paar Tipps und Fallstricke in den Prozess.
Ein weiterer Artikel von Smashing Magazine , dieser geht ausführlicher auf Low-Fidelity-Prototyping ein.
In dieser Tiefe und ganz offen gesagt faszinierender Artikel Die Newfangled-Agentur beschreibt ihren Prozess ausführlich. Es dreht sich um browserbasiertes Greyscreen-Prototyping, und sie sind ein überzeugender Beweis dafür, es auszuprobieren.
Ein anderer hier auf WDD In diesem Artikel geht es darum, sicherzustellen, dass Ihr Prototyping einen Punkt hat. Wenn Sie erst nach Abschluss des endgültigen Projekts Ihre Usability-Tests durchführen, tun Sie wahrscheinlich etwas falsches.
Sie müssen einige Ihrer persönlichen Informationen abgeben (oder einfach nur lügen), um zu bekommen dieses eBook aber hey, sie verlangen kein Geld! Es enthält weitere Informationen zu gängigen Prototyping-Methoden, App-basierten Tutorials und Best Practices von großen Unternehmen wie Google, Apple, Zurb und mehr.
Jetzt wird es von den Leuten hinter UXPin, einer Prototyping-App, erstellt, so dass sie leicht voreingenommen sein können, welche App du verwenden sollst. Trotzdem hat es viele gute Informationen.
Okay, du hast die Theorie. Es ist Zeit, Prototypen zu bauen. Unter der Annahme, dass Sie sich nicht an Papiermodelle oder Code halten, werden Sie irgendwann eine App verwenden.
Die gute Nachricht: Es gibt viele tolle Apps zur Auswahl. Die schlechte Nachricht: Es gibt viele tolle Apps zur Auswahl.
Noch einmal, es wird alles auf die Art und Weise, wie Sie arbeiten, kommen. Benötigen Sie die Möglichkeit, mobile Apps zu demontieren? Müssen Sie Ihre Dateien mit Google Drive, Dropbox oder einem anderen Dienst synchronisieren? Wie wäre es mit Github-Integration? Low-fi, mittel oder high-fi? Erweitertes Skripting?
Die unten aufgeführten Apps enthalten einige oder alle dieser Optionen. Ich werde die wichtigsten Funktionen für jeden auflisten, um Ihnen eine Vorstellung davon zu geben, wo Sie suchen müssen.
Es ist anzumerken, dass viele von diesen hauptsächlich als Drahtrahmenwerkzeuge bekannt sind. Es ist üblich, dass die Wireframing-Software die Funktionen integriert, die für interaktive Prototypen benötigt werden. Ihr Kilometerstand mit diesen Apps kann variieren.
Dies ist das neueste Angebot auf dem Markt, und es ist bereit, einige ernsthafte Konkurrenz zu einem etwas gesättigten Markt zu liefern. Es ist nicht nur eine Drahtmodell- oder Prototyping-App; es ist eine Design-App. Es ist wie Skizzieren oder der jetzt Tote Feuerwerk , aber es geht einen Schritt weiter, indem es Ihnen ermöglicht, aus allem, was Sie gerade entworfen haben, Prototypen zu machen.
Es ist derzeit nur für Mac und in der Preview-Phase, aber eine Windows-Version ist noch vor Ende des Jahres fällig.
Die Vorabversion ist kostenlos. Sobald die endgültige Version ausgeliefert wird, ist sie Teil des Creative Cloud-Abonnementprogramms von Adobe.
Microsoft Powerpoint , Apple Keynote , LibreOffice Impress , und Google Präsentationen können alle verwendet werden, um Prototypen zu machen. Meistens wären diese Prototypen konzeptionell verschieden. Sie können jedoch eine gewisse Menge an Interaktivität vortäuschen, indem Sie nur Folien miteinander verbinden.
Es könnte genauso gut für das Prototyping von Content-basierten Websites funktionieren, und die Chancen stehen gut, dass Sie bereits mindestens eines dieser Programme verwenden. Wenn nicht, sind Impress und Slides kostenlos.
Invision ist eine weitere der "großen Namen", mit mehr High-Fidelity-Prototyping. Es betont die Versionskontrolle und ist stolz auf seine Echtzeit-Funktionen für Zusammenarbeit und Feedback. Wie Marvel App, hat es auch Animation, Prototyp-Einbettung, In-Device-Demos und vieles mehr.
Außerdem haben sie vor kurzem Silver Flow gekauft, ein Tool, das Prototyping-Funktionalität mit Sketch integriert. Sie beabsichtigen, Sketch mit ihrer Online-Software zu integrieren.
Es gibt einen kostenlosen Plan, aber Sie können nur einen einzigen Prototyp erstellen. Danach können Sie bei $ 15 USD pro Monat beginnen.
Justinmind scheint bewusst darauf ausgerichtet zu sein, High-Fidelity-Anwendungsprototypen zu erstellen. Die Website erwähnt auch Prototyping responsive Websites. Es gibt auch In-App-Demos.
Die Preise beginnen bei $ 19USD pro Benutzer und Monat, wenn Sie jährlich bezahlen.
Wunder App ist eine riesige App (eine der "großen Namen" im Prototyping) mit einem kostenlosen Plan und moderaten Preisen für alle Upgrades. Zu den bemerkenswerten Funktionen gehören: Unterstützung für Photoshop und Sketch, Synchronisierung mit Drive und Dropbox, Einbetten von Prototypen in Webseiten) und Funktionen, die Ihre Prototypen in animierte Präsentationen verwandeln.
In diesem Fall geht es um High-Fidelity-Prototypen.
Axure ist ein bisschen eine Kuriosität mit Features für Low-Fi-und High-Fi-Prototyping. Es ist noch merkwürdiger, weil es eine Desktop-App mit einem einmaligen Preis ist. Es wurde für Benutzer in Unternehmen und große Teams entwickelt, mit Funktionen zum Erstellen eigener Dokumentation, Projektmanagement und mehr.
Die Standard Edition kostet 289USD pro Lizenz.
HotGloo dreht sich um die Drahtrahmen und Prototypen mit geringer bis mittlerer Genauigkeit. Es begann in erster Linie als hauptsächlich eine Wireframing-App, aber die Funktionalität für fortgeschrittene Prototypen ist da.
Wo andere Apps sich auf Prototyp-Apps konzentrieren, hat HotGloo seinen Anfang bei Webdesignern gemacht. Also, du kannst beides, wirklich.
Die Pläne beginnen bei $ 14 USD pro Monat und dieser Plan kann bis zu 10 Personen umfassen.
Wir sind zurück zum High-Fidelity Prototyping mit Proto.io . Es hat komplexe Interaktionen, Animationen, Exportieren, Drucken, Einbetten und Gerätedemonstrationen alle eingebaut. Preise beginnen bei $ 24USD pro Monat, aber es gibt eine 15-tägige kostenlose Testversion, wenn Sie es drehen wollen.
Verfestigen kommt uns von Zurb, der gleichen Firma, die den Stiftungsrahmen bildet. Es wurde entwickelt, um alles von Skizzen bis hin zu High-Fidelity-Prototypen und -Modellen zu handhaben (und Feedback zu erhalten).
Anstatt sich auf Animationen und andere Präsentationswerkzeuge zu konzentrieren, bietet Solidify eine Fülle von Funktionen zum Testen von Benutzern. Sie können Tests persönlich oder remote ausführen und die Ergebnisse mit Ihrem Team teilen.
POP unterscheidet sich von anderen Apps, indem es Ihnen hilft, eine Kombination aus Drahtrahmen-Skizzen und digitalen Prototypen zu erstellen. Sie beginnen mit dem Fotografieren Ihrer Skizzen mit einem iPhone, Android-Telefon oder Windows-Smartphone und verwandeln diese Skizzen in einen interaktiven Prototyp.
Wenn Sie die meiste Arbeit auf Papier erledigen, könnte dies eine gute Möglichkeit sein, die Ergebnisse zu teilen. Der Service ist kostenlos für zwei Projekte, und dann beginnen die Pläne bei $ 10USD pro Monat.
Flairbauer ist eine andere Desktop-App, obwohl es einen Online-Viewer für Projekte hat. Es scheint auf Medium-Fidelity-Wireframes und -Prototypen ausgerichtet zu sein. Es verfügt über Funktionen, mit denen Sie Interaktion hinzufügen können, es kann In-Device-Demos machen, und legt besonderen Wert auf Grid-basiertes Design.
Es kostet eine einmalige Gebühr von $ 99USD. Das ist steil, sicher, aber viel billiger als Axure.
Flinto hat eigentlich zwei Versionen: Es gibt eine Mac-App und eine webbasierte Lite-Version. Der Unterschied? Die Mac-Version bringt komplexere Animationen, Funktionen und Interaktionen in die Tabelle. Außerdem können Sie Ihre Assets aus Sketch importieren, was die Web-Version nicht kann.
Es kostet $ 99USD als einmaliger Kauf. Interessanterweise enthält die Lite-Version (die 20USD pro Monat kostet) eine Lizenz für die Desktop-Version, die Ihnen das Beste aus beiden Welten bietet.
UXPin ist eine Prototyping-App für mittlere bis hohe Wiedergabetreue mit allen Funktionen, die wir erwarten. Wie einige andere auch, verfügt es über Echtzeit-Collaboration, integrierte Usability-Testfunktionen und Projektmanagement.
Im Gegensatz zu anderen Apps möchte UXPin ein One-Stop-Design-Shop sein. Sie können Photoshop, Sketch oder What-you-you überspringen und Ihre Drahtrahmen in Modelle umwandeln. Das ist zumindest ambitioniert, aber wenn es wie versprochen funktioniert, kann ich sehen, dass es für viele Designer nützlich ist.
Die Preise beginnen bei 19 US-Dollar pro Monat und pro Benutzer.