Die besten Mock-up- und Wireframe-Tools

In der frühen Konzeptionsphase von Webprojekten sind Mock-ups und Wireframes wertvolle Methoden, um erste Konzeptideen zu Papier zu bringen. Denn schon vor der eigentlichen technischen Umsetzung helfen die beiden Prototyping-Methoden, Ideen und Gedanken visuell darzustellen. Dabei entstehen erste Skizzen und Entwürfe, die Vorformen des künftigen Projekts darstellen und den Entwicklungsprozess voranbringen.

Mock-ups und Wireframes dienen nicht nur als Hilfe bei der Konzeption, sie sind auch ein gutes Mittel, um seinen Kunden die eigenen Ideen und Pläne besser zu veranschaulichen. Meist entstehen erste Entwürfe mit Stift und Papier oder einem entsprechenden Editor am PC. Auch Grafikprogramme wie Photoshop oder Fireworks setzt man häufig ein, wobei gerade hierbei die manuelle Umsetzung meist nicht die effizienteste ist. Hier helfen spezielle Wireframe- oder Mock-up-Tools.

Über die Grundlagen von Mock-ups und Wireframes können Sie sich in unserem Ratgeber informieren. Worin unterscheiden sich nun die beiden Prototyping-Methoden?

Bei Wireframes liegt der Schwerpunkt meist auf dem sogenannten User Experience Design – die optimale Nutzererfahrung steht also im Mittelpunkt. Mithilfe eines Wireframes entsteht eine skizzenähnliche Beschreibung des Projekts mit Darstellung von Funktionen und Layout. Es geht hier vor allem um eine erste Überprüfung des Konzepts und dessen Umsetzbarkeit.

Im Prinzip stellt ein Mock-up den nächsten Schritt dar, denn es baut auf der Struktur des Wireframes auf. Allerdings kommt der Designaspekt ins Spiel: Farbe, Typografie, Bilder und Grafikelemente zeigen das vorläufige Design der geplanten Webanwendung. Ein Mock-up ist detaillierter als ein Wireframe, aber noch längst keine finale Version. Dennoch ist es gerade bei Kundengesprächen ein praktischer Weg, das künftige „Look and Feel“ der Website wiederzugeben.

Die im Anschluss vorgestellten Prototyping-Tools eignen sich je nach Schwerpunkt für Wireframes, Mock-ups oder beide.

Balsamiq ist eines der bekanntesten Prototyping-Tools auf dem Markt mit Fokus auf Wireframing. Nutzer profitieren von einer großen Auswahl an Basiselementen. Zusammen mit Navigationselementen, Bild- und Videobereichen, Formularen und vielen weiteren bewegt man diese per Drag-and-Drop auf der Zeichenfläche und erstellt sein Wireframe. Auch eine Formatierung (Farbe, Größe) der Module ist möglich, außerdem kann jeder Nutzer seine eigenen Module erstellen. Schritt für Schritt entsteht so ein professionelles Wireframe.

Mithilfe der praktischen Kommentarfunktion ergänzt man die einzelnen Elemente um Erklärungen. Balsamiq gilt allgemein als einfach zu bedienen und punktet mit einer übersichtlichen Oberfläche und verständlicher Kategorisierung der einzelnen Elemente. Es gibt jedoch kaum eine Möglichkeit, Interaktionen im Prototyp einzubauen. Immerhin kann man mehrere Tabs miteinander verlinken. Das schlichte Design von Balsamiq wirkt wie von Hand gezeichnet. Es entsteht eine gute Übersicht ohne überflüssige Details und damit eine bestens geeignete Lösung für frühe Entwicklungsphasen.

Die Entwicklerfirma Balsamiq Studios bietet zwei Versionen des Wireframing-Tools: eine Desktop-Anwendung namens „Mockups 3“ zum Download für Windows, Mac und Linux und eine cloudbasierte Webapplikation „myBalsamiq“. Nach Registrierung steht Nutzern zunächst für 30 Tage ein kostenfreier Test-Account zur Verfügung, danach werden Lizenzgebühren fällig, die je nach Anzahl der Nutzer und Projekte steigen. Wer seine Wireframes nur online in der Web-App erstellen will, kann in der Basisversion 3 aktive Projekte betreiben.

