Die besten Wireframing-Tools für Ihre App

Veröffentlicht: 2018-03-23

Wir haben Ihnen eine Liste von Wireframing-Tools zusammengestellt , die dazu beitragen können, die Erstellung Ihrer App oder Website weniger einschüchternd zu gestalten. Wenn Sie nach einem großartigen Prototyp-Tool suchen, haben wir auch einige Vorschläge dafür beigefügt.

Das Erstellen einer neuen App oder Website ist eine respektable Leistung, die nicht viele in ihrem Leben erreichen werden. Das bedeutet nicht, dass Sie es aufgeben sollten, sondern dass Sie alles recherchieren und verstehen sollten, bevor Sie sich mit dem Kopf voran stürzen. Vielen Anfängern fällt es schwer, den Unterschied zwischen einem Wireframe, einem Prototyp und Mockups herauszufinden, daher soll dieser Beitrag Ihnen helfen, jeden zu verstehen.

INDEX

WAS IST EIN WIREFRAME?
BESTE WIREFRAMING-TOOLS 2018
WAS IST EIN PROTOTYP?
BESTE PROTOTYPING-TOOLS 2018
ERSTELLEN SIE MOCKUPS IHRES PRODUKTS

WAS IST EIN WIREFRAME?

Sie haben eine geniale Idee für eine neue App oder Website, aber wie setzen Sie diese in ein tatsächliches Produkt um? Mit Drahtgitter! Dies ist der erste Schritt im Planungsprozess, daher ist es wichtig, dass Sie ihn nicht überspringen.

Wireframe-Grundlagen

Bevor Sie größere Designentscheidungen treffen, benötigt Ihre App oder Website zunächst ein sinnvolles funktionales Layout. Hier kommt das Wireframe ins Spiel. Die meisten Menschen beginnen mit einer handgezeichneten Skizze, wie ihre App oder Website aussehen soll. Der nächste Schritt besteht darin, diese Skizze in ein digitales Layout oder eine Gliederung umzuwandeln, die organisierter und professioneller aussieht.

Ihr Wireframe muss die grundlegende Struktur der Seite kommunizieren, ohne Designelemente oder tatsächliche Inhalte einzuschließen.

Wenn Sie das Wireframe durcharbeiten, bevor Sie anfangen, etwas zu verschönern, können Sie alle Fehler in der Benutzerfreundlichkeit erkennen, die später mühsam zu beheben wären. In dieser Phase ist es wichtiger sicherzustellen, dass die enthaltenen Elemente sinnvoll und funktional sind, insbesondere für Ihre Zielgruppe. Wenn Sie versuchen, die Aufmerksamkeit von Investoren auf sich zu ziehen, hilft ein Wireframe ihnen auch dabei, Ihr Produkt viel leichter zu verstehen. Tatsächlich kann es dazu führen, dass Investoren sehr schnell das Interesse verlieren, wenn sie nicht mindestens ein Wireframe bereit haben. Elemente, die in einem Drahtmodell enthalten sind, sind in der Regel Felder für Überschriften, Schaltflächen, Textfelder und Bildfelder.

Wireframe vs. Mockup

Es ist leicht, ein Wireframe mit einem Mockup zu verwechseln, da sie sehr ähnliche Elemente enthalten. Wenn Sie jedoch mit einem Team aus Entwicklern, Designern und Investoren zusammenarbeiten, müssen Sie verstehen, was sie auszeichnet.

Zu Beginn wird ein Wireframe verwendet, um den Inhalt und die Funktionen Ihrer App zu organisieren , jedoch auf sehr einfache Art und Weise. Betrachten Sie es als eine Gliederung, die die grundlegende Struktur dessen zeigt, was in Ihrer App enthalten sein wird. Sobald Sie anfangen, andere Elemente wie Farbe, Symbole, Bilder, Schriftarten und Fotos hinzuzufügen, verwandelt es sich in ein Mockup.

