Wireframe-Tools – 32 Anbieter im Vergleich

Die wichtigsten Wireframe-Tools im Vergleich

Mit Hilfe unterschiedlicher Filter, User-Bewertungen und der Meinung der OMT-Club-Mitglieder versuchen wir Dir die Entscheidung für das richtige Wireframe-Tool zu vereinfachen.

Ergebnisse filtern

Preis

Alle

Kostenlos

Nicht Kostenlos

Kostenlose Testversion

Kostenlose Testphase

Testbericht

mit Testbericht

Sortieren nach:

Balsamiq Mockups

Balsamiq Mockups wird von den gleichnamigen Balsamiq Studios herausgegeben und ist eines der bekannteren Tools im Mockup-Bereich. Es ist sowohl als Desktop-Anwendung zur Installation auf deinem Rechner als auch als webbasierte Anwendung aus der Cloud verfügbar. Du kannst mit dem Mockup-Tool also online und offline arbeiten. Balsamiq Mockups ist ein großartiges Tool für Non-Techies. Gerade Einsteiger in der Welt des User-Experience-Designs werden Freude an dem Tool haben, denn es erleichtert die ersten Schritte in der Welt von Mockups, Wireframes & Co enorm. Denn die Bedienung ist denkbar einfach und intuitiv und du kannst schnell vorzeigbare Ergebnisse liefern. Um zu testen, ob das Tool deine Bedürfnisse erfüllt, kannst du Balsamiq Mockups 30 Tage lang kostenlos testen. Erst dann musst du dich für eine kostenpflichtige Bezahlvariante entscheiden. Ebenso gibt es eine Demoversion, die du ohne Anmeldung nutzen kannst. Die Demoversion ist direkt auf der Balsamiq-Webseite zu finden, setzt sich aber nach wenigen Minuten immer wieder zurück. Mehr als ein schneller Überblick ist also damit nicht möglich.

Balsamiq unterstützt dich mit zahlreichen vorgefertigten Elementen, die du zur Erstellung deiner Mockups verwenden kannst. Die Elemente lassen sich einfach via Drag & Drop anordnen, verschieben und entfernen. Das Tool enthält auch praktische Schaltflächen und Listen, die die Arbeit erleichtern. Sie können auf der Zeichenfläche entsprechend angepasst werden. Die Mockups bei Balsamiq sind absichtlich relativ grob mit geringer Wiedergabetreue gehalten. Davon versprechen sich die Entwickler, dass die Nutzer viel Feedback bekommen und leichter Diskussionen entstehen.

Balsamiq läuft auf Windows, MacOS und in einer webbasierten Version. Die Zusammenarbeit mit Apps von Drittanbietern ist mit Balsamiq einfach möglich. Wie erwähnt ist es durch die Desktop-Versionen auch möglich, offline zu arbeiten. Balsamiq ermöglicht auch einen einfachen Zugang zu Online-User-Tests. Die kostenpflichtige Version startet bei 5 Dollar pro User in der Google-Drive-Version. Die Cloud-Version startet mit 9 Dollar pro User.

...mehr Infos zum Wireframe-Tool Balsamiq Mockups

Adobe XD

Die Adobe-Produktreihe mit Adobe-Reader und vielen weiteren Programmen, ist weltweit bekannt. Mit Adobe XD CC gehört ein Wireframe Tool zur Adobe-Reihe, dass für einfache und komplexe Prototypen genutzt werden kann. Wer bereits als Benutzer registriert ist, der kann das Tool problemlos aus der Creative Cloud downloaden. Adobe XD CC ist mit intuitiven Tools ausgestattet. Interessierte Nutzer können Routineaufgaben schnell und problemlos erledigen. Dazu zählt beispielsweise ein zeitsparendes Wiederholungsraster und eine Zeichenfläche, die flexibel gestaltet werden kann. Wird das Design geändert, so erfolgt auch eine automatische Änderung im Prototyp. Die Arbeiten in Adobe XD können problemlos für andere Nutzer oder Teams bereitgestellt werden. Wer Android- oder iOS-Geräte nutzt, der kann den Prototyp jederzeit überprüfen und das in Echtzeit. Wer keine Volllizenz für CC möchte, der kann Adobe XD auch in einem Monatsabonnement nutzen. Das Abo in der Creative-Cloud ist für 11,89 Euro monatlich erhältlich.

...mehr Infos zum Wireframe-Tool Adobe XD

Sketch

Bei Sketch handelt es sich um ein Wireframe Tool, das für Mac verfügbar ist. Es ermöglicht Wireframes an Anwendungen von Drittanbietern weiterzugeben.
An Sketch kommt keiner so recht vorbei. Das leistungsstarke Werkzeug überzeugt mit einer benutzerfreundlichen Oberfläche. Bestens eignet sich das Tool für Wireframes, die mit wenigen Klicks erstellt und bearbeitet werden können. Die Designs, die im Programm erstellt werden, können zu einem späteren Zeitpunkt erneut eingesetzt werden, was ein großer Pluspunkt ist, der viel Arbeit erspart. Aber das ist nicht der einzige Vorteil des Programms. Denn Sketch lässt sich ebenfalls mit anderen Programmen wie Marvel oder Framer kombinieren. Ein Minus stellt die Desktop Verwendung dar. Denn diese ist nicht ganz einfach. Häufig kann die Arbeit nur mit zusätzlichen Erweiterungen vereinfacht werden.

...mehr Infos zum Wireframe-Tool Sketch

Marvel

Marvel ist ein Wireframing Tool, das mit Android- und iOS-Geräten genutzt werden kann. Das Tool ist auch als Web-App erhältlich. Die Anmeldung erfolgt bei dem Wireframe Tool über einen Dropbox-Account. Die Anmeldung über den Account ist vorteilhaft, da der Nutzer Prototypen über die Dropbox synchronisieren kann. Das Single-Modell ist als kostenfreie Version erhältlich. Es gibt auch eine Proversion, die als Abo-Modell gebucht werden kann. Die Proversion kostet als Single-Modell ca. 8 Euro bis 10 Euro pro Monat. Ein Abonnement kann auch als Team-Modell und Firmen-Modell gebucht werden. Die Proversion ist auf die Arbeit im Team ausgelegt und enthält kein Marvel-Branding im Prototyp.

Das Marvel-Tool ist als Web-App erhältlich, die schnell und unkompliziert lineare Prototypen abbildet. Die App eignet sich hervorragend, um die ersten Prototypen mit dem Team abzustimmen. Komplexe Darstellungen und Prototyp-Konzepte sind mit der mobilen App nicht abbildbar. Die Web-App von Marvel besitzt mehr Funktionen als die mobile App und enthält ein globales Management für Teammitglieder und Teams. Die Web-App enthält eine große Auswahl an Formaten zur Erstellung eines Prototyps. Die Prototypen können für Tablet-PCs, Desktop-Computer und Mobiltelefone erstellt werden. Sogar die Erzeugung von Prototypen für Apple-Watches ist möglich.

...mehr Infos zum Wireframe-Tool Marvel

Wireframe.cc

Wireframe.cc ist in einer freien Version erhältlich, die zu Erstellung von einfachen Mockups genutzt werden kann. Das Wireframing Tool erlaubt das Teilen des Arbeitslinks und besitzt eine Kommentarfunktion. In der Premiumversion können PNG- und PDF-Dateien Exportiert werden. Auch Protokollverläufe können erstellt und Interaktionen gestaltet werden. Die Features sind in der Premiumversion von Wireframe.cc wesentlich umfangreicher. Eine Team-Kollaboration ist in der Premiumversion möglich. Wer die Freeware nicht nutzen möchte, beispielsweise weil mehrere Nutzer vorhanden sind, der kann die Premiumversion für sieben Tage testen. Anschließend kann der Nutzer zwischen einem Abo-Modell für einen Nutzer und Varianten für mehrere Nutzer wählen. Anstelle des Abo-Modells kann auch eine Einzelnutzer-Variante für 144 US-Dollar erworben werden. Im Abo kostet Wireframe.cc für Single-User ca. 16 US-Dollar pro Monat.

