Wireframes erstellen: die besten Mockup-Tools 2024 im Überblick

Was ist ein Mockup-Tool?

Agenturen, Entwickler und Designer nutzen die Tools seit langer Zeit: Mockup Tools erlauben eine schnelle wie unkomplizierte Zusammenstellung von Elementen für eure geplante Anwendung (App, Webseite, Shop, etc) als Skizze. Dabei zieht ihr die einzelnen Teile (Bestellbuttons, Pulldownmenü o.ä.) einfach per Drag&Drop auf die Layoutfläche (zum Beispiel die Skizze für die Startseite eurer Homepage). Ideal zur Planung von:

• Webseite
• Landingpage
• OnlineShop
• Software
• Apps

Wireframing: Mit nur wenigen Klicks ist das Layout „skizziert“ und die einzelnen Bereiche lassen sich mit den Wunschinhalten füllen. Das Resultat ist ein „Wireframe“ (ein Gerüst), dass die Grundvorstellungen des Designers perfekt widerspiegelt.

Nun haben aber auch Design-Kunden die Vorteile der Tools für sich entdeckt. Denn wollte man in der Vergangenheit digitale Produkte gestalten, dann war der Kommunikationsweg oft aufwendig. In Besprechungen werden Mood-Boards gezeigt und ein langer E-Mail-Verkehr diskutiert die korrekte Benennung der gewünschten Farbe. Die Anordnung von Menüleisten, die gewünschte Schriftart oder die Größe des Logos – jede Designentscheidung wird in mehreren Korrekturschleifen wieder und wieder angepasst.

Mit einem Mockup-Tool kann ein Großteil dieses Dramas von Anfang an beseitigt werden. Denn wenn sich die Kunden eine Homepage gestalten lassen, freuen sich kundenorientierte Wegdesigner darüber, mit einer konkreten Vorlage (dem Wireframe oder Mockup) arbeiten zu können. Anhand einer durch den Kunden zusammengestellten Design-Vision lässt sich im Handumdrehen erkennen, wohin die Reise gehen soll. Designer können die Möglichkeiten und Grenzen erörtern und ein gemeinsamer Nenner ist schnell gefunden. Dieses Vorgehen schont nicht nur die Nerven. Es spart auch jede Menge Zeit und damit jede Menge Geld.

Visualisierung mit Wireframes auch für Investoren-Pitch sinnvoll

Auch im Rahmen einer Firmenvorstellung, zum Beispiel für die Investorensuche, sind die Mockup-Tools eine günstige Alternative. Die eigene Idee, sagen wir, eine App oder ein Software-Produkt, ein Spiel, lässt sich kostengünstig visualisieren und mögliche Investoren haben ein ein konkretes Bild der Funktionalitäten vorliegen. Dies lässt sich dann hervorragend in euer Pitch-Deck integrieren.

Wie werden die Mockup-Tools benutzt?

Abhängig vom Anbieter sind die Tools ganz unterschiedlich aufgebaut. Allerdings handelt es sich meistens um Drag-&-Drop-Produkte. Vorgefertigte Bausteine (Buttons, Formularfelder, etc) lassen sich zusammenfügen und individuell mit eigenen Grafiken anpassen. In wenigen Schritten ist das Scribble, bzw. die Design-Vorlage für die eigene Homepage oder den App-Homescreen geschaffen.

Kostenlose Mockup-Tools 2024 für coole Wireframes – unsere 3 Lieblingstools

Die praktischen Tools stehen sowohl kostenlos als auch kostenpflichtig zur Verfügung. Einige der kostenlosen Mockup-Tools bieten dabei eine exzellente Nutzungsvielfalt, stellen die fertigen Mockups aber nur in einer geringen Auflösung zur Verfügung. Möchte man einen hochwertigen Druck erstellen, ist es dann doch notwendig, in die Tasche zu greifen. Daher ist hier bei der Wahl Vorsicht geboten. Im Folgenden drei kostenlose Mockup-Tools, die auf der ganzen Linie überzeugen können.