Eine kostenlose Demoversion finden Sie hier.

Das Tool Axure eignet sich sowohl zum Erstellen von simplen Wireframes als auch von detailreichen Prototypen. Mit einem sehr großen Funktionsumfang zählt Axure eher zu den Profi-Website-Mock-up-Tools. Als Einsteiger sollte man einige Einarbeitungszeit einplanen, bis man alle Funktionen durchschaut und sich einen ausreichenden Überblick verschafft hat.

Das Mock-up-Tool bietet eine große Auswahl an vorgefertigten Elementen, die alle individuell konfigurierbar sind. Es gibt außerdem die Möglichkeit, einfache Aktionen einzubauen, z. B. Tooltipps, eine Flyout-Navigation oder Lightboxen. Damit ist Axure eine gute Alternative zum sogenannten Click-Dummy, den man vor allem für frühe Usability-Tests einsetzt. Axure verfügt nicht nur über eine Kommentarfunktion, alle Erklärungen und Fußnoten kann man später einfach als CSV oder PDF exportieren, womit man die ideale Basis für Konzeptpapiere bekommt. Außerdem ist über das Tool Teamarbeit möglich: Mehrere Nutzer können so zeitgleich an einem Mock-up arbeiten, ohne Änderungen Anderer zu überschreiben.

Auch bei Axure steht eine 30-tägige kostenfreie Testversion zur Verfügung. Kostenpflichtige Angebote gibt es in der Pro-, Team- und Enterprise-Version. Für Studenten ist die Nutzung von Axure kostenlos.

Das Mock-up-Tool Pencil ist ein Open-Source-Projekt und die einzig komplett kostenlose Desktopversion in unserer Liste. Obwohl das Programm lizenzfrei genutzt werden kann, sind alle wichtigen Funktionen verfügbar, die man zum Erstellen eines professionellen Mock-ups benötigt. Auch bei Pencil gibt es eine riesige Auswahl an Vorlagen. Insgesamt findet man über 300 vorgefertigte Formen – mehr, als die anderen vorgestellten Prototyping-Tools bieten. Auf der Website der Entwickler stehen bei Bedarf noch weitere zur Verfügung. Neben vieler Formen, Diagramm-Elemente und vektorbasierten Clipart-Icons gibt es die Möglichkeit, Diagramme und Ablaufschemata direkt im Programmfenster zu erstellen.

Trotz des großen Funktionsumfangs finden Nutzer sich in der übersichtlichen Bedienoberfläche schnell zurecht. Der intuitive Aufbau und ein praktischer Drag-and-Drop-Editor erlauben einen schnellen Einstieg. Indem man mehrere Seiten anlegt und miteinander verlinkt, bildet man Funktionen der künftigen Seite sowie simple Nutzungsabläufe nach.

Als Open-Source-Tool ist Pencil zwar kostenfrei, eine zuverlässig kontinuierliche Weiterentwicklung ist jedoch nicht garantiert. Auf der Website zeigt sich Stagnation in den letzten Jahren, seit 2013 gibt es keine Updates bzw. neue Versionen mehr. Trotz dieses Nachteils und der weniger guten Dokumentation bleibt Pencil eine gute Alternative zu kostenpflichtigen Mock-up- und Wireframing-Tools. Die kostenlose Desktop-Anwendung ist für Windows, Mac und Linux verfügbar, zusätzlich gibt es eine Browser-Extension für Mozilla Firefox.

Das Prototyping-Tool Mockingbird ist ebenfalls eine reine Webapplikation und kommt ganz ohne lokale Installation aus. Es ist ein ideales Programm zum Einstieg, doch auch für Fortgeschrittene zum Erstellen von Mock-ups geeignet.