...mehr Infos zum Wireframe-Tool Wireframe.cc

Canva

von Canva

4,8/5 (3)

Atemberaubende Designs

Fotoausrichtfunktion

Tolle Bilderrahmen

Wer selbst Social Media Kanäle betreibt, kennt das Problem, hochwertige Grafiken für seine Profile erstellen zu müssen. Ob Facebook Cover, Youtube Kanalbild oder Insta-Story. Wie war noch mal das passende Format? Und wie bekommt man die coole Schrift ins Bild? Mit dem australischen Dienst Canva sparst Du Dir diese Sorgen. Denn Canva bietet für alle Gelegenheiten vorformatierte Grafiken an. Du kannst bei diesem Cloud-Service aus einer Vielzahl von kostenlosen oder niedrigpreisigen Bildern, Grafiken, Fonts und Designs auswählen, oder eigene Bilder hochladen und diese verschönern. Mit Canva ersetzt Du den Grafiker, der für das frische Design Deines neuen Blogpostings gleich wieder viel zu viel Honorar abrechnen möchte. Mit Canva kannst Du Dir also kostengünstig eine ganze Corporate Identity zusammenstellen. Nicht nur für Deine Social Media Kanäle, sondern auch für den gesamten Auftritt Deines Geschäftes. Inklusive Logo, Flyer oder Plakat und Broschüre. Deinen Gestaltungsmöglichkeiten sind mit Canva (fast) keine Grenzen gesetzt.

...mehr Infos zum Wireframe-Tool Canva

Pencil Project

Wer ein absolut kostenfreies Open Source Programm sucht, das zur Wireframe Erstellung geeignet ist, für den ist Pencil Project interessant. Das Tool können auch Anfänger problemlos nutzen. Pencil Project bietet eine breit gefächerte UI Bibliothek mit vielen Elementen und Templates. Das Tool legt den Fokus auf Low-Fidelity Wireframes. Die Wireframes sind durch Verlinkung interaktiv gestaltbar. Für die Erstellung von komplexen Prototypen und Mockups ist das Tool nicht empfehlenswert. Design-Anfänger profitieren von dem übersichtlichen Designprozess und können erste Schritte erlernen. Das Programm ist nur als Desktop-Version für Windowssystem und Mac erhältlich. Durch die fehlende Web-Version ist nur ein eingeschränkter Zugriff auf die erstellten Wireframes möglich. Die Kollaborationsmöglichkeiten sind ebenfalls reduziert. Pencil Project ist für Teamarbeit ungeeignet. Auch Arbeiten, die Feedback bedürfen, sollten mit einem anderen Wireframing Tool durchgeführt werden.

...mehr Infos zum Wireframe-Tool Pencil Project

Coggle

von Coggle

Das in deutscher Sprache erhältliche Tool kann für den privaten Zweck genutzt werden, ist aber auch bis zur Teamnutzung ausbaubar. Projekte und Ideen werden als Diagramm mit Bildern und Text aufgebaut. Jederzeit können neue Knotenpunkte und Verzweigungen hinzugefügt werden. Verwandte Themen können eingebunden und dargestellt werden. In der kostenfreien Version sind drei private (geschützte) Diagramme möglich und unlimitiert öffentliche Diagramme. Wer sein Team am Ideenaufbau mitarbeiten lassen möchte, hat dazu in der bezahlten Version ausführliche Möglichkeiten. Coggle ist ein Online-Tool und Ideen und Projekte werden im Browser bearbeitet und sofort sichtbar mit allen Änderungen. Genutzt werden kann das Tool im Privatbereich, aber auch für weitverstreute Teams, die Wert auf schnelle Sichtbarkeit von Änderungen legen.

...mehr Infos zum Wireframe-Tool Coggle

MindNote

von IdeasOnCanvas

Wer Ideen aufschreiben, ausbauen, weiterentwickeln und seine Gedanken in einen Zusammenhang zur Idee bringen möchte, kann dies wunderbar mit dem englischsprachigen Tool MindNode. Um zu starten kann die kostenfreie Version genutzt werden. Wer aber seine Ideen und Konzepte vollumfänglich ausarbeiten möchte, kann auf die kostenpflichtige Pro-Version umsteigen. Das Besondere an diesem Tool, welches nur für Mac und in englischer Sprache erhältlich ist, ist die Illustration durch Bilder und die ausführliche textliche Beschreibung der Notizen und Gedanken. Die einzelnen Einträge im Mindmapping-Tool lassen sich einfach zu Aufgaben umwandeln und die Idee nach und nach verwirklichen und ergänzen. Die verschiedenen Möglichkeiten der Darstellung helfen den Überblick zu halten, oder die noch offenen Aufgaben sichtbar zu machen. Ideal für alle Apple-Nutzer, die komplexe Ideen ausarbeiten möchten.

...mehr Infos zum Wireframe-Tool MindNote

Microsoft PowerPoint

von Microsoft

Die Software ist Bestandteil des Officepaketes von Microsoft und kann für Präsentationen, aber auch für das Mindmapping genutzt werden. Dazu sind Vorlagen sowie Buttons und Pfeile in der Software eingebaut. Powerpoint ist hat nicht so viele Möglichkeiten wie Mindmapping Tools, die von Teams bearbeitet werden können und hochkomplexe Darstellungen und Verzweigungen anbieten. Somit wird Powerpoint meist für einfaches Mindmapping innerhalb von Unternehmen, die Microsoft Office nutzen, eingesetzt.

...mehr Infos zum Wireframe-Tool Microsoft PowerPoint

Adobe Photoshop CC

von Adobe

3,4/5 (1)

Schnelle Porträtauswahl

Drehbare Muster

Umfassende Neugestaltung

Wer ein Tool sucht, mit dem schnell Prototypen erstellt werden können, der sollte Adobe Photoshop cc näher betrachten. Mit der Software können Wireframes problemlos erstellt werden. Die Funktionalität der Software hat sich im Laufe der Jahre erhöht, wodurch Adobe Photoshop cc zum idealen Wireframing Tool für Webdesigner wurde.

Mit der Software können Wireframes und Prototypen für Kunden erstellt werden. Auch Designs für Webentwickler können mit dem Programm erstellt und geteilt werden. Photoshop CC besitzt vielseitige Funktionen, wie beispielsweise ein Cloud-Setup für Teamarbeit und verschiedene Gestaltungstools. Des Weiteren können verschiedene Ebenen mit dem Programm isoliert werden. Einziges Manko, im Vergleich zu anderen Wireframe Tools, ist der hohe Preis von Adobe-Programmen.

...mehr Infos zum Wireframe-Tool Adobe Photoshop CC

Adobe InDesign CC

InDesign von Adobe ist eine Veröffentlichungs-App, die eigentlich für Magazin- und Book-Veröffentlichungen gedacht ist. Das Programm kann aber auch als Wireframing Tool genutzt werden. Die Wireframes sind nicht komplex und es handelt sich um Medium- oder Low-Fidelity Wireframes. Aber für einfache Aufgaben kann das Programm eingesetzt werden. Es besteht auch die Möglichkeit, mit dem Programm interaktive Prototypen zu gestalten. InDesign besitzt wesentlich mehr Funktionen als “nur” das Drucken von Magazinen und Büchern. Interessierte Nutzer können beispielsweise interaktive Medien für eReader und iPad produzieren. Die Werkzeuge im Programm erlauben zudem die Einbindung von Animationen. Im Internet sind passende Tutorials zu finden, die erläutern, wie Adobe InDesign CC zur Erstellung von Wireframes genutzt werden kann.

...mehr Infos zum Wireframe-Tool Adobe InDesign CC

Axure RP