Balsamiq Mockups – Der bekannte Klassiker fürs „Happy Wireframing“

Wer in Sachen Mockup-Tools unterwegs ist, der kommt an den Balsamiq Mockups nicht vorbei. Das Tool steht sowohl als browserbasierte Version bereit als auch in der Form einer Desktop-Anwendung.

Die Vollversionen lassen sich beide für 30 Tage kostenlos testen. Hinzu kommt eine Demoversion, die komplett kostenfrei zur Verfügung steht. Ein Vorteil dieser Version ist es, dass sie ohne eine Registrierung funktioniert. Die Version ist auf der Webseite verlinkt und kann per Mausklick gestartet werden. Selbst in der reduzierten Ausführung haben Balsamiq Mockups dabei eine Vielzahl von fertigen Bausteinen zu bieten. In mehreren Kategorien unterteilt, lassen sich diese über das Drop-&-Drag-Prinzip platzieren. Anschließend ist eine individuelle Konfiguration möglich.

Der Nachteil der Version ist die Kurzlebigkeit von den Demo-Templates. Denn alle paar Minuten lädt sich die Seite neu und die aktuelle Vorlage verschwindet ins digitale Nirvana. Wer schnell ist, der kann per Screenshot seine eigenen Ideen fix festhalten. Ansonsten ist die kostenlose Testversion für 30 Tage eine tolle Hilfe für ein einmaliges Projekt.

Demo/Testversion: kostenlos aber mit eingeschränkter Funktionalität, Testversion 30 Tage
Kosten: Single User 89 US Dollar
Web: balsamiq.com

Mockplus – kostenloses UI Mockup Tool für Web und Mobile

Egal ob Neuling oder erfahrener Designer: Mockplus richtet sich an beide gleichermaßen und ist ein  webbasiertes Tool, mit dem ihr eure Ideen in wenigen Minuten ohne Programmierung visualisieren könnt. Besonders gut eignet sich Mockplus für Teams, denn dank kollaborativen Mockup-Designs könnt ihr gemeinsam Bearbeiten und alles mit euren Teamkollegen synchronisieren.

Mockplus macht es nicht nur möglich, Modelle zu erstellen, sondern ihr könnt mit dem Drag-and-Drop-Builder und dem vollständigen Satz an Interaktionen und Animationen auch interaktive Hi-Fi-Prototypen designen.

Eure fertigen Designs teilt ihr ganz einfach über einen Link und könnt so schnell Feedback und Kommentare zu eurer Arbeit einholen. Wollt ihr das fertige Design an den Entwickler übergeben, dann veröffentlicht ihr es in der Mockplus Cloud, wo es dann inklusive aller Assets, Spezifikationen und Code-Snippets zur Verfügung steht.

Da Mockplus webbasiert ist, gibt es keine Schwierigkeiten mit verschiedenen Programmversionen:  Jedes Teammitglied kann auf die neueste Version von Mockups zugreifen.

Demo/Testversion: kostenlos ohne zeitliches Limit aber mit eingeschränkter Funktionalität
Kosten: ab 10,95 US Dollar pro Nutzer

Mockingbird – ein enorm vielseitiges Wireframing-Tool

Gleich zu Beginn sei gesagt, dass die webbasierte Version von Mockingbird es nicht zulässt, die angefertigten Mockups auf dem Rechner zu speichern oder zu exportieren. Dies limitiert die Nutzung für Präsentationen – macht das Tool aber nicht weniger hilfreich für die Vorarbeit. Denn auch hier ist ein Screenshot die rettende Lösung – ausreichend, um dem Designer eine Idee von der geplanten Webseite zu vermitteln.

Das Tool bietet in der webbasierten Version mehr als 90 individuelle Bauteile. Diese sind in praktische Kategorien unterteilt und lassen sich über Schlagworte filtern. Es ist möglich, gleich mehrere Seiten als Mockup zu erstellen. Sehr gut also, um ein komplettes Projekt zu planen. Es ist nicht möglich, die einzelnen Seiten untereinander zu verlinken. Für die kostenlose Nutzung ist dies allerdings eher wenig interessant.

Ein echter Vorteil ist die Nutzung eines Grid-Systems. Dies wird über die Bearbeitungsfläche gelegt und es ist möglich, die individuellen Bestandteile danach auszurichten. Arbeitet der Webdesigner ebenfalls mit einem Grid-System, und viele von ihnen machen genau das, lässt sich die Vorlage umso leichter in die echte Version umsetzen.

Demo/Testversion: kostenlos aber mit eingeschränkter Funktionalität
Kosten: 3 Projekte pro Monat für 12 US Dollar monatlich bis unlimitiert für 85 US Dollar monatlich
Web: gomockingbird.com

Weitere Mockup-Tools in der Übersicht (2024)

Lumzy – Mockup-Tool mit großem Funktionsumfang

Lumzy ist ebenfalls eine webbasierte Anwendung. Das Tool kann auf den ersten Blick mit einem großen Funktionsumfang überzeugen. Dabei sind hier nicht nur unzählige, vorgefertigte Bausteine zu finden, die in praktischen Kategorien vorsortiert sind. Auch die Volltextsuche ist sehr hilfreich. Einzelne Elemente lassen sich schnell ausfindig machen, auch in komplexen Mockups.

Das Tool kann außerdem mit einem kostenlosen Datenexport punkten. Die fertigen Mockups können sowohl als PDF als auch im PNG-Format abgespeichert werden. Innerhalb des Tools lassen sich die einzelnen Seiten untereinander verlinken – besonders hilfreich für eine professionelle Vorstellung der geplanten Live-Version. Per Knopfdruck wird das Mockup in eine Druckversion umgewandelt, die sich auf eine Vielzahl von Formaten anpassen lässt.

Ein Nachteil der Lumzy-Software ist die fehlende Speichermöglichkeit. Es ist also notwendig, die aktuelle Version in einer Sitzung fertigzustellen – oder zumindest den Browser nicht zu schließen. Eine Besonderheit des Tools ist es, dass es keine reine Kaufversion gibt. Allerdings kann man einen sogenannten Token erwerben, der dann dafür genutzt werden kann, die Seite frei von Werbepopups zu halten. Mit einem Token bleibt die Seite 12 Stunden frei von nervigen Werbeeinblendungen.

Demo/Testversion: keine
Kosten: 26 US Cent pro Token
Web: lumzy.com

Moqups

System: reines Web-Tool
Demo/Testversion: mit eingeschränkter Funktionalität
Kosten: ab 13 $ pro 10 Projekte
Web: https://app.moqups.com

wireframe.cc

System: sehr minimalistisches Web-Tool
Demo/Testversion: nur kostenlose Variante vorhanden
Kosten: keine
Web:  https://wireframe.cc/

Frame Box

System: sehr minimalistisches Web-Tool
Demo/Testversion: nur kostenlose Variante vorhanden
Kosten: keine
Web: http://framebox.org/

Placeit

System: umfangreiches Web-Tool mit sehr vielen Möglichkeiten
Demo/Testversion: kostenlos, allerdings mit geringer Bildauflösung
Kosten: 29 bis 199 $ pro Monat
Web: https://placeit.net/

Place.to

System: umfangreiches Web-Tool mit sehr vielen Möglichkeiten
Demo/Testversion: kostenlos, allerdings mit geringer Bildauflösung
Kosten: ab 9 $ für 10 Credits
Web: https://place.to

Axure

System: auf Windows & MAC zur Installation, sehr umfangreiches Tool
Demo/Testversion: 30 Tage Testversion
Kosten: ab 289 $
Web: https://www.axure.com/