Zum Start wählt der Nutzer aus vorgefertigten Elementen die passenden aus und schiebt sie im Editor ganz einfach per Drag-and-Drop an die richtige Stelle. Insgesamt hat man die Wahl aus 90 verschiedenen Modulen und Bausteinen. Mockingbird überzeugt ebenfalls durch einen sinnvollen Aufbau und eine gute, nachvollziehbare Kategorisierung. Zusätzlich gibt es eine praktische Suchfunktion. Der Nutzer kann mehrere Seiten erstellen, deren Verbindung bzw. Verlinkung ist allerdings nicht möglich.

Ein besonderes Feature des Mock-up-Tools: Mockingbird erlaubt den Einsatz eines sogenannten Grid-Systems, das man über alle erstellten Seiten legt. Grid-Systeme werden bei fast allen modernen Websites eingesetzt. Berücksichtigt man das Raster schon in einer frühen Phase, bringt das bei der späteren Ausarbeitung des Layouts erhebliche Zeitersparnis. Mockingbird steht in einer kostenlosen Version zur Verfügung. Doch ähnlich wie bei Moqups sind viele wichtige Features, z. B. Speichern und Export, erst in der kostenpflichtigen Version zugänglich. Das Basispaket beinhaltet 3 Projekte.

Wireframe.cc ist ein vergleichsweise minimalistisches Tool zum Erstellen von soliden, klaren Wireframes. Den Nutzer erwartet im Vergleich zu den anderen Wireframing-Tools in unserer Liste ein abgespeckter Funktionsumfang. Wireframe.cc ist für einen schnellen und unkomplizierten Einstieg dafür umso besser geeignet. In relativ kurzer Zeit sind klare, fokussierte Layouts erstellt, und das ohne eine große Auswahl an vorgefertigten Elementen.

Bei Wireframe.cc zieht der Nutzer ganz einfach mit der Maus ein Fenster in der gewünschten Größe und Form auf. Im erscheinenden Drop-down-Menü wählt er den passenden Element-Typ, z. B. Slider, Textfeld oder Bildelement. Dank der Möglichkeit, zwischen verschiedenen Seitengrößen zu wählen, erstellt man entweder Frames für Desktop- oder mobile Endgeräte. Das Wireframe-Tool nimmt User während der Erstellung mehr oder weniger an die Hand. Auch bei der Anpassung der Elemente wählt man aus einer Liste passender Optionen, die das Tool vorschlägt. Durch die begrenzte Palette an Funktionen und Gestaltungsmöglichkeiten rückt bei Wireframe.cc die Funktionalität einer Seite in den Vordergrund. Der Fokus liegt auf der eigentlichen Idee, von der nichts Unnötiges ablenken soll. Das Teilen und Kommentieren im Team geht zum einfach vonstatten. Die erstellten Wireframes haben eine URL und können gespeichert und verschickt werden.

Das Prototyping-Tool steht in der Basisversion kostenlos zur Verfügung. In der Premiumversion gibt es noch einige Zusatzfeatures zu Interaktion, Protokoll, Arbeitsverläufen und dem obligatorischen Export, der wie bei den anderen aufgelisteten Tools erst nach Bezahlung möglich ist. Die Testphase beträgt 7 Tage, die Paketpreise steigen mit Nutzeranzahl und benötigten Kapazitäten.

Um nicht unnötig viel Zeit mit der Entwicklung und manuellen Umsetzung eines Entwurfs zu verbringen, lohnt sich der Einsatz von Wireframe- und Mock-up-Tools. Sie sorgen in allen Entwicklungsstadien für effizienteres Arbeiten. Nicht nur ist der erste Entwurf schneller ausgearbeitet, man hat auch später mehr Möglichkeiten, (Kunden-)Feedback direkt umzusetzen. Nicht zuletzt sorgt ein professionelles Prototyping-Tool für eine bessere Darstellung konzeptioneller Aspekte, Inhalte und Funktionen, bevor es an die gestalterischen Elemente geht. Gerade wer in einem Team arbeitet, profitiert von den zahlreichen Features der vorgestellten Tools.