Axure zählt zweifelsohne zu den professionelleren Tools in dieser Übersicht. Da Tool hat einen enormen Funktionsumfang und eignet sich sowohl für das Erstellen von Wireframes als auch für Mockups. Es ist bereits seit über zehn Jahren am Markt und wird ständig weiterentwickelt und mit neuen Features ausgestattet. Wenn du das erste Mal mit Axure arbeitest, benötigst du wahrscheinlich etwas Zeit, um dich mit der Bedienung und den umfangreichen Funktionalitäten auseinanderzusetzen.

Der Funktionsumfang mag dich auf den ersten Blick erschlagen. Aber nach kurzer Einarbeitungszeit und mit einigen Blicken in die Tutorials und Demos wird dir vieles schnell klarer werden. Weil das Tool so mächtig ist, sind allerhand Möglichkeiten für deine Arbeit vorhanden. Axure bietet eine Menge an Vorlagen und vorgefertigten Elementen zur Auswahl an. All diese Elemente kannst du frei konfigurieren und beliebig anpassen. Durch die Möglichkeit, Lightboxen oder eine Flyout-Navigation einzubauen, lassen sich mit Axure realistische und hochwertige Klickdummies erstellen. Auch komplexe Prototypen mit vielen Funktionalitäten lassen sich mit Axure einfach bauen, ohne eine einzige Zeile Code zu schreiben. Mit Axure kannst du in hoher Auflösung arbeiten und sehr realistische Prototypen erstellen, die auf verschiedenen Endgeräten getestet werden können. Axure bietet dir außerdem die Möglichkeit deine Arbeit mit Kommentaren, Erklärungen und Fußnoten zu ergänzen. Da man diese später auch exportieren kann, lässt sich mit Axure nicht nur ein Mockup, sondern auch der erste Entwurf für ein Konzeptpapier erstellen.

Ein großer Vorteil – gerade bei größeren Projekten – ist, dass mehrere Nutzer zeitgleich an einem Mockup arbeiten können. Alle Änderungen werden gespeichert und sind sofort für die anderen Teammitglieder sichtbar. Du kannst Axure am Anfang 30 Tage lang kostenlos testen. Anschließend stehen dir die Pro-Version, die Team-Version und die Enterprise-Version zur Verfügung. Die Pro-Version kostet 29 Dollar pro User pro Monat, die Team-Version kostet 49 Dollar pro User pro Monat. Die Preise für die Enterprise-Version werden gesondert vereinbart. Für den klammen Studentengeldbeutel bietet Axure eine komplett kostenlose Version an. Axure funktioniert sowohl auf Windows als auch auf MacOS.

...mehr Infos zum Wireframe-Tool Axure RP

Affinity Designer

Der Affinity Designer ist eine elegante sowie leistungsstarke App, die für kreative Köpfe gedacht ist und den Workflow optimieren kann. Das Wireframe Tool kann auf Mac-Systemen und Windows-Computern genutzt werden. Der interessierte Nutzer kann das Tool auch auf dem iPad einsetzen. Auf allen kompatiblen Systemen sind Funktionen und Dateiformat identisch. Das bedeutet, dass verschiedene Nutzer, auch bei unterschiedlichen Betriebssystemen, an einer Datei arbeiten können. Der Affinity Designer ist das ideale Wireframe Tool für Teamprojekte. Gleichzeitig gilt das Tool eine preiswerte Alternative zu anderen Projekt-Darstellungsprogrammen, wie beispielsweise Illustrator. Der Affinity Designer ist für Adobe-Nutzer ideal aufgebaut. So können notwendige Tools über eine Werkzeugleiste ausgewählt werden. Web- und Appdesigner können Pinsel, Stifte und einen Texteditor nutzen. Gleichzeitig stehen verschiedene Bearbeitungsoptionen zur Verfügung, mit denen schnell die gewünschten Grafiken erstellt werden können. Der Preis von Affinity Designer ist moderat und gegenüber Adobe-Lösungen preiswert. Für die Nutzung von Adobe-Software für Designer wird in der Regel ein monatliches Abonnement abgeschlossen. Affinity Designer ist hingegen schon für einen Preis von 54,99 Euro erhältlich. Zudem gibt es eine Testversion, die das Ausprobieren der Software ganz unverbindlich ermöglicht.

...mehr Infos zum Wireframe-Tool Affinity Designer

Framer

Framer ist ein quelloffenes Wireframing Tool. Das Tool wird gerne von Designern genutzt und ist in der Lage, Photoshop-Dateien bzw. -Ordnergruppen als “Views” darzustellen und diese in HTML-Dokumenten als Grafiken zur Verfügung zu stellen. Die Darstellung der Ordnergruppen von Photoshop-Dateien und die anschließende Verfügbarkeit als Grafiken in einem HTML-Dokument erfolgt bei Framer vollautomatisch. Der quelloffene Code gewährleistet Flexibilität und das Tool ist als visueller Editor einfach zu bedienen. Die angelegten Elemente werden automatisch in den korrekten Code übertragen. Für Framer existieren viele Tutorials im Internet, die den Einstieg in das System und in die Bedienung erleichtern sollen. Vor dem Kauf von Framer sollten die Tutorials beachtet werden. Das Tool kostet ca. 15 US-Dollar pro Monat und gilt als nicht preiswert. Wer den Preis nicht zahlen möchte, bevor er weiß, wie das Tool genau funktioniert, der sollte sich nach Funktionen und Support für Framer erkundigen.

...mehr Infos zum Wireframe-Tool Framer

Proto.io

Das webbasierte Tool Proto.io kann schnell eingerichtet werden und benötigt weder IT-Support noch eine aufwendige Einführung in die Bedienung. Ein Nachteil des Wireframe Tools liegt allerdings in der Online-Nutzung. Das Tool kann nicht offline genutzt werden. Proto.io ist extrem auf mobile Prototypen ausgelegt, kann aber andere Prototypen unterstützen. Der Vorteil des Tools liegt in der Vielzahl an bereitgestellten Elementen, die in vielen Bibliotheken zu finden sind. Das Tool ist für Windows Phone, Android sowie iOS ausgelegt. Proto.io ist für Nutzer geeignet, die aus Sketch oder Photoshop bereits gefertigte Skizzen importieren möchten. Das Tool ermöglicht einen direkten Import aus diesen Programmen. Beim Import der Skizzen werden alle Ebenen erhalten. Webdesigner und Appdesigner können ein bereits erstelltes Design mit Proto.io in kürzester Zeit funktionell gestalten. Proto.io ist als Testversion erhältlich und kann von interessierten Nutzern zunächst ausprobiert werden. Die Testphase dauert 15 Tage. Der Preis des Tools liegt bei 24 US-Dollar monatlich und ist in Form eines Abonnements nutzbar. Der Preis gilt für einen Freelancer und steigt mit der Nutzeranzahl sowie mit der Zahl aktiver Projekte.

...mehr Infos zum Wireframe-Tool Proto.io

ProtoPie

ProtoPie ist für Windows und Mac Nutzer gedacht, die hochwertige Prototypen erstellen möchten. Das Wireframe Tool kann Prototypen für mobile Anwendungen erzeugen und besitzt ein simpel zu bedienendes Interface. Das Interface ist mit beliebten Design-Tools ausgestattet. ProtoPie ist für die drei Grundeigenschaften Objekt, Antwort, Auslöser gedacht. Mittels ProtoPie sollen sogenannte High-Fidelity-Prototypen erstellt werden. Es ist nicht nötig, Programmierkenntnisse für die Nutzung von ProtoPie zu besitzen. ProtoPie ist ein Wireframing Tool, das in Smart-Devices Sensoren unterstützt. Zu den unterstützten Sensoren gehören Sound, 3D-Touch, Tilt, Proximity und Compass. ProtoPie ist als Testversion erhältlich, was jedem interessierten Webdesigner und Appdesigner die Möglichkeit gibt, das Tool 10 Tage auszuprobieren. Nach der Testzeit kann das Tool für 99 US-Dollar erworben werden. Wer die Vollversion erwirbt, der erhält ein Jahr lang kostenlose Updates. Auch Studenten können von ProtoPie profitieren und erhalten bei einem Nachweis, dass sie Studenten sind, sogar 50 % Rabatt. ProtoPie ist ein Wireframing Tool, dass für Studenten, Anfänger und Fortgeschrittene gut geeignet ist.

