Erfolgsrezepte für Startups und Gründer

Mockup-Tools & Wireframes: unverzichtbare Helfer für eine perfekte Präsentation

Designentwicklung etwa für eure Website kosten viel Geld und Zeit. Um schneller in der Zusammenarbeit mit Designern und Programmierern voran zu kommen, helfen Mockup-Tools, mit denen ihr übersichtliche Wireframes erstellen könnt. Mit den kleinen Helferlein könnt ihr aber auch großartige Präsentationen erstellen. Wir haben euch die spannendsten Mockup-Tools herausgesucht – unsere Liste 2017.

Was ist ein Mockup-Tool?

Designspezialisten nutzen die Tools seit langer Zeit. Sie erlauben eine schnelle wie unkomplizierte Zusammenstellung von Webdesigns für alle relevanten Bereiche:

  • Webseite
  • Pressekit
  • Apps

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.

Gründerrat:

Auch im Rahmen einer Firmenvorstellung, zum Beispiel für die Investorensuche, sind die Mockup-Tools eine günstige Alternative. Die eigene Idee lässt sich kostengünstig visualisieren und mögliche Investoren haben ein hochwertiges Produkt vorliegen.

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.

3 Top kostenlose Mockup-Tools für coole Wireframes

Die praktischen Tools stehen sowohl kostenlos als auch kostenpflichtig zur Verfügung. Einige der kostenlosen 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, die 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

Mockingbird – Eine enorme Auswahl

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

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

Weitere Mockup-Tools in der Übersicht

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/

Weitere interessante Artikel

Top 10: Die spannendsten Chatbots für jeden Entrepreneur Luke Skywalker hatte R2D2, Tony Stark hatte Dum-E, Michael Knight hatte K.I.T.T, und Cooper hatte TARS. Eine beträchtliche Zahl an coolen Typen, die a...
Lohnbuchhaltung-Tools Übersicht – die besten Programme zur Lohnbuchhaltung | Liste 2017 Software allein macht noch keine Lohnbuchhaltung, aber kann Euch zumindest dabei helfen und einige Arbeitsschritte vereinfachen. Wir haben die wichtig...

Bitte bewerte diesen Artikel:

Hinterlasse eine Antwort

Deine Email-Adresse wird nicht veröffentlicht.

X