Wireframe im Vergleich

Die 15 besten Wireframe Anbieter im Test 2017

Erstellen Sie online schnell und mit wenigen Klicks Wireframes und GUI Prototypen. Unser Vergleich zeigt Ihnen die Anbieter und deren Vor- und Nachteile.

Sandra Pretzer
Die besten Wireframe Tools im Vergleich
Von Sandra Pretzer
axure Test

axure

  1. Viele Features
  2. Prototyping
  1. Relativ teuer
  2. Nur Desktop-Version
Preis ab
265,60 €
pro Lizenz
Balsamiq Test

Balsamiq

  1. Schlichtes Design
  2. Intuitive UI
  3. Kostenlos für Studenten
  1. Kein Prototyping
  2. Plugins kostenpflichtig
Preis ab
9,19 €
pro Monat
Bei jährlicher Zahlung
creately Test

creately

  1. Kostenlose Version
  2. Diverse Plugins
  1. Kein Prototyping
  2. Nur simple Mockups
Preis ab
0,00 €
pro Monat
FlairBuilder Test

FlairBuilder

  1. Prototyping
  2. Responsive Wireframing
  3. Aktive Projekte unbegrenzt
  1. Nur Desktop-Version
  2. Keine Collaboration-Features
Preis ab
90,98 €
pro Lizenz
Gliffy Wireframe Tool Test

Gliffy Wireframe Tool

  1. Kostenlose Version
  2. Diverse Plugins
  1. Kein Prototyping
  2. Nur simple Wireframes
Preis ab
0,00 €
pro Monat
HotGloo Test

HotGloo

  1. Prototyping
  2. Gute Collaboration-Features
  1. Keine kostenlose Version
  2. Keine Plugins
Preis ab
5,10 €
pro Monat
Bei jährlicher Zahlung
Justinmind Test

Justinmind

  1. Prototyping
  2. Viele Collaboration-Features
  3. Kostenlose Version
  1. Teure Einmal-Lizenz
  2. Keine Plugins
Preis ab
0,00 €
pro Monat
MockFlow Test

MockFlow

  1. Viele Export-Funktionen
  2. Kostenlose Version
  1. Kein Prototyping
  2. Keine Plugins
Preis ab
0,00 €
pro Monat
Mockingbird Test

Mockingbird

  1. Web-basiert
  2. Unbegrenzte Anzahl User
  1. Kein Prototyping
  2. Keine kostenlose Version
Preis ab
10,11 €
pro Monat
Bei jährlicher Zahlung
Moqups Test

Moqups

  1. Kostenlose Version
  2. Web-basiert
  3. Prototyping
  1. Kaum Plugins
Preis ab
0,00 €
pro Monat
1 von 2

Das Wichtigste in Kürze
  • Wireframe Tools ersetzen das Skizzieren einer Website oder App mit Stift und Zettel.
  • Im Vergleich unterscheiden sich die Tools hinsichtlich Funktionsumfang und Designmöglichkeiten - von Basis-Skizzen bis hin zum interaktiven Prototyp.
  • Bei der Tarifwahl spielen auch die Anzahl der aktiven Projekte sowie der Nutzer eine große Rolle.

Was sind Wireframe Tools?

Immer und überall verfügbar

Viele dieser Tools sind web-basiert, das bedeutet, Sie können jederzeit von überall auf Ihre Entwürfe zugreifen und in Echtzeit mit anderen Teammitgliedern zusammenarbeiten.

Wireframe Tools helfen Designern bei der Skizzierung von Website-Layouts und sind quasi eine digitale Form von Zettel und Stift - und logischerweise viel funktionaler. Die Ansicht basiert auf Gitternetzlinien oder Punkten, um die Anordnung der Elemente optimal zu gestalten.

Zudem haben Sie die Möglichkeit, Ihre Wireframes in diverse Formate zu exportieren oder online durch einen Link mit Ihren Kunden zu teilen. So sammeln Sie gezielt Feedback von den richtigen Personen und können diese Rückmeldungen in fortgeschrittenen Versionen umsetzen.

Für wen sind Wireframe Tools geeignet?