...mehr Infos zum Wireframe-Tool ProtoPie

UXPin

Dieses Tool ist sowohl für Mac, als auch für Windows erhältlich. Des Weiteren lässt sich das Tool im Web verwenden. Auch bei UXPin handelt es sich um eine sogenannte Wirefame Anwendung. Die es möglichst die Dokumentation von Designs wiederzugeben. Die Wireframe Oberfläche gestaltet sich innovativ und übersichtlich. Die Macher verzichten auf irreführende Registerkarten und setzen auf eine simple Oberfläche, die gut zu verstehen ist. Dateien aus Sketch und Photoshop lassen sich mit dem Tool öffnen und gebrauchen. Dabei ist es dem Programm möglich die notwendigen Daten auszulesen. Ein großer Pluspunkt des Programms liegt in der Live Präsentation. Diese Eigenschaft, ebenso wie die Dokumentation, vereinfacht die Arbeit stark. So können Fehler schnell erkannt und ausgebessert werden. Die Anwendung verfügt ebenfalls über einen Vorschaumodus.

...mehr Infos zum Wireframe-Tool UXPin

Miro

von Miro

4,7/5 (2)

Diagrammen erstellen

Dokumenten-Management

Echtzeit Bearbeitung

Miro ist ein “unendliches” Online-Whiteboard. Teams können damit in Echtzeit und asynchron arbeiten. Besprechungen und Brainstormings funktionieren, als wenn alle im selben Raum wären – und doch sitzen alle im Home Office. Mit dem Board können agile Arbeitsabläufe dargestellt und Strategien visualisiert werden. Die Oberfläche ist dabei intuitiv und leicht zu bedienen. Verschiedene Vorlagen und Integrationen runden das Bild ab: Es gibt ein Mindmap-Tool, überdies können verschiedene Projekt Management Tools wie Asana mit dem Board verknüpft werden.

Auf notwendige Unterlagen und Dokumente kann direkt vom Whiteboard aus zugegriffen werden, so können zum Beispiel Google Docs Dokumente in Miro bearbeitet werden. Sogar Wireframes können erstellt werden. Es scheint, als gebe es für jeden kollaborativen Anwendungsfall eine Lösung. Sogar externe Personen können zur Zusammenarbeit eingeladen werden. Damit lassen sich (online) Workshops mit Kunden oder Seminare interaktiv gestalten.

...mehr Infos zum Wireframe-Tool Miro

Adobe Illustrator

Der Adobe Illustrator ist nicht nur zum Darstellen von Bildern und Grafiken nutzbar. Auch als Wireframing Tool kann das Adobe-Programm eingesetzt werden. Das Programm ermöglicht beispielsweise eine Wireframe-Vorschau. Der Illustrator kann zwischen dem gängigen Vorschau-Modus und dem Modus für die Wireframe-Vorschau wechseln. Der interessierte Nutzer ist mit dem Programm in der Lage, nur eine bestimmte Ebene zu zeigen. Im Internet finden sich mehrere Tutorials, wie der Adobe Illustrator als Wireframe Tool eingesetzt werden kann.

...mehr Infos zum Wireframe-Tool Adobe Illustrator

Privat: MindNote

...mehr Infos zum Wireframe-Tool Privat: MindNote

InVision Freehand

InVision Freehand kann zum Designen von Präsentationen, zum Planen von Präsentationen und zum Wireframing eingesetzt werden. Das Programm Freehand ist ein sogenanntes Whiteboard-Tool, das in Besprechungen eingesetzt wird und zur Skizzierung von beispielsweise Wireframes mit Teamteilnehmern genutzt wird. Freehand kann in Besprechungen genutzt werden und ist mit entsprechenden Steuerelementen ausgestattet. Wenn Freehand registriert und angemeldet ist, dann kann es problemlos zur Skizzierung genutzt werden. In Besprechungen werden Registerkarten im Programm angelegt, auf die die Teamteilnehmer zurückgreifen können.

...mehr Infos zum Wireframe-Tool InVision Freehand

Figma

Figma ist ein Wireframing Tool, das Prototypen zum Leben erwachen lassen kann. Der Webdesigner kann Interaktionen definieren und der Nutzer erhält ein einzigartiges Webseitenerlebnis. So lassen sich beispielsweise Interaktionen für Bewegung, Drücken und Klicken definieren. Figma ist für die Teamarbeit sehr gut geeignet, kostet aber bereits in der Einzelnutzer-Lizenz 89 US-Dollar. Die Besucher bestimmen den Preis der Volume-Lizenz. Figma ist von Designern konstruiert und für Designer programmiert. Das Wireframing Tool ist dem vielfach genutzten Programm im Aufbau ähnlich. Die Basisfunktionen sind wie bei Sketch angeordnet und die notwendigen Mode-Tabs sitzen, wie bei Keynote, auf der linken Seite. Ein Webdesigner, der mit Sketch arbeitet, muss sich nicht großartig mit dem Kennenlernen neuer Tools beschäftigen. Auch die Figmashortcuts sind Sketch ähnlich und ermöglichen dem Nutzer eine Wireframe-Erstellung in kurzer Zeit.

...mehr Infos zum Wireframe-Tool Figma

ProtoShare

ProtoShare ist ein Web-Tool, mit dem sowohl Wireframes als auch Prototypen erstellt werden können. Interessierte Web- und Appdesigner finden eine umfangreiche User-Interface-Bibliothek vor, die vielseitige Stencils, Elemente und Widgets enthält. Die Bedienung von ProtoShare ist intuitiv möglich und durch Drag & Drop einfach zu realisieren. ProtoShare ist ein Wireframing Tool, das auf Kollaboration setzt und für die Teamarbeit ideal ist. Die Teamarbeit kann zeit- und ortsunabhängig erfolgen und wird, in ProtoShare, ausschließlich online durchgeführt. Das webbasierte Tool ist mit Sharing-, Kommentar- und Versionierungs-Funktionen ausgestattet. Die vielseitigen Features des Programms ermöglichen eine zentrale Verwaltung des Feedbacks. Das Programm ist für Profis und Anfänger gleichermaßen interessant. Jeder Abschnitt des Arbeitsprozesses kann mit dem Tool professionell gestaltet werden. ProtoShare ist in unterschiedlichen Versionen erhältlich, die im Preis von ca. 24 US-Dollar bis zu 49 US-Dollar pro Monat variieren. Das Tool kann aktive Projekte in unbegrenztem Volumen erfassen, was es sowohl für Teams als auch für Einzelnutzer interessant macht.

...mehr Infos zum Wireframe-Tool ProtoShare

Penultimate

Wer ein Tool sucht, das wie ein digitaler Skizzenblock funktioniert, für den ist Penultimate interessant. Dieser Skizzenblock-Stil ermöglicht dem Designer eine schnelle Wireframe-Skizzierung. Das Programm ist für Designer geeignet, die eine mobile Design-Möglichkeit suchen, die zuverlässig funktioniert und ein Brainstorming mit Entwicklern und anderen Designern ermöglicht. Penultimate ist für iPad-Nutzer gedacht und gehört zu Evernote. Das Tool kann im App-Store kostenlos heruntergeladen werden.

...mehr Infos zum Wireframe-Tool Penultimate

Gliffy

Mit Gliffy können Mindmaps, Flowcharts und Diagramme erstellt werden. Das Tool aus San Francisco kann aber auch zur Erstellung von Wireframes genutzt werden. Einfache Kreationen im Mockup-Bereich sind mit dem Tool möglich. Durch Drag & Drop kann der Nutzer stylishe Designs kreieren und benötigt dafür nur wenige Klicks. Gliffy besitzt verschiedene Plugins, wie JIRA, Confluence und Google Drive. Gliffy ist in einer kostenlosen Variante erhältlich. Es sind auch kostenpflichtige Varianten auf dem Markt zu finden, die vielseitige Funktionen besitzen. Die Preise liegen zwischen 4 US-Dollar und 8 US-Dollar, die monatlich zu entrichten sind und für einen Nutzer gelten. Das Tool Gliffy ist web-basiert und erlaubt den Nutzern einen Zugriff unabhängig von Ort und Zeit. Wer komplexe Prototypen und Wireframes erstellen möchte, der sollte ein anderes Programm nutzen. Ein HTML5-Editer ermöglicht es dem Nutzer, auch große Diagramme problemlos zu erstellen.