Ein Mockup bietet eine mitteltreue Darstellung Ihrer App oder Website in der Entwicklung. Es ist eine viel realistischere Darstellung dessen, in was Ihre App geformt wird. Stellen Sie sich diesen Schritt im Prozess so vor, dass Sie Ihrem Barebone-Drahtmodell ein wenig Substanz hinzufügen oder ihm ein bisschen mehr Leben einhauchen.

BESTE WIREFRAMING-TOOLS

BALSAMIQ
MOCKPLUS
MOQUPS
WIREFRAME.CC
MOCKFLUSS

BALSAMIQ

Verfügbar für alle Betriebssysteme, da webbasiert.

Hauptmerkmale: Balsamiq ist ein sehr empfehlenswertes Wireframing-Tool, mit dem Benutzer Wireframes für Desktop-Apps, mobile Apps, Websites, Dialogfenster, Web-Apps, Tablet-Apps und mehr erstellen können. Das Erstellen Ihres Wireframes mit Balsamiq ähnelt dem Zeichnen auf einem Whiteboard, und das Programm ermöglicht es Ihnen auch, UI-Elemente per Drag-and-Drop zu verschieben, Feedback zu Skizzen von Ihrem Team zu erhalten, Designs zu überarbeiten und Ihre Arbeit in Echtzeit zu verfeinern.

Preise: Der Preis dieses Tools hängt von einer Reihe von Situationen ab. Sie können mit einer kostenlosen 30-Tage-Testversion beginnen, danach müssen Sie je nach gewählter Plattform monatliche oder jährliche Gebühren zahlen. Die Cloud-Version kostet Sie beispielsweise 9 US-Dollar pro Monat oder 90 US-Dollar pro Jahr für bis zu zwei Projekte. Die Desktop-Version kostet 89 US-Dollar für eine Einzelbenutzerlizenz.

Bonus: Balsamiq bietet kostenlose Kurse an, die über Udemy und Skillshare verfügbar sind, damit Sie lernen, wie Sie ihr Produkt verwenden und die besten Ergebnisse erzielen.

MOCKPLUS

Verfügbar für Mac OS, Windows, Android und iOS.

Hauptmerkmale : Da Projekte mit Cloud-Speicher verknüpft werden können, ermöglicht MockPlus einem ganzen Team die einfache Zusammenarbeit an einem einzigen Projekt. Benutzer können das Projekt direkt kommentieren und markieren, damit andere es sehen können. Sie können auch Benachrichtigungs-E-Mails an Ihr Team senden, um über Änderungen in Kontakt zu bleiben. Das Beste daran ist, dass Sie all dies ohne Codierung oder Programmierung tun können, sodass Sie sich einfacher auf die Arbeit vor Ihnen konzentrieren können.

Preise : Es gibt eine kostenlose Option für einzelne Benutzer, die unbegrenzte Produkte enthält, obwohl sie in anderen Aspekten eingeschränkt ist. Danach liegt der Preis zwischen 199 US-Dollar pro Jahr für eine Einzelperson und 2999 US-Dollar pro Jahr für ein Unternehmen. Sie können auch eine Lizenz erwerben, die von 399 $ für einen einzelnen Benutzer bis zu 5999 $ für ein Unternehmen (30 Benutzer) reicht.

Bonus: Der größte Vorteil von MockPlus besteht darin, dass Entwickler Wireframes dank der Tools, die sie entwickelt haben, um den Prozess zu beschleunigen, schneller erstellen können.

MOQUPS

Verfügbar für alle Betriebssysteme, da es webbasiert ist.

Hauptmerkmale : Moqups ist eine webbasierte Plattform, die verwendet werden kann, um Wireframes für Web-Apps und mobile Apps für iOS, Android und Bootstrap zu erstellen. Da die Plattform webbasiert ist, können Sie sich überall verbinden und arbeiten. Die Plattform ist nicht nur für Wireframes gedacht, Sie können auch Diagramme und Prototypen erstellen. Sie können Elemente einfach per Drag-and-Drop verschieben, ihre Schablonen-Kits verwenden, aus verschiedenen Schriftarten auswählen, Objekte auswählen und Ihre eigenen Bilder per Drag-and-Drop in das ziehen, woran Sie gerade arbeiten.