Die klare Zielgruppe für Wireframing Tools sind UX-Designer oder Webdesigner. Wenn Sie professioneller an die Konzeptionierung und das Design einer Website gehen wollen, als Ihre Ideen nur auf Papier zu skizzieren, sind Wireframing Tools eine Notwendigkeit. Umso mehr, wenn Sie Websites für Ihr Unternehmen oder externe Kunden designen. Dabei ist es egal, ob Sie als Freelancer oder innerhalb eines Teams in einer Agentur arbeiten.

Der Funktionsumfang ist je nach Anbieter recht unterschiedlich, daher sind manche Tools eher für Anfänger und andere für Fortgeschrittene und Profis geeignet.

Einen guten Einstieg ins Webdesign beziehungsweise UX-Design bieten beispielsweise Balsamiq oder Mockflow. Axure oder Omnigraffle richten sich eher an fortgeschrittene User.

Was sind die Vorteile von Wireframe Tools?

Es mag manche Webdesigner geben, die nach wie vor am liebsten den Stift in die Hand nehmen und auf ihrem Block Skizzen erstellen. Für eine erste Idee schön und gut, dennoch wird hier ein digitales Produkt mit Interaktionen und Funktionen skizziert. Der Entwurf muss früher oder später mit Kunden und Entwicklern abgesprochen und erklärt werden. Spätestens nach einer ersten Feedback-Runde ist es unvermeidlich, die Skizzen zu digitalisieren. Wireframe Tools ermöglichen gleich zu Beginn ein auf das jeweilige Endgerät angepasste Design. Weitere Vorteile sind:

  • Standardisierte Vorlagen und Elemente
  • Versionierung (“Wie sah das nochmal vorher aus?”)
  • Alle Versionen liegen digitalisiert an einem zentralen Ort
  • Feedback wird direkt im Tool erfasst
  • Wireframes können exportiert und online geteilt werden (keine verschwundenen Zettel und Entwürfe mehr)
  • Bessere Visualisierung durch Hinzufügen von Logo, Farbe und Inhalt der späteren Webseite
  • Manche Tools ermöglichen die Kreation von interaktiven Prototypen

Kleines Nachschlagewerk

Nachfolgend finden Sie die wichtigsten Begriffe bezüglich Wireframe Tools kurz erklärt:

UX

UX steht für User Experience (zu Deutsch: Nutzererfahrung, Nutzererlebnis) und hängt mit der Gestaltung von Websites und Apps zusammen. Ist die Seite logisch aufgebaut, die Benutzerführung intuitiv, etc.? Durch eine gute User Experience steigern Sie die Zufriedenheit Ihrer Besucher und somit die Performance Ihrer Webseite.

Wireframes

Wireframes sind quasi Blaupausen einer Website oder Applikation. Je nach Art geht es im Prinzip darum, ein erstes Konzept bezüglich Design und späterer Funktionalitäten zu erstellen. Folgende Arten werden generell unterschieden:

  • Sketchy/Statische/Low-fidelity (Low-fi) Wireframes: Diese Art hat noch am Meisten mit dem altbewährten Zettel-und-Stift-Konzept gemein. Wie der Name schon sagt, geht es hierbei nur um einen ersten Entwurf, eine Art Skizze des Webseiten-Layouts. Dabei werden nur grobe Elemente ohne Inhalte verwendet und deren Anordnung geplant. Fidelity steht in diesem Zusammenhang für den Grad der Exaktheit der späteren Internetseite oder Applikation. Low-fidelity Wireframes beinhalten meistens viele Kommentarfelder, in denen die spätere Funktion erklärt wird. Sie werden zu Beginn eines Design-Prozesses eingesetzt, um so möglichst viel Feedback zu grundlegenden Elementen und deren Positionierung zu erhalten.
  • Dynamische/High-fidelity (Hi-fi) Wireframes: Hi-fi Wireframes gehen einen Schritt weiter und beinhalten mehr Details, erste Texte und eventuell verschiedene Graustufen, um die Wichtigkeit eines Elements hevorzuheben. Sie spezifizieren einzelne Elemente näher, z.B. Footer, die Navigation oder Call-to-Action Buttons. High-fidelity Wireframes sind schon recht nah am Design der eigentlichen Website dran und lassen weniger Spielraum für Phantasie und subjektive Interpretationen. Manche beinhalten bereits erste Interaktionen und Seitenabfolgen, also die Verlinkung von einzelnen Seiten, um die Nutzerführung zu veranschaulichen.
  • Mockups: Auf der Grundlage von Wireframes werden schließlich Mockups erstellt, welche bereits sehr viele Details beinhalten. Hier kommen Typographie, Farbgebung und tatsächliche Inhalte zum Einsatz, um ein möglichst genaues Bild der späteren Website zu liefern.