...mehr Infos zum Wireframe-Tool Gliffy

Cacoo

Cacoo ist ein Wireframe Tool, das eine breit gefächerte Auswahl an Vorlagen und Designs bietet. Wireframe-Vorlagen sind sowohl für iOS als auch für Android und Desktop-Webseiten erhältlich. Cacoo kann beispielsweise zur Erstellung von Nutzeroberflächenmodellen und Drahtgittermodellen verwendet werden. Das Wireframing Tool ist für Brainstorming mit Teams weltweit gedacht. Es besitzt zahlreiche Funktionen und ist mit simplen Freigabeoptionen ausgestattet. Zu den Freigabeoptionen gehören beispielsweise Exportieren, Einbetten und Verknüpfen. Funktionen wie App-Integrationen mit Confluence, Google Drive und mehr gehören ebenfalls zum Funktionsumfang des Tools. Für Webdesigner und Appdesigner interessante Funktionen wie Bildschirmaufnahme, Feedback-Management, Kollaboration, Drag & Drop sowie Desktop-Interface sind ebenfalls im Tool vorhanden. Cacoo ist in einer 14-Tage-Testversion erhältlich und bietet in der Testversion auch die Möglichkeit, Brainstorming mit dem Team zu betreiben. Cacoo wird mit einem Startpreis von 5 US-Dollar pro Monat angeboten. Ein rund um die Uhr erreichbarer Online-Support (Live Vertreter) sowie weitere Supportleistungen machen das Tool für Web- und Appdesigner interessant.

...mehr Infos zum Wireframe-Tool Cacoo

OmniGraffle

OmniGraffle kann zum Erstellen von Orga-Charts und Grundrissen genutzt werden. Es ist als Design Tool klassifiziert, dass vielseitige Funktionen besitzt und auch zur Wireframe-Erstellung geeignet ist. Mit dem Wireframe Tool können statische Wireframes erzeugt werden. Das Programm steht zum Download für Mac-Systeme und als iOS-App bereit. Selbst die App für iOS-Geräte wird mit vollem Funktionsumfang angeboten und ist auf mobile Systeme ausgelegt. Die App für mobile iOS-Geräte wird separat von der Mac-Variante angeboten. Interessierte Webdesigner können aus einer großen Auswahl an Widgets und Vorlagen wählen. Wer sich für OmniGraffle interessiert, der sollte beachten, dass Prototypen-Erstellung und interaktives Wireframing mit dem Programm nicht möglich ist. Des Weiteren sind keine Kollaborations-Möglichkeiten oder andere Funktionen für Feedback und Zusammenarbeit vorhanden. OmniGraffle bietet allerdings viele Möglichkeiten zum Export. OmniGraffle ist ein Design-Programm, dass für Profis und Fortgeschrittene gedacht ist. OmniGraffle ist als iOS-App-Version für 49,99 US-Dollar pro Lizenz erhältlich. Die Desktop-Version kostet 99,99 US-Dollar pro Lizenz.

...mehr Infos zum Wireframe-Tool OmniGraffle

Mockplus

Mockplus ist ein Wireframe Tool mit dem auch Prototypen für verschiedenste Plattformen erstellt werden können. Der interessierte Web- und Appdesigner kann Wireframes und Prototypen für Desktop-Apps, mobile Apps und Webseiten erstellen. Der Vorteil von Mockplus liegt in der simplen Bedienung. Die Nutzung von Mockplus setzt keine großartigen technischen Kenntnisse voraus. Das Tool kann in verschiedenen Versionen erworben werden. Die Basis-Version besitzt nicht alle Funktionen, kann aber frei genutzt werden. Die Pro-Version kostet 29 US-Dollar pro Monat oder 129 US-Dollar pro Jahr. Eine unbefristete Lizenz von Mockplus ist für 399 US-Dollar pro Benutzer erhältlich. Mockplus ist mit Android-, Windows- und Mac-Betriebssystemen kompatibel. Auch auf andere iOS-Geräten, die beispielsweise mobil genutzt werden können, läuft Mockplus. Das Tool erlaubt eine schnelle Interaktion und bietet viele Designvorlagen. Es können Pop-up Panel, Scroll Box, Image Carousel, SlidingDrawer, Stack Panel und vieles mehr genutzt werden. Per einfacher Drag & Drop Methode können Wireframe-Elemente hinzugefügt werden. Auch die Nutzung von Auto-Recovery ist möglich.

Wireframes und Prototypen können schnell designt und erstellt werden. Über 200 Komponenten und 3.000 Icons sind vor designt. Die vor designten Elemente können per Drag & Drop einfach in das Webdesign integriert werden. Innerhalb weniger Minuten kann ein Prototyp erstellt werden und die App- und Webideen eines Designers nehmen Formen an. Mockplus ermöglicht ein schnelles Testen der erstellen Prototypen. Es wird ein QR-Code erzeugt, der gescannt werden kann und einen Test auf realen Geräten ermöglicht. Mockplus ermöglicht auch einen Prototyp-Export in eine Cloud. Das Tool bietet 8 Wege, um Wireframes und Prototypen zu testen und zu teilen. Egal, ob im Browser, auf Desktop-Plattformen oder mobil, das vielseitige Programm ermöglicht auch vielseitige Tests. Das Tool besitzt beispielsweise Funktionen wie MindMap Design-Modus, Auto Data Fill, Format Painter (visualized), Repeater und UI Flow. Zudem Unterstützt das Tool auch den Export von MP-Dateien direkt von Sketch. Das Tool ist auch für Anfänger ohne Programmierkenntnisse geeignet. Es müssen auch keine Kenntnisse in Visual Design vorliegen. Mockplus ermöglicht eine einfache, zielgerichtete Nutzung und hat auch für Fortgeschrittene und Profis einiges zu bieten. Mockplus kann als Web-App oder mobile App genutzt werden.

...mehr Infos zum Wireframe-Tool Mockplus

Lucidchart

Wer interaktive und zur Demonstration bereite Wireframes und Mockups erzeugen möchte, für den ist Lucidchart interessant. Das Wireframe Tool ermöglicht das Designen, Teilen und Testen von interaktiven Wireframes. Die Funktionen des Programms machen es Designern einfach, das passende Wireframe zu finden. Das Tool ist Cloud-basiert und muss nicht heruntergeladen werden. Des Weiteren muss auch kein Update erfolgen, denn die Cloud-basierte Variante ist stets aktuell. Ein weiterer Vorteil der Onlinenutzung des Tools ist, dass es von jeder Plattform und jedem internetfähigen Gerät erreichbar ist. Es kann auch in andere Services, wie beispielsweise Slack und G Suite integriert werden. Per Drag & Drop können vorkonfigurierte Elemente hinzugefügt werden. Der Nutzer hat eine breite Auswahl an Formatierungsoptionen und kann Wireframes problemlos erstellen. Das Programm ist zudem für Team-Kollaboration ausgelegt. Team-Mitglieder können Feedback abgeben oder sogar ein In-Editor-Chat oder Video-Chat wahrnehmen. Neben Wireframe Tools sind auch Mockup Tools im Programm integriert. Der Nutzer kann seine Arbeit direkt von Mockup zu Wireframe transferieren. Es können problemlos spezifische Details addiert werden.