Preise : Wie die meisten Wireframing-Tools bietet Moqups eine kostenlose Testversion an. Danach hängt der Preis von mehreren Faktoren ab. Beispielsweise kostet ein Jahresabonnement, das unbegrenzte Projekte, Objekte, Speicherplatz und Kommentare umfasst, 13 USD pro Monat für einen einzelnen Benutzer und 19 USD pro Monat für ein Kreativteam (3 Personen). Sie müssen sich direkt an Moqups wenden, um ein Angebot für ein Enterprise-Konto zu erhalten.

Bonus: Wenn Sie einer NGO, Schule oder gemeinnützigen Organisation angehören, erhalten Sie von Moqups kostenlos ein Premium-Konto.

WIREFRAME.CC

Auf allen Betriebssystemen verfügbar, da es webbasiert ist.

Hauptmerkmale: Wireframe.CC gilt als eines der grundlegendsten verfügbaren Wireframe-Tools. Das ist nicht unbedingt eine schlechte Sache, besonders wenn Sie ein Anfänger sind. Tatsächlich fällt es Entwicklern aufgrund des einfachen Designs möglicherweise leichter, sich auf ihre Arbeit zu konzentrieren. Dieses webbasierte Programm kann verwendet werden, um Browserfenster, mobile Apps oder Tablet-Apps zu verdrahten.

Preise : Wireframe.CC bietet eine 7-tägige kostenlose Testversion und ein kostenloses Basiskonto. Danach kostet es 16 US-Dollar pro Monat oder 144 US-Dollar pro Jahr für die Einzelnutzung, 439 US-Dollar pro Monat oder 390 US-Dollar pro Jahr für drei Benutzer oder 99 US-Dollar pro Monat oder 990 US-Dollar pro Jahr für ein Unternehmen (unbegrenzte Benutzer).

Bonus: Die Einfachheit dieses Programms macht es schwer, sich ablenken zu lassen und zu zögern. Tatsächlich werden die UI-Elemente nur bei Bedarf als Optionen angezeigt.

MOCKFLUSS

Verfügbar als Desktop-App für Mac OS und Windows oder als Web-App.

Hauptmerkmale: Dieses Programm kann unter anderem zum Entwerfen von Web-Apps, mobilen Apps, Schnittstellen und Software verwendet werden. Sie bieten Komponentenpakete für die Schnittstelle Ihrer Wahl an, um Ihnen die Arbeit zu erleichtern. MockFlow bietet auch Funktionen für die Zusammenarbeit, mit denen alle Mitglieder Ihres Teams Änderungen in Echtzeit sehen können, während Sie gleichzeitig kommentierte Kommentare abgeben können, die jeder sehen kann. Sie können Ihre Dateien in einer Vielzahl von Formaten exportieren, darunter DOC, PDF und HTML.

Preise : Ein Basiskonto, das maximal einen Benutzer und ein Projekt in jedem Tool umfasst, ist kostenlos. Ein Premium-Konto für einen Benutzer kostet 14 $ pro Monat. Der einzige Nachteil sind die Freigabebeschränkungen. Ein Teampaket für drei Benutzer kostet 29 $ pro Monat, aber Sie können diesem Konto gegen eine zusätzliche Gebühr Benutzer hinzufügen. Ein Unternehmenskonto hat keine Begrenzung in Bezug auf Benutzer und kostet Sie 160 $ pro Monat.

Bonus: Einer der Vorteile der Verwendung von MockFlow ist der MockStore, der UI-Vorlagen für alle Arten von Schnittstellen verkauft. Wenn Sie sich uninspiriert fühlen, können Sie ihren Shop nach Ideen durchsuchen oder sogar eine Vorlage kaufen.