Prototypen

Die letzte Stufe im Design-Prozess bilden die Protoypen der Website oder App. Alle visuellen Elemente sind bearbeitet, nun geht es um die tatsächliche Nutzerführung. Die erstellten Seiten werden mit HTML oder CSS in einen klickbaren Prototyp überführt und verlinkt. So testen Sie die Bedienung im Browser und führen bereits Interaktionen durch. Protoypen werden häufig für Usability-Tests durch Dritte eingesetzt, um die letzten Unklarheiten zu beseitigen und Optimierungen bezüglich der User Experience durchzuführen.

Stencils

Stencils sind quasi Schablonen, die Sie für die Erstellung Ihrer Wireframes verwenden. Standardisierte Elemente oder Layouts müssen Sie so nicht selber langwierig jedes Mal aufs Neue erstellen. Beispiele dafür wären generell das Layout eines iPhones, eines Tablets oder einer Website. Auch Icons wie ein Einkaufswagen für den Warenkorb eines Shops oder eine Lupe für eine Suchfunktion zählen dazu.

Widgets

Widgets sind interaktive Elemente einer Website oder App. Dazu zählen beispielsweise einfache Buttons, eine Toolbar, ein Dropdown-Menü oder eine Scroll-Leiste.

UI Bibliothek

In einer UI (= User Interface, zu Deutsch Benutzeroberfläche) Bibliothek finden Sie eine Ansammlung von Stencils, Widgets und anderen Elementen zur Kreation von Wireframes.

Versionierung

Wireframes und Prototypen sind mitunter dazu da, um Feedback von Entwicklern, Kunden und Kollegen im Design-Team einzuholen und dieses gesammelt umzusetzen. Für jede Veränderung wird die aktuelle Version nicht etwa überschrieben, sondern eine neue Version erstellt, um alle Änderungen nachverfolgen zu können. Diese Ansammlung an verschiedenen Versionen wird Versionierung genannt.

Aktive Projekte

Die Zahl der aktiven Projekte ist mit ausschlaggebend für den Preis eines Wireframe Tools. Wie der Name schon sagt, sind damit die Projekte gemeint, an denen zeitgleich aktiv gearbeitet wird und die noch nicht abgeschlossen sind. Viele Tools sind web-basiert, benötigen also Speicher- und Arbeitsplatz in der Cloud des Anbieters.

Wieviel Platz ein Wireframe Tool Anbieter zur Verfügung stellt, ist sehr unterschiedlich. Manche erlauben eine unbegrenzte Anzahl an aktiven Projekten, wohingegen andere eine Obergrenze setzen oder an einen bestimmten Tarif binden.

Was muss ein Wireframe Tool können?

Die verschiedenen Funktionen eines Tools unterscheiden sich von Anbieter zu Anbieter. Je nachdem, welche Art von Wireframes und Prototypen Sie erstellen wollen, variieren die Ansprüche entsprechend. Ein paar Basis-Features sollte aber jedes Tool mitbringen:

  • Intuitiv zu bedienende Oberfläche
  • Auswahl an Stencils und Vorlagen in einer Bibliothek
  • Kommentarfunktion
  • Versionierung
  • Grundlegende Export- und Sharing-Optionen (z.B. Export nach PNG und PDF; online teilen per Link)
  • Ggfs. Archivierung des Projekts

Was muss ich bei der Wahl eines Wireframe Tools beachten?

Alternative zum Kauf

Viele Wireframe Tools können Sie bis zu 31 Tage lang mit vollem Funktionsumfang gratis testen. Oftmals wird eine kostenlose Version mit eingeschränkten Funktionen angeboten, welche aber für manchen Webdesigner vollkommen ausreicht und gerade für Anfänger attraktiv ist.