Die Software ist als Testversion online nutzbar. Wer weitere Funktionen benötigt, der kann ein Upgrade wahrnehmen. Die Pro-Version erlaubt beispielsweise Zugang zu mehr Designs, ermöglicht Google-Integrationen und ist zu Visio kompatibel. Der interessierte Nutzer kann eine Vielzahl an verschiedenen Formen und Vorlagen nutzen. Es stehen Widgets, UI Container und mehr zur Verfügung. Lucidchart bietet zudem die Möglichkeit, Werkzeuge und Formen Kundenwünschen anzupassen. Der Nutzer kann Umrisse. Vorlagen, Linien und vieles mehr selbst gestalten und in Wireframes integrieren. Lucidchart ist einfach zu nutzen und kann auch ohne große Vorkenntnisse bedient werden. Die Nutzung ist intuitiv und auch für Anfänger geeignet. Fortgeschrittene und Profis können ebenfalls von dem Wireframe Tool profitieren. Das Programm ermöglicht den Support von Microsoft-Visio-Dokumenten. Es ist keine spezifische Plattform für die Nutzung von Lucidchart notwendig. Das Programm ist ausschließlich zur Onlinenutzung gedacht und kann von Mac-, iOS-, Windows- und Android-Geräten erreicht werden. Es gibt verschiedene Varianten von Lucidchart. Je nach Bedarf, kann die Basic-, Pro- oder Team-Version genutzt werden. Die Basic-Variante kostet 4,95 US-Dollar pro Monat für einen Nutzer. Die Pro-Version liegt bei 8,95 US-Dollar monatlich für einen Nutzer. Wer die Team-Version benötigt der startet mit einem Preis von 20 US-Dollar pro Monat und 7 US-Dollar pro Nutzer.

...mehr Infos zum Wireframe-Tool Lucidchart

Justinmind

Justinmind ist ein Wireframe Tool, mit dem High-Fidelity Wireframes erzeugt werden können. Der interessierte Nutzer kann auch interaktive Prototypen erstellen, die für Webseiten (responsive), Wearables und mobile Apps geeignet sind. Die Nutzung von Justinmind erfolgt intuitiv und das Hinzufügen von Elementen kann per Drag & Drop vorgenommen werden. Dennoch sollten Web- und App-Designer Erfahrung mitbringen. Ohne Vorkenntnisse können nicht alle Funktionen zufriedenstellend genutzt werden. Das Tool besitzt eine ausführliche UI Bibliothek und stellt diverse Stencils und Master Pages zur Verfügung. Justinmind kann heruntergeladen werden und steht als Client für Windows- und Mac-Systeme zur Verfügung. Die Funktionen zur Kollaboration sind umfangreich, können allerdings nur mit Internetzugriff genutzt werden. Es steht eine kostenlose Version von Justinmind zur Verfügung, deren Funktionsumfang eingeschränkt ist. Des Weiteren kann ein Abonnement-Modell für 19 US-Dollar pro Nutzer und Monat gebucht werden. Wer eine einmalige Lizenz für das Programm erwerben möchte, der muss mit einem Preis von 495 US-Dollar rechnen. Der Preis gilt ebenfalls nur für einen Nutzer.

...mehr Infos zum Wireframe-Tool Justinmind

Microsoft Visio

Microsoft Visio wird zur Erstellung von technischen Diagrammen genutzt. Es können auch Wireframes erstellt werden, obwohl das nicht die Stärke des Programms ist. Wer allerdings an die Nutzung von Microsoft-Programmen, wie Excel oder Word, gewohnt ist, dem wird die Nutzeroberfläche bekannt vorkommen. Microsoft Visio bietet vergleichsweise wenige Funktionen zum Erstellen von Wireframes. Das Programm offeriert Add-On-Tools, wie beispielsweise Swiper. Das ermöglicht es Nutzern, einen HTML-Prototypen zu kreieren und zu exportieren. Microsoft Visio ist zum Download gedacht und benötigt die Windows-Plattform. Das Programm kostet in der einfachen Version 5 US-Dollar pro Monat und Nutzer. Für die Nutzung der Pro-Version müssen 15 US-Dollar pro Monat und Nutzer bezahlt werden.

...mehr Infos zum Wireframe-Tool Microsoft Visio

Fluid UI

Fluid UI ist ein Wireframe Tool, das auch zur Erstellung von Prototypen genutzt werden kann. Zur Nutzung des Programms wird Chrome als Internetbrowser empfohlen. Der Internet Explorer gilt als nicht kompatibel mit Fluid UI. Bei Nutzung der Internetbrowser Safari und Firefox kann es zu Problemen mit Fluid UI kommen. Die Hauptfunktionen des Programms sind integrierte Bibliotheken, Export und Live-Video-Präsentationen. Das Tool besitzt Wireframe-Bibliotheken, Material-Design-Bibliotheken und mehr als 2000 Icons und Widgets, die auf Kundenbedürfnisse zugeschnitten werden können. Die Bedienung erfolgt einfach per Drag & Drop. Der Nutzer kann seine Ideen per Live-Video präsentieren und mit Kunden sowie Mitarbeitern kommunizieren. Allerdings ist kein Multiple-Images-Upload möglich. Wireframes können exportiert werden. Weitere Funktionen, die Fluid UI mitbringt, können von der Herstellerseite entnommen werden. Das Programm kann schnell erlernt werden und es sind keine Programmierkenntnisse zur Nutzung des Tools notwendig. Mit Fluid UI können High-Fidelity Wireframes erzeugt werden. Das Programm ist als Desktop-App und Web-App erhältlich. Die Kosten sind von der Version abhängig. Für die Individual-Version müssen 8,25 US-Dollar pro Monat bezahlt werden. Die Pro-Version kostet 19,08 US-Dollar pro Monat und für die Team-Version werden 41,58 US-Dollar pro Monat fällig. Fluid UI ist für Anfänger, Fortgeschrittene und Profis gleichermaßen interessant. Fluid UI hat viele Vorteile, wie vielseitige Team-Funktionen und real-time Wireframing, zu bieten.

...mehr Infos zum Wireframe-Tool Fluid UI

MockFlow

MockFlow ist ein Wireframe Tool, das intuitiv bedient werden kann und auch für Anfänger geeignet ist. Wer alle Features, die MockFlow zu bieten hat, nutzen will, der sollte sich mit dem Programm näher befassen. Das Tool kann zur Erstellung von Wireframes und Mockups für mobile Apps sowie Webseiten genutzt werden. Das Programm bietet umfangreiche Stencils und Elemente in einer großen UI Bibliothek. Des Weiteren kann ein Template Store genutzt werden. Der Store enthält Vorlagen, Layouts (3rd Party) und verschiedene Komponenten. MockFlow ist in verschiedenen, ausschließlich webbasierten Versionen erhältlich. Webbasierte Versionen bieten Nutzern den Vorteil, dass sie ortsunabhängig zugänglich sind und mit einem internetfähigen Gerät erreicht werden können. Auch die Teamarbeit ist durch webbasierte Wireframing Tools problemlos möglich. MockFlow ist in einer Testversion erhältlich, die nicht den vollen Funktionsumfang bietet. Kostenpflichtige Versionen starten ab 14 US-Dollar pro Monat. Die Versionen unterscheiden sich beispielsweise in der Anzahl der Nutzer, die auf das jeweilige Programm Zugriff haben.

...mehr Infos zum Wireframe-Tool MockFlow

HotGloo

HotGloo ist ein Wireframe Tool, das auch Prototypen erstellen kann und zur Entwicklung von Wireframes für mobile Geräte, Web und Wearables geeignet ist. HotGloo wird auch als Wireframe-, UX- und Prototyping-Tool bezeichnet. Das Programm dient zum High-Fidelity Wireframing und besitzt eine umfangreiche UI Bibliothek. Es können Stencils, Widgets und viele interaktive Elemente genutzt werden. Programme, wie HotGloo, die High-Fidelity Wireframing ermöglichen, sind hervorragend für den fortgeschrittenen Designprozess geeignet. Der Nutzer von HotGloo sollte bereits Erfahrung mitbringen. Das Wireframe Tool ermöglicht einen ortsunabhängigen Zugriff und ist webbasiert. Die Teamarbeit wird durch diese Voraussetzungen erleichtert und kann weltweit sowie in Echtzeit erfolgen. Es gilt zu beachten, dass eine Nutzung auf iOS-Geräten schwierig ist, denn das Wireframe Tool basiert auf Flash. HotGloo wird in verschiedenen Versionen angeboten. Die Varianten unterscheiden sich in der Anzahl der aktiven Projekte und Nutzer. Wer HotGloo nutzen möchte, der kann eine 15-tägige Testphase wählen und anschließend monatliche Nutzungskosten bezahlen. Je nach Version ist mit Preisen von 5,10 Euro bis 41,65 Euro monatlich zu rechnen. Eine komplett kostenlose Version wird nicht angeboten.