WAS IST EIN PROTOTYP?

Ein Prototyp ist noch nicht das fertige Produkt, aber er sollte ihm in Aussehen und allgemeiner Funktionalität sehr ähnlich sein. Dieser High-Fidelity-Prototyp Ihrer App oder Website sollte zum Testen Ihres Produkts und zum Einholen von Benutzerfeedback verwendet werden, um Ihnen bei der Verbesserung eventuell auftretender Probleme zu helfen.

Prototyp-Grundlagen

Ein Prototyp steht normalerweise am Ende des Designprozesses und fungiert als Brücke zum Endprodukt. In dieser Phase können Designer ihre Arbeit präsentieren und nutzen, um nützliches Feedback zu erhalten. Der Prototyp sollte nicht nur Designelemente enthalten, sondern auch zeigen, wie das Projekt nach Abschluss funktionieren wird.

Ein Prototyp enthält möglicherweise nicht alle Animationen und Interaktionen des endgültigen Projekts, aber er sollte in der Lage sein, den Ablauf der App zu demonstrieren. So können Sie seine Leistung testen.

Sie können es von Benutzern testen lassen und Ihnen Feedback geben, um die Benutzererfahrung zu verbessern. Sie haben vielleicht das Gefühl, eine echte App zu verwenden, aber ein Prototyp ist nur eine Sammlung von Bildern, die miteinander verbunden sind. Diese Arten von Prototypen, interaktive Prototypen, sind ideal, da Sie das fertige Design sehen und gleichzeitig damit interagieren können. Das Erstellen eines guten interaktiven Prototyps kann einige Zeit in Anspruch nehmen und etwas Geld kosten, aber die Investition lohnt sich auf jeden Fall.

BESTE PROTOTYPING-TOOLS

PROTO.IO
MARVELAPP
PROTT
ACHSE RP
EINSICHT

PROTO.IO

Verfügbar für Mac OS und Windows.

Hauptmerkmale : Der Slogan von Proto.io lautet „ Prototypen, die sich echt anfühlen“, und das aus gutem Grund. Ihr Produkt ermöglicht es Designern, High-Fidelity-Prototypen zu erstellen, die der Realität so nahe wie möglich kommen. Es kann verwendet werden Erstellen Sie Prototypen für mobile Apps sowie Web-Apps. Ihr Bildschirmaufzeichnungstool ermöglicht es Ihrem Team, genau zu sehen, wie Ihr Publikum mit dem Prototyp interagiert, und der Offline-Modus ermöglicht es Ihnen, ohne Internetverbindung mit dem Prototyp zu interagieren, ohne eine einzige Codezeile schreiben zu müssen.

Preise : Sie können Ihr Proto.io-Erlebnis mit einer 15-tägigen kostenlosen Testversion beginnen und haben dann die Möglichkeit, ein kostenloses Konto zu erhalten, obwohl es ziemlich begrenzt ist. Bezahlte Konten reichen von 24 USD pro Monat (Jahresabonnement für einen Benutzer, der 5 Projekte umfasst) bis zu 160 USD pro Monat (Jahresabonnement, 10 Benutzer und umfasst 30 aktive Projekte).

Bonus: Einige ihrer neuesten Tools beinhalten Vektoranimationen, die Sie selbst importieren oder aus ihrer Vektoranimationsbibliothek auswählen können. Sie haben auch kürzlich eine VR-Komponentenbibliothek eingeführt, mit der Sie 360-Bilder einfach integrieren können.

MARVELAPP

Verfügbar als Web-App für Mac OS, iOS, Android und Windows.

Hauptmerkmale : MarvelApp ist ein großartiges Prototypen-Tool für Designer mit minimaler Erfahrung. Seine einfache Benutzeroberfläche mag recht einfach aussehen, aber das ist Teil seiner Attraktivität. Es ist nicht nur ein guter Ausgangspunkt für neue Designer, sondern bietet auch die professionellen Ergebnisse, die erfahrenere Designer suchen. Marvel macht es Ihnen dank der Option, Ihr Team aus Slack oder Asana zu importieren, leicht, über Änderungen, neue Kommentare und Fortschritte auf dem Laufenden zu bleiben. Obwohl es sich um eine App handelt, können Sie damit Prototypen für das Web oder Mobilgerät erstellen.