Sie sollten sich darüber im Klaren sein, was Sie wirklich für Ihre Arbeit benötigen. Viele professionelle Features, riesige UI Bibliotheken und unzählige Funktionen zur Kollaboration bringen einen hohen Einarbeitungsaufwand mit sich. Umso mehr, wenn das Tool von mehreren Personen in einem Team verwendet werden soll. Das lohnt sich natürlich nur, wenn Sie auch tatsächlich täglich mit allen Funktionen arbeiten.

Wenn Sie nur ein Tool zur Erstellung von visuellen Skizzen, also Low-fidelity Wireframes benötigen, sind Tools mit Prototyp-Funktionen nicht sinnvoll. Arbeiten Sie im Team und mit Personen an verschiedenen Standorten zusammen, sollten Sie ein Wireframe Tool wählen, das mit guten Collaboration-Features ausgestattet und web-basiert ist.

Arbeiten Sie allein, haben aber viele Kunden und verschiedene Projekte, lohnt sich ein Tarif mit einer hohen Zahl an inkludierten aktiven Projekten.

Mit welchen Kosten muss ich rechnen?

Die Kostenstruktur ist je nach Anbieter unterschiedlich. Die meisten bieten einen Monatstarif an, manche eine Einzellizenz und andere beides. Viele Wireframe Tools können Sie kostenlos nutzen, müssen dafür aber teilweise auf diverse Funktionen verzichten und sich hinsichtlich der aktiven Projekte und/oder Useranzahl einschränken. Folgende Punkte beeinflussen unter anderem den Preis des Wireframing Tools:

  • Bevorzugen Sie ein Abo-Modell oder eine Einzellizenz?
  • Wieviele User benötigen Zugriff auf das Tool?
  • An wievielen aktiven Projekten werden Sie arbeiten?
  • Sind nur Wireframes oder auch interaktive Prototypen möglich?
  • Brauchen Sie spezielle Collaboration-Features?
  • Benötigen Sie Plugins wie Confluence oder JIRA?
  • Bezahlen Sie jährlich oder pro Monat?

Je nachdem, welche Kombination der obigen Punkte für Sie infrage kommt, liegt der Preis für ein Online Wireframe Tool zwischen ca. 5 und 160 Euro pro Monat. Für eine Einzellizenz zum Download des Tools werden ca. 100 bis 500 Euro fällig.

Viele Anbieter sind in den USA ansässig, daher müssen Sie den Umrechnungskurs beachten.

Fazit

Der Markt der Wireframing Tools ist inzwischen relativ groß, da kann die Wahl des richtigen Anbieters schon etwas Zeit in Anspruch nehmen. Doch der Aufwand lohnt sich, denn haben Sie einmal das richtige Tool für sich gefunden, optimiert sich der Designprozess und spart Ihnen viel Arbeit und Zeit. Durch das digitalisierte und zentrale Hosting Ihrer Projekte geht nichts mehr verloren und Sie können diese schnell mit anderen Personen teilen. So erhalten Sie relevantes Feedback und setzen Änderungen schneller um. Manchem Designer mag zwar ein wenig das Herz bluten, seine handgefertigten Skizzen aufzugeben, aber die Arbeit mit einem Wireframing Tool ist im Web- und UX-Design unumgänglich. Ihren Skizzenblock können Sie ja trotzdem behalten.

  • axure
  • Balsamiq
  • creately
  • FlairBuilder
  • Gliffy Wireframe Tool
  • HotGloo
  • Justinmind
  • MockFlow
  • Mockingbird
  • Moqups
  • Omnigraffle
  • Pencil Project
  • pidoco
  • ProtoShare
  • wireframe.cc

Wir haben die gängigsten Wireframe Tools miteinander verglichen und eine grobe Übersicht an Funktionen erstellt. Wenn Sie bereits Erfahrungen mit einem Tool gemacht haben, teilen Sie uns diese gerne in Form einer Bewertung mit.

War dieser Artikel hilfreich?

Sandra Pretzer

Jetzt Kontakt zum Redakteur aufnehmen!

Sie haben noch mehr Fragen zum Thema und möchten mit jemanden persönlich darüber sprechen? Dann kontaktieren Sie uns einfach! Wir stehen Ihnen unter presse@trusted.de für Ihre Recherchen zur Verfügung. Mehr Infos finden Sie in unserem Pressebereich.

Wir freuen uns von Ihnen zu hören!