...mehr Infos zum Wireframe-Tool HotGloo

InVision Studio

InVision Studio ist ein Wireframing Tool, das auf Animationen und Prototyping setzt. Das Programm wurde in der Beta-Phase getestet und wird beispielsweise für Low-Fidelity Wireframing genutzt. Low-Fidelity bedeutet, dass mit wesentlich weniger Details ein Prototyp erstellt wird als beim High-Fidelity Wireframing. Low-Fidelity Wireframing ist für die erste Prototyp-Generierung interessant, denn es benötigt weniger Zeit und die Fehlerquote ist gering. InVision Studio ermöglicht eine Wireframe-Erstellung bis hin zur Prototyp-Gestaltung, die auf Endgeräten getestet werden kann. InVision Studio ist einfach gestaltet und intuitiv bedienbar. Wer ein Wireframe Tool sucht, das Stärken im Bereich Kollaboration besitzt, dann ist eher das Tool Figma ratsam. InVision Studio soll im Starter-Bereich 15 US-Dollar pro Monat kosten. Das Team-Modell wird mit 99 US-Dollar pro Monat beziffert. Die Preise sind gestaffelt und es gibt weitere Abo-Modelle zur Auswahl, aus denen sich der interessierte Nutzer das passende Modell heraussuchen kann.

...mehr Infos zum Wireframe-Tool InVision Studio

...alle Wireframe-Tools anzeigen

Was ist ein Wireframe-Tool?

Wireframe Tools werden genutzt, um Prototypen darzustellen oder die grobe Skizzierung eines neuen Projektes vorzunehmen. Während früher erste Projektvorstellungen auf Papier gebracht und groß skizziert wurden, können heute moderne Apps genutzt werden. Wireframe Tools werden auch als Prototyping Tools bezeichnet und sind sowohl als Freeware als auch als kostenpflichtige Varianten erhältlich.

In unserer OMT-Club Gruppe auf Facebook haben wir Euch nach den Wireframe-Tools gefragt, die ihr am liebsten benutzt. Das Ergebnis haben wir für Euch in einer Vergleich-Tabelle festgehalten.

Für wen sind Wireframe Tools geeignet?

Ein Wireframe Tool ermöglicht es dem Nutzer, ein Projekt (App, Webseite) von der Skizze bis zu einem Prototypen, der bereits interaktiv gestaltet werden kann, zu produzieren. Die Tools sind für Webdesigner und UX-Designer gedacht und sind von vielen Anbietern im Internet erhältlich. UX ist die Abkürzung von User Experience und bezieht sich auf das Design von Apps und Webseiten. Ein UX-Designer gestaltet beispielsweise den logischen Seitenaufbau und sorgt für eine gute Nutzererfahrung. Webdesign und Appdesign sollten professionell angegangen werden und ein Wireframe Tool hilft dabei. Gerade App- und Webdesigner, die als Freelancer arbeiten und für Kunden nutzerfreundliche Webseiten und Apps designen müssen, kommen ohne Wireframe Tool nicht aus. Je nach Tool kann der Funktionsumfang variieren. Es gibt Anfängertools und Varianten, die eher für Profis bzw. Fortgeschrittene geeignet sind. Fortgeschrittene Web- und Appdesigner sind beispielsweise mit OmniGraffle gut bedient. Wer als Anfänger ein Wireframe Tool ausprobieren möchte, der liegt beispielsweise mit MockFlow richtig.

Welche Wireframe-Varianten werden unterschieden?

Wireframes können dynamisch oder statisch sein. Während statische Wireframes nur das grobe Raster beinhalten, sind dynamische Wireframes bereits interaktiv umsetzbar und stellen den Übergang zum Prototyping dar. Bei statischen Wireframes wird das Design vernachlässigt und auch der Inhalt spielt eine eher untergeordnete Rolle. Dynamische Wireframes ermöglichen hingegen eine inhaltliche Darstellung eines Projektes und können sogar Animationen ablaufen lassen. Mit modernen Wireframe Tools kann der Nutzer schnell und problemlos ein Wireframe-Layout erstellen und bereits die grundlegenden Anordnungen und Inhalte von Projekten darstellen. Das Internet bietet vielseitige Web Wireframe Tools, die bereits einen ersten Projektüberblick ermöglichen. Der interessierte Nutzer kann mit einem Web Wireframe Tool sogenannte Platzhalter-Elemente setzen. Die Platzhalter-Elemente können Texte, Bilder, Logos und Banner symbolisieren.

Neben statischen und dynamischen Wireframes ist häufig der Begriff Mockups zu lesen. Mockups sind sehr detailreich und beinhalten bereits Farben, Typographie sowie Inhalte. Mockups gehen aus Wireframes hervor und sollen ein detaillierteres Bild der Webseite bzw. des Projektes liefern. Aus Mockups können bereits funktionelle Prototypen einer App oder einer Webseite erstellt werden.

Welche Vorteile bieten Wireframe Tools?

Die Tools erlauben dem Nutzer das Design direkt an Endgeräte anzupassen. Des Weiteren bieten die Tools bereits Standard-Elemente und Vorlagen, die einfach und problemlos genutzt werden können. Der Designer kann zudem verschiedene Versionen erstellen und an einem Ort speichern. Das ermöglicht es, auf vorherige Versionen zuzugreifen und miteinander zu vergleichen. Erstellte Wireframes können bereits als Entwürfe exportiert werden. Die Entwürfe können online geteilt werden. Je nach Tool kann der Webdesigner Farbe, Inhalte sowie Logo hinzufügen. Die spätere Webseite kann besser visualisiert werden. Abhängig vom Tool ist auch eine Prototyperstellung möglich.

Welche Nachteile haben Wireframe Tools?

Professionelle Tools, die für Web- und Appdesigner interessant sind, kosten in der Regel etwas. Es gibt Tools, die als Abonnement-Version erworben werden können. Vor dem Kauf eines Tools sollte der Nutzer bereits wissen, ob eine Einzellizenz oder lieber ein Abo-Modell genutzt werden soll. Des Weiteren sollte klar sein, für wie viele Nutzer das Tool gedacht ist. Ein weiterer Nachteil ist, dass es eine große Anzahl an Tools gibt und nicht immer ersichtlich ist, welches Tool sich für welchen Nutzerkreis lohnt. Nicht mit jedem Tool kann ein interaktiver Prototyp erstellt werden. Professionelle Nutzer sollten sich die Funktionen der Tools genau ansehen und vor dem Kauf bereits wissen, ob nur Wireframes oder auch Prototypen benötigt werden.

Worauf sollte bei der Tool-Wahl geachtet werden?

Die Wahl des Wireframe Tools bestimmt die Möglichkeiten, die ein Webdesigner zur Erstellung von Wireframes und Prototypen besitzt. Das Tool sollte bestimmte Eigenschaften besitzen, um für App- und Webdesigner interessant zu sein. Nachfolgend werden diese Eigenschaften näher erläutert.

Unkomplizierte Nutzeroberfläche

Das User Interface (Nutzeroberfläche) sollte klar und intuitiv bedienbar gestaltet sein. Wenn das Tool komplex gestaltet ist, sollte die Bedienung zumindest leicht zu lernen sein. Es ist ratsam, ein Tool zu wählen, zu dem der Hersteller Schulungen oder Tutorials anbietet. Des Weiteren sollte ein Support für die Themen Bedienung und Technik erreichbar sein.

