Die 7 besten Wireframing- und Prototyping-Tools für App-Hersteller

In letzter Zeit habe ich viele Diskussionen über UI und UX geführt. Niemand hat sich darüber beschwert, daher nehme ich an, dass wir einen Punkt erreichen, an dem jeder, der mit der App-Entwicklung befasst ist, die Bedeutung von UI und UX erkennt.

Eine großartige App-Idee wird so leicht durch eine schlecht durchdachte Benutzeroberfläche und Erfahrung ruiniert. Und mit vielen Tools, die jetzt für schnelles Wireframing und Prototyping verfügbar sind, sollte es keinen Grund geben, keine brillante Erfahrung zu machen.

Obwohl die Begriffe häufig zusammen verwendet werden, gibt es eine klare Unterscheidung zwischen einem Drahtmodell und einem Prototyp.

Ein Drahtmodell ist ein skelettartiges Layout der Struktur Ihrer App. Es wird normalerweise ohne Farbe ausgeführt - einfaches Schwarzweiß - und während ein Drahtmodell anzeigt, wohin Text, Bilder und andere Designelemente gehen, enthält es keine tatsächlichen Bilder, Texte usw. Jedoch ist jedes der Drahtgitterelemente in echtem Maßstab gezeigt. Der Grund dafür ist, dass Drahtgitter Ihre Aufmerksamkeit auf die Struktur richten sollen, nicht auf das eigentliche Design. Ähnlich wie bei den Bauplänen für ein Haus oder Gebäude: Sie erhalten eine klare Vorstellung von der Struktur und Platzierung von allem, ohne vom Design abgelenkt zu werden.

Prototypen liegen zwischen Drahtgittern und einer voll funktionsfähigen App. Der wichtigste Teil eines Prototyps ist die Verwendung von Animationen, mit denen Sie untersuchen können, wie Ihre App auf Benutzerinteraktionen und Seiten- oder Bildschirmübergänge reagiert. Prototypen können auch tatsächliche Bilder, Symbolsätze und Text enthalten. Dies wird jedoch durch den Zweck des Prototyps bestimmt. Wenn Sie nur Interaktionen und Bildschirmabläufe testen, können Sie einen Prototyp erstellen, der nur Animationen und möglicherweise etwas Farbe enthält. Wenn Sie versuchen, Ihre Idee zu validieren oder potenzielle Investoren anzusprechen, möchten Sie, dass Ihr Prototyp mit geeigneten Bildern, Texten usw. besser poliert wird.

Obwohl die Tools, die ich in diese Zusammenfassung aufgenommen habe, das Erstellen von Prototypen erleichtern, einschließlich mehr Elementen über die Animation hinaus, und ein Farbtupfer bedeutet, dass Sie mehr Zeit benötigen, um Änderungen am Prototyp vorzunehmen.

1. Balsamiq

Wenn Sie nur ein Drahtmodell Ihrer App-Idee zusammenstellen möchten, ist Balsamiq das richtige Tool für Sie. Balsamiq ist sowohl als Desktop- als auch als Webanwendung verfügbar und gibt es seit 2008.

Wireframes erfordern nur sehr wenig Aufwand und Zeit. Balsamiq wurde daher entwickelt, um Ihnen bei der schnellen Erstellung Ihrer Wireframes zu helfen. Fügen Sie einfach die benötigten Grundelemente hinzu und ändern Sie die Größe, Position und passen Sie sie nach Bedarf an. Die Drahtgitter, die Sie mit Balsamiq erstellen, sehen etwas rau aus, aber das ist beabsichtigt. Das Kreativteam hinter dem Tool ist der Ansicht, dass ein Drahtmodell, das eher einer Skizze ähnelt, das Brainstorming fördert. Welches ist ein großer Grund für Wireframing in erster Linie.

Mithilfe der einfachen Versionskontrolle können Sie verfolgen, wo Sie begonnen haben und wo Sie sich gerade befinden. Und nur weil dies ein Drahtmodell ist, heißt das nicht, dass Sie keine Eingaben von potenziellen Benutzern / Clients erhalten können. Sie können mit Balsamiq keinen vollständig interaktiven Prototyp erstellen, aber Sie können die von Ihnen erstellten Bildschirme / Seiten verknüpfen, um einen einfachen Click-through-Prototyp zu erstellen. Keine Animationen oder Interaktionen: Der Zweck besteht ausschließlich darin, den Fluss zu demonstrieren.