Preise : MarvelApp ist kostenlos für einen einzelnen Benutzer erhältlich und umfasst zwei Projekte. Ihre kostenpflichtigen Abonnements beginnen bei 12 US-Dollar pro Monat für einen einzelnen Benutzer, unbegrenzte Projekte, passwortgeschützte Prototypen und die Option, Ihre Prototypen herunterzuladen.

Bonus: MarvelApp funktioniert auf allen iOS-Geräten, was bedeutet, dass Sie Ihre Arbeit schnell und einfach auf Ihrem iPhone, iPad, Apple Watch und sogar Apple TV ansehen können.

PROTT

Verfügbar als iOS- und Android-App.

Hauptmerkmale: Die Arbeit an einer mobilen App zur Erstellung eines Prototyps mag etwas einschränkend klingen, aber Prott beweist, dass dies nicht sein muss. Tatsächlich ist diese Plattform vollgepackt mit Funktionen und Tools, mit denen UI-Modelle, Desktop-Software-Prototypen, Website-Layouts, interaktive Wireframes und Prototypen erstellt werden können. Wenn Sie mit einem umfangreichen Team arbeiten, macht es Prott einfach, Änderungen mit ihnen zu teilen und Feedback in Echtzeit zu erhalten.

Preise : Prott bietet eine kostenlose Testversion an, die nach Ablauf der 30-Tage-Frist in ein kostenloses Abonnement umgewandelt wird. Diese Option gilt für einen einzelnen Benutzer und ein einzelnes Projekt. Ihre bezahlten Pläne beginnen bei 19 US-Dollar pro Monat für einen einzelnen Benutzer, drei Projekte, unbegrenzte Bildschirme und unbegrenzte Prüfer.

Bonus: Die Prott-Plattform ermöglicht es Ihnen, überall im Projekt Kommentare zu hinterlassen, wodurch Sie viel einfacher und klarer mit Ihrem Team kommunizieren können. Ihre Teammitglieder können direkt auf Ihre Kommentare antworten, sodass unterwegs nichts verloren geht.

ACHSE RP

Verfügbar für Mac und Windows.

Hauptmerkmale : Axure RP gilt als eines der umfassendsten Tools für das Prototyping , daher ist es nicht verwunderlich, wie viele Benutzer es hat. Obwohl es sich um eine sehr vollständige Benutzeroberfläche handelt, ist es eine bessere Option für diejenigen mit viel Erfahrung. Ein weiterer Grund, warum es in der Branche so bekannt ist, ist, dass es schon seit langer Zeit existiert und das Werkzeug ist, mit dem die meisten Designer in den frühen 2000er Jahren ihre Fähigkeiten erlernt haben. Es ist erwähnenswert, dass Sie einige Programmierkenntnisse benötigen, um das, was Sie brauchen, aus diesem Tool herauszuholen.

Preise : Sie können mit einer 30-tägigen kostenlosen Testversion beginnen. Danach beginnen die Abonnements auf der Pro-Ebene für 29 USD pro Monat und Benutzer und reichen bis zu 99 USD pro Monat und Benutzer auf der Enterprise-Ebene. Unbefristete Lizenzen beginnen bei 49 US-Dollar pro Monat und Benutzer, sind jedoch nicht auf Enterprise-Ebene verfügbar.

Bonus: Axure RP bietet Designern im Vergleich zu anderen Prototyping-Tools die meisten Optionen. Während seine Benutzeroberfläche die meisten Funktionen bietet, hat es den Preis eines komplizierteren Systems. Einmal gemeistert, wird Axure RP Ihnen großartige Ergebnisse liefern.

EINSICHT

Auf allen Betriebssystemen verfügbar, da es webbasiert ist.

Hauptmerkmale: InVision ist ein bekanntes und hoch angesehenes Tool in der Branche, mit dem Designer Prototypen für Web, iOS und Android erstellen können. Diese Plattform wurde für große Teams entwickelt, sodass die Zusammenarbeit ein Kinderspiel ist. Es ist ganz einfach zu bedienen, Sie müssen lediglich Ihre Designdateien hochladen und ihnen Elemente wie Animationen, Gesten und Übergänge hinzufügen. Das Endergebnis ist ein zuverlässiger High-Fidelity-Prototyp.

Preise : InVision bietet einen kostenlosen Plan an, der einen aktiven Prototypen enthält, danach beginnen kostenpflichtige Pläne bei 15 $ pro Monat für drei Prototypen für einen einzelnen Benutzer. Ein Team-Abonnement für fünf Benutzer und unbegrenzte Prototypen kostet 100 US-Dollar pro Monat.

Bonus: InVision hat kürzlich sein mit Spannung erwartetes Studio veröffentlicht, das behauptet, „das leistungsstärkste Screen-Design-Tool der Welt“ zu sein. Dieses neue Tool soll den Prozess zwischen dem Design und der Erstellung funktionaler Prototypen vereinfachen. Das Beste daran ist, dass es kostenlos ist!

ERSTELLEN SIE MOCKUPS IHRES PRODUKTS

Sobald Ihr Prototyp fertig ist und Sie alle Probleme behoben haben, auf die Sie während des Testprozesses gestoßen sind, nähern Sie sich wahrscheinlich einem Starttermin. Aber bevor Sie live gehen, stellen Sie sicher, dass Sie über die richtigen Tools verfügen, um Ihre App oder Website richtig zu vermarkten . Die Verwendung von Modellen, die zeigen, wie Ihre neue App oder Website auf echten Geräten aussieht, kann dazu beitragen, mehr Aufmerksamkeit darauf zu lenken.

Was ist ein Modell?

Wir haben bereits den Unterschied zwischen einem Wireframe und einem Mockup besprochen , aber die Art von Mockup, über die wir hier sprechen, ist etwas völlig anderes. Diese Art von Mockup kommt am Ende, sobald Ihre App oder Website bereit ist, live zu gehen. Dies sind im Grunde Fotos, die Sie mit Bildern oder Screenshots Ihres Endprodukts anpassen können. Sie können beispielsweise einen Screenshot Ihrer App machen und ihn auf dem Bildschirm eines iPhone X ablegen.

Modelle sind wichtig, da sie zur Vermarktung und Bewerbung Ihrer App oder Website verwendet werden können. Sie können auch beim Erstellen von Screenshots Ihrer App für den App Store oder Play Store verwendet werden. Die Modelle von Placeit sind einfach zu verwenden und in einer großen Auswahl erhältlich. Sie können alle Arten von Modellen finden, darunter iPhone-Modelle, iPad-Modelle, MacBook-Modelle, Browser-Modelle und Android-Modelle.

Präsentieren Sie Ihre Arbeit auf einem Mockup

Wahrscheinlich freuen Sie sich darauf, endlich das Projekt abzuschließen, an dem Sie so lange so hart gearbeitet haben. Wir wissen, dass Sie wahrscheinlich nicht viel Geld für Werbung übrig haben, und hier kommen die Mockups von Placeit ins Spiel. Sie sind einfach zu bedienen, erzeugen großartige Bilder Ihres Produkts und sind sehr erschwinglich! Ganz gleich, wofür Sie werben, eine iPhone-App, eine iPad-App oder eine neue Website, Placeit hat die neuesten Gadget-Mockups, die Sie abdecken!

Wenn Ihnen dieser Beitrag gefallen hat, versuchen Sie es bitte mit dieser Liste der 10 App-Store-Optimierungstools oder werfen Sie einen Blick auf 7 Tipps, um für Ihre App zu werben.