Drag & Drop ist wünschenswert

Eine einfache Addition von Elementen ist per Drag & Drop möglich. Notwendige Elemente lassen sich auf diese Weise verschieben und schnell bearbeiten.

Feedback wünschenswert

Feedback sollte problemlos verwaltet werden können. Es sollte die Möglichkeit gegeben sein, Kommentare zu schreiben sowie Wireframes mit mehreren Nutzern zu erstellen (Collaboration Tools). Des Weiteren sollten Wireframes markiert werden können und eine Funktion zum Anhängen von Dateien sollte ebenfalls vorhanden sein.

Interaktive Funktionen

Der Wireframe sollte interaktive Elemente besitzen und eine klickbare Wireframe-Version erlauben. Diese interaktiven Funktionen werden auch als “interactive prototype oder “interactive mockup” bezeichnet. Eine Prototypisierung des Wireframes ermöglicht es dem Webentwickler eine detailreiche Darstellung der Webseite zu erhalten.

Tools zur Präsentation

Präsentationstools sollten im Programm vorhanden sein, um Kunden oder Kollegen die Projekte präsentieren zu können. Gerade in der Anfangsphase werden fertiggestellte Wireframes präsentiert und sollten visuell problemlos aufbereitet werden können.

Frühere Versionen speichern

Ein gutes Wireframe Tool sollte frühere Wireframe-Versionen speichern können und dem Nutzer den Zugriff erlauben. Das wird auch als Revisionshistorie bezeichnet. Der Webdesigner sollte Änderungen zwischen den Versionen schnell sehen können und verhindern, dass Änderungen doppelt vorgenommen werden.

Wichtige Fragen vor dem Kauf eines Wireframe Tools

Vor dem Kauf eines Wire Frame Tools sollte sich der Webdesigner Fragen nach der Funktionalität stellen. Bietet das Wireframing Tool die Funktionen, die der Webdesigner benötigt? Sind wesentlichen Features in dem Tool inbegriffen? Welche App- und Website-Design-Software ist in dem Tool vorhanden? Wie leistungsfähig ist das Tool? Kann die Wireframe App mit weiteren Tools verbunden werden? Sind vorkonfigurierte Designs in dem Wireframe Tool vorhanden? Letztendlich ist auch die Frage nach dem Wert der App wichtig. Ist das Wireframe Tool die Kosten wert? Wird der Preis klar kommuniziert und ist die Preisgestaltung transparent? Nachfolgend werden Wireframe Tools vorgestellt. Es werden wesentliche Features der jeweiligen Tools kurz erläutert. Insgesamt soll die Kaufentscheidung für Webdesigner und Appdesigner erleichtert werden.

Was sind die wichtigsten Funktionen eines Wireframe-Tools?

Wireframe-Tools werden hauptsächlich zur Strukturierung der Inhalte von Webseiten genutzt. Eine wichtige Aufgabe dieser Tools ist das Erstellen eines Konzeptes für die notwendigen Elemente einer Webseite. Ausschließlich die Logik einer Webseite, ohne Design und Bilder, wird damit erstellt. Wichtig ist die Darstellung und Unterscheidung in statische Wireframes und dynamische Wireframes. Der Unterschied zwischen beiden besteht darin, dass statische Wireframes ausschließlich die Grundlagen der Webseite und eine schematische Darstellung dieser erstellt werden kann.
Ganz anders beim dynamischen Wireframe. Hier wird sozusagen ein Webseiten-Prototyp erstellt, mit mehreren verknüpften Seiten. Hier funktioniert bereits die Navigation von Seite zu Seite. Je nach Preislage sind Tools auf dem Markt die nur statische Wireframes zulassen oder beide Möglichkeiten anbieten. Dabei gehen die Angebote von kostenlos bis hin zu relativ teuer. Wichtig auch, wie viele Projekte gleichzeitig bearbeitet werden können und ob bereits standardisierte Vorlagen vorhanden sind, die dann leicht übernommen und bearbeitet werden können. Die Nutzung mit Teams ist ebenfalls ein Kriterium, welches für Agenturen und Webdesigner relevant ist.

Fazit

Ein Wireframe Tool bietet Webdesignern und Appdesignern die Möglichkeit, schnell und unkompliziert Wireframes zu erstellen. Die Tools unterscheiden sich in Funktionsumfang, Interaktionsmöglichkeiten und Preis. Es sind Programme zur Erstellung von Wireframes, Mockups und Prototypen erhältlich, die für die ersten Designs gedacht sind und weniger detailreich sind. Für finale Web- und Appdesigns sind Tools ratsam, mit denen High-Fidelity Wireframes erstellt werden können. Der Preis zwischen den Tools schwankt enorm und vor dem Abschluss eines Abonnements oder dem Kauf einer Einzellizenz sollte das Wireframing Tool getestet werden können. Viele Hersteller bieten Testversionen an, die einen ersten Einblick in das jeweilige Programm gewähren. Der Preis richtet sich häufig nach der Anzahl der Nutzer. Wer ein Wireframe Tool mit mehreren Nutzern und für weltweit agierende Teams erwerben möchte, der sollte besonders auf Export-Möglichkeiten, Team-Funktionen und Gerätekompatibilität achten. Es sind webbasierte Tools erhältlich, die ortsunabhängig genutzt werden können. Des Weiteren sollte auf eine Nutzung nach Kenntnisstand geachtet werden. Es werden Wireframing Tools für Anfänger, Fortgeschrittene und Profis angeboten. Die vorgestellten Wireframing Tools unterscheiden sich teilweise erheblich in Funktionen, Preis und Bedienung. Wenn die Bedienung des Tools erst erlernt werden muss, dann sollten mindestens Tutorials zu dem Programm angeboten werden. Beim Kauf eines Wireframing Tools sollte zudem auf einen guten Herstellersupport geachtet werden.

Weitere Tool-Vergleiche findest Du hier:

10 WDF*IDF-Tools im Vergleich 126 Tools für Dein erfolgreiches Content Marketing 13 Feed Management Tools im Vergleich 18 Rechnungsprogramme im Vergleich 22 ERP-Systeme im Vergleich 23 Pagespeed WordPress Plugins im Vergleich 26 SEA-Tools im Vergleich 29 Video-Streaming-Dienste im Vergleich 30 Facebook Analytics Tools im Vergleich 30 Marketing-Automation-Tools im Vergleich 31 Payment-Anbieter im Vergleich 32 Content-Management-Systeme im Vergleich 32 Webanalyse-Tools im Vergleich 32 WordPress-Hosting-Anbieter im Vergleich 33 Website-Monitoring-Tools im Vergleich 37 TikTok-Tools im Vergleich 38 Amazon-Tools im Vergleich 41 Webkonferenz-Anbieter im Vergleich 43 Affiliate-Netzwerke im Vergleich 46 Reporting Tools im Vergleich 49 Webhosting Anbieter im Vergleich 54 Newsletter-Tools im Vergleich Agentursoftware – 29 Anbieter im Vergleich Backlink Checker – 8 Anbieter im Vergleich Conversionoptimierungs-Tools: 9 Anbieter im Vergleich CRM Systeme – 55 Anbieter im Vergleich Homepage-Baukasten – 25 Anbieter im Vergleich Instagram-Tools: 51 Anbieter im Vergleich Keyword Recherche Tools – 90 Anbieter im Vergleich LinkedIn Tools – 48 Anbieter im Vergleich Mockup-Tools – 19 Anbieter im Vergleich Nützliche Helfer bei der Suchmaschinenoptimierung – 23 kostenlose SEO Browser Erweiterungen auf einen Blick Projektmanagement-Tools – 51 Anbieter im Vergleich SEOTools – 32 Anbieter im Vergleich Shopsysteme – 55 Anbieter im Vergleich Social Media Tools – 53 Anbieter im Vergleich Zeiterfassungstools – 85 Anbieter im Vergleich
Back to top