Und wenn Balsamiq etwas zu begrenzt erscheint, können Sie jederzeit von der Community erstellte Erweiterungen, Vorlagen und Symbolpakete hinzufügen.

Balsamiq ist als Desktop-App zum Preis von 89 USD / Benutzer, als webbasierte App ab 12 USD / Monat oder als mit Google Drive verknüpfte App zum Preis von 5 USD / Benutzer / Monat erhältlich. Sie können jedoch zunächst mit einer kostenlosen Testversion beginnen, um festzustellen, ob dies das richtige Tool für Sie ist.

2. WireframePro

Obwohl eine MockFlow-Lizenz den Zugriff auf acht verschiedene Apps beinhaltet, ist WireframePro für Sie von Interesse, wenn Sie mit der Entwicklung Ihrer eigenen App beginnen. Auch hier handelt es sich um eine webbasierte App mit einer Drag & Drop-Oberfläche zum mühelosen Erstellen eines Drahtgitters.

Es enthält alle Standardelemente der Benutzeroberfläche sowie eine Vielzahl weiterer Komponenten, die Sie möglicherweise benötigen, einschließlich einer Auswahl für Apple- und Android-Smartwatches. Die App bietet Ihnen auch Zugriff auf den Mock Store, der eine große Auswahl an Vorlagen von Drittanbietern bietet, die Sie entweder als Inspiration oder als schnellen Ausgangspunkt für Ihr eigenes Drahtmodell verwenden können.

Wie bei allen hier aufgeführten Tools wurde WireframePro für Einzelpersonen und Teams entwickelt, wobei die Tools für die Zusammenarbeit direkt integriert sind. Eine nette Ergänzung ist die Möglichkeit, automatisch Spezifikationen für jedes Element zu generieren. Wenn Sie also die Designarbeit nicht selbst erledigen, ist Ihr Designer wird einfachen Zugriff auf alle designbezogenen Details haben.

Wenn Sie eines Ihrer Projekte freigeben, können Sie Rechte zuweisen, sodass einige Personen nur ein Projekt anzeigen und kommentieren können, während andere es auch bearbeiten können.

WireframePro hat keine kostenlosen Pläne, aber Sie können es 30 Tage lang ausprobieren, bevor Sie zu einem kostenpflichtigen Plan wechseln. Lizenzen beginnen bei 19 USD / Monat für einen Benutzer und 39 USD / Monat für bis zu drei Teammitglieder.

3. UXPin

Wie der Name schon sagt, betont das Team hinter UXPin UX. Daran ist nichts auszusetzen. Wireframing und Prototyping sollen Ihnen dabei helfen, die Benutzeroberfläche Ihrer App zu verfeinern. Mit UXPin können Sie sowohl das Wireframing als auch das Prototyping übernehmen, sodass Sie nicht zwischen den Tools wechseln müssen.

Wie zu erwarten, unterstützt UXPin Sketch-Quelldateien und Photoshop-Dateien. Es verfügt jedoch auch über einen integrierten Editor, der CSS-Code-Snippets unterstützt, mit denen Sie jedes in Ihrem Drahtmodell und Prototyp verwendete Element anpassen können. Mit UXPin ist es ganz einfach, jede Iteration jeder von Ihnen hinzugefügten oder erstellten Datei zu verfolgen, sodass Sie nicht durch Dutzende von Dateien klicken müssen, um nach der Originalversion zu suchen.

Das Erstellen grundlegender Drahtmodelle und Prototypen ist schnell und einfach, da alle Standardinteraktionen für Prototypen verfügbar sind. Natürlich können Sie bei Bedarf auch weiterhin benutzerdefinierte Interaktionen erstellen. Sobald Ihr Prototyp fertig ist, können Sie ihn zum Testen an jeden senden. Alle Interaktionen werden auf Video aufgezeichnet, zusammen mit dem Audio der Kommentare jedes Testers.

UXPin unterstützt Wireframing und Prototyping von Websites, mobilen Apps und Web-Apps und verfügt über 14 voreingestellte Haltepunkte, mit denen Sie Ihr Design problemlos auf mehreren Geräten anzeigen können. Die Preise beginnen bei 19 USD / Monat für den Basisplan und 29 USD / Monat für die Freigabe erweiterter Funktionen.

4. Prott

Obwohl Prott als Prototyping-Tool gebrandmarkt ist, enthält es auch eine Wireframing-Funktion. Wenn Ihre App-Idee nur grob gezeichnete Skizzen sind, können Sie Ihre Skizzen fotografieren und direkt in die App importieren. Diese Skizzen können dann animiert oder als Grundlage für Ihr Drahtmodell verwendet werden. Ziehen Sie voreingestellte Formen und Benutzeroberflächenelemente per Drag & Drop direkt auf Ihre Skizze, um sofort von verwackelten Linien zu einem professionellen Lo-Fi-Drahtmodell zu gelangen.

Prott enthält eine große Anzahl von UI-Kits für eine Vielzahl von Geräten, von iOS bis Android und Web. Sie können aber auch eine eigene Bibliothek mit Schnittstellenelementen erstellen.

Anstatt Ihren Prototyp nur mit anderen Personen zu teilen, können Sie jetzt sogar eine detaillierte Karte hinzufügen, die die Struktur Ihrer App klar zeigt. Und jeder, mit dem Sie Ihren Prototyp teilen, kann direkt auf jedem Bildschirm Kommentare abgeben, sodass Sie leichter verstehen, worauf sich ihre Kommentare beziehen.

Prott bietet eine 30-Tage-Testversion mit vollem Funktionsumfang, wobei ein kostenloser Plan keine anderen Grenzen als die Anzahl der Projekte hat, die Sie erstellen können. Wenn Sie weitere Projekte erstellen müssen, können Sie zu einem Starter- oder Pro-Plan wechseln, der ab 19 USD / Monat erhältlich ist.

5. InVision

InVision ist ausschließlich für das Prototyping vorgesehen, unterstützt jedoch eine Vielzahl von Anwendungen. Mit InVision können Sie schnell interaktive Prototypen Ihrer Website, Web-App oder mobilen App erstellen und den Prototyp dann auf tatsächlichen Geräten anzeigen. Dazu gehören Tablets und Wearables, nicht nur Mobiltelefone.

Der Prozess ist so einfach wie:

  • Fügen Sie Ihre Design-Assets (InVision unterstützt GIFs, PNGs, JPEGs, PSDs und Sketch-Quelldateien) per Drag & Drop oder durch Synchronisierung mit Dropbox hinzu.
  • Zeichnen Sie Hotspots für jedes Asset und legen Sie fest, dass sie mit anderen Assets, externen URLs oder Ankern verknüpft sind.
  • Fügen Sie Interaktivität in Form von Gesten (Tippen oder Wischen), festen Bereichen (Menüleiste usw.) und Übergängen hinzu.

Anschließend können Sie das Projekt auf Ihrem Telefon, Tablet oder Computer anzeigen oder sogar per SMS oder E-Mail einen Link an Freunde und Kollegen senden. Dies erleichtert es Ihnen, andere Personen in den Entwurfsprozess einzubeziehen, und jeder, dem Sie einen Link senden, kann Kommentare zu jedem Entwurf abgeben.

Die Preise für InVision beginnen kostenlos für einen Prototyp, 25 USD / Monat für unbegrenzte Prototypen und 99 USD / Monat für Teams mit bis zu 5 Mitgliedern.

6. Staunen

Wie InVision dient auch die Marvel-App dem Prototyping. Es enthält Standardunterstützung für Sketch- und Photoshop-Dateien, oder Sie können das integrierte Canvas-Designtool verwenden. Marvel hat auch eine iOS- und Android-App, mit der Sie Ihre eigenen Kritzeleien und Designs fotografieren und direkt in Ihre Marvel-Bibliothek hochladen können.

Es ist einfach, Hotspots für Ihre Designs zu erstellen. Dutzende von Interaktionen und Bildschirmübergängen stehen zur Verfügung, um Ihren Prototyp zum Leben zu erwecken. Und Sie können Ihren Prototyp auf einer Vielzahl von Bildschirmen testen, einschließlich Apple Watch.

Natürlich ist kein Prototyping-Tool eine Diskussion wert, wenn es keine Zusammenarbeit beinhaltet. Und mit Marvel können Sie Ihren Prototyp mit Anmerkungen versehen, um bestimmte Bereiche hervorzuheben, die von Personen kommentiert werden sollen. Kommentare können von jedem abgegeben werden, an den Sie Ihren Prototyp senden, ohne dass dieser zuerst ein Marvel-Konto erstellen muss.

Die Preise für Marvel beginnen bei 0 USD / Monat für einen Benutzer und bis zu zwei Projekte, jedoch mit eingeschränkten Funktionen. Für 14 US-Dollar pro Monat erhalten Sie unbegrenzte Projekte und alle Funktionen mit separaten Preisen für Teams und Unternehmenskunden.

7. Proto.io

Proto.io ist ein beliebtes Prototyping-Tool, das 2016 ein umfangreiches Update erhalten hat. Proto.io enthält alle Funktionen, die für ein Prototyping-Tool erforderlich sind. Das Update hat jedoch auch eine Reihe vereinfachter Funktionen mit sich gebracht.

Neben einer neu gestalteten Benutzeroberfläche, die den Zugriff auf alle Kernfunktionen erleichtert, hat Proto.io auch viel Wert auf Animation gelegt. Bewegung ist eine wichtige Funktion mobiler Apps, und die Statusübergangsfunktion von Proto.io erleichtert es jedem, Animationen in seinem Prototyp zu erstellen und anzupassen.

Proto.io hat außerdem eine Bibliothek für Interaktionsdesignmuster eingeführt, mit der Interaktionen mühelos hinzugefügt werden können. Diese Muster umfassen Interaktionen wie Einschubmenüs und Ziehen zum Aktualisieren. Sie müssen Ihrem Projekt lediglich eine Interaktion hinzufügen und anpassen.

Die neue Version von Proto.io erweitert Ihre Fähigkeit, Benutzer Ihren Prototyp testen und kommentieren zu lassen. Es lässt sich in Benutzertestplattformen wie Validately und UserTesting integrieren und bietet Ihnen Zugriff auf einen größeren Pool realer Benutzer. Und mit der Lookback-Integration erhalten Sie unbegrenzte Aufzeichnungen - derzeit nur unter iOS -, die Ihnen zeigen, wie Benutzer mit Ihrer App interagieren und navigieren.

Proto.io bietet eine 15-Tage-Testversion mit vollem Funktionsumfang. Danach können Sie zu einem sehr begrenzten kostenlosen Konto wechseln. Bezahlte Pläne beginnen bei 29 USD / Monat, abhängig von der Größe Ihres Teams.

Fazit

Wenn Sie gerade erst mit der App-Entwicklung beginnen, möchten Sie möglicherweise sowohl Drahtmodelle als auch Prototypen Ihrer App-Idee erstellen. Wenn Sie sich jedoch mit dem Entwicklungsprozess vertraut machen, können Sie in Betracht ziehen, nur das eine oder andere zu tun.

Da Drahtgitter so einfach im Design sind, müssen Sie sich darauf konzentrieren, den Fluss und die Benutzererfahrung richtig zu gestalten. Prototypen können Ihnen dabei helfen, sowohl Flow als auch UX zu verfeinern, Designfehler hervorzuheben und vor allem besser auszusehen als Wireframes, wenn Sie Kunden oder Investoren präsentieren müssen. Auch wenn es verlockend sein mag, sich für ein Tool zu entscheiden, das sowohl Wireframing als auch Prototyping kombiniert, sollte der entscheidende Faktor immer sein, welches Tool alle Funktionen enthält, die Sie tatsächlich benötigen, und das am bequemsten zu verwenden ist. Und da jedes der hier aufgeführten Tools einen kostenlosen Plan oder eine kostenlose Testversion bietet, sollten Sie einen Tag damit verbringen, alle zu testen, bevor Sie eine Entscheidung treffen.