Menu
Die besten Mockup Tools

12.12.17

Unverzichtbarer Helfer – Das Mockup-Tool

Alle ziehen an einem Strang – Mit dem Mockup dieselbe Sprache sprechen

Jeder von uns kennt es: Designer und Programmierer sprechen nicht unbedingt dieselbe Sprache. Auf der kreativen Seite entsteht ein Bild im Kopf und somit auch eine ganz bestimmte Vorstellung. Diese zu beschreiben ist nicht immer ganz einfach – vor allem wenn der Programmierer viel mehr in Zahlen und Codes, als in Bildern denkt. Doch Hilfe ist schnell gefunden: Ein Mockup kann in solchen Fällen sehr nützlich sein und dazu beitragen, dass beide Seiten dieselbe Vorstellung haben und vor allem am Ende keine Arbeit doppelt gemacht werden muss.

Was ist ein Mockup?

Ein Mockup (aus dem Engl.: Attrappe, Nachbildung) ist ein hilfreiches Instrument welches vor allem während der Planung einer neuen Website oder App verwendet wird. Das Ziel besteht darin sein Vorhaben schnell und einfach zu visualisieren um anderen Projektbeteiligten in Präsentationen einen ersten Eindruck von der gewünschten Gestaltung zu vermitteln. Wichtig zu wissen ist, dass jeder ein Mockup erstellen kann, da nicht eine einzige Zeile im Quellcode geschrieben werden muss.Mit Hilfe eines Mockup-Tools können langwierige Prozesse und E-Mail-Verkehr mit unzähligen Korrekturschleifen, in denen es um gewünschte Farben, Menüleisten, Logos und Schriftarten geht, von Beginn an verkürzt werden. Dank des passenden Designs eines Mockups weiß so jeder sofort wohin die Reise geht.

Bei der Erstellung gibt es zwei Herangehensweisen ein solches Mockup zu entwerfen: Die erste Möglichkeit ist es das Mockup ganz altmodisch auf dem Papier darzustellen. Die zweite, etwas zeitgemäßere Variante sind sogenannte Mockup-Tools, auf welche wir uns nachfolgend konzentrieren werden.

Drei kostenlose Mockup-Tools für Sie

Mittlerweile gibt es zahlreiche Tools für die Erstellung eines Mockups auf dem Markt. Im Normalfall handelt es sich um Produkte, die dank einer Drag & Drop-Funktion auch für Anfänger leicht zu bedienen sind. Vereinfacht wird das Ganze außerdem durch vorgefertigte Baukastensysteme, die mit eigenen Grafiken, Schriften und Farben ganz einfach individualisiert werden können. Die kostenlosen Versionen bieten zwar oft enorme Nutzungsmöglichkeiten, allerdings werden die fertigen Mockups den Nutzern häufig nur in einer geringen Auflösung zur Verfügung gestellt. Für eine bessere Qualität muss oftmals gezahlt werden.

Tipp 1: Balsamiq Mockups

Das Tool Balsamiq Mockups ist derzeit wohl das Bekannteste auf dem Markt. Es kann sowohl browserbasiert als auch als Desktop-Anwendung genutzt werden und in beiden Fällen steht dem User eine 30-tägige kostenloste Testversion zur Verfügung. Ein großer Vorteil besteht darin, dass das Tool auch ohne eine Registrierung zu nutzen ist. Dabei steht dem User eine Vielzahl von fertigen Bausteinen zur Verfügung, die in verschiedene Kategorien unterteilt sind und sich per Drag & Drop steuern lassen.

Tipp 2: Mockingbird

Auch Mockingbird bietet dem Nutzer in der webbasierten Version 90 individuelle Bauteile. Diese lassen sich nach Schlagwörtern filtern und in Kategorien unterteilen. Außerdem lassen sich Mockups über mehrere Seiten hinweg erstellen. Ein großer Nachteil ist, dass sich die fertigen Modelle in der kostenfreien Version nicht auf dem Rechner speichern lassen, was sich allerdings ganz einfach mit einem Screenshot umgehen lässt.

Tipp 3: Lumzy

Auch das Tool Lumzy funktioniert webbasiert. Auch in diesem Fall lassen sich unzählige Bausteine, Kategorien und Elemente nutzen. Ein großer Vorteil ist die Funktion, mit der sich die fertigen Mockups ganz einfach als PDF- oder PNG-Datei abspeichern lassen. Eine Kaufoption gibt es für Lumzy nicht,allerdings hat man die Möglichkeit das Tool mit einem sogenannten Token für 12 Stunden ohne Werbeeinblendungen zu nutzen.

Noch nicht überzeugt?

Wenn Sie immer noch nicht von der Nutzung eines Mockup-Tools überzeugt sind haben wir noch einmal alle Vorteile gebündelt für Sie:

  • Websitevarianten schnell und einfach visualisieren ohne Programmierkenntnisse
  • Mockups schaffen Verbindung zwischen Designer und Programmierer
  • Durch schematische Darstellungen wird sich auf das Wesentliche konzentriert
  • Frühzeitige Qualitätskontrolle
  • Zeit- und Kostenersparnis, da schnell erkannt wird ob ein Konzept umsetzbar ist
  • Einfache Abstimmung von Grundfunktionen, Navigation, Inhaltsarchitektur und dem Design mit Projektbeteiligten
Wir hoffen, dass wir Ihnen mit diesem Beitrag einige Anregungen für Ihr nächstes Projekt geben konnten und wünschen Ihnen eine erfolgreiche Woche und eine schöne Adventszeit!