Was ist ein Mockup und wie erstellst du eins?

Wer bei komplexen Designs flexibel herumprobieren oder Ideen vorweg Kunden und Mitarbeitern visuell präsentieren möchte, der nutzt am besten Mockups. Wie, das verraten wir jetzt.

Hast du schon einmal eine Website erstellt? Oder ein komplettes Magazin? Oder ein Design, das sich aufgrund von nachträglichem Feedback vom Erstentwurf bis zur finalen Version mehrfach geändert hat? Dann hast du sicher schon festgestellt, dass es Sinn macht, nach dem Projekt oder Design Briefing die groben Strukturen festzulegen und erst, wenn diese für alle Beteiligten feststehen, ins Detail deines Designs zu gehen – und genau dafür gibt es Mockups.

In unserem Artikel verraten wir dir, wie du sinnvolle Mockups schnell und unkompliziert erstellst und was es dabei alles zu beachten gilt. Zudem haben wir verschiedene Canva-Vorlagen für dich, um es dir beim Erstellen deines Mockups etwas einfacher zu machen.

Mockups sind ein praktisches Mittel, um Designs zu konzeptualisieren – so viel haben wir schon verraten. Aber was genau sind Mockups denn nun überhaupt?

Mockups sind mehr oder weniger grobe Skizzen von Design-Projekten, in denen alle Elemente vereinfacht dargestellt werden, um zunächst einmal nur die prinzipielle Struktur bzw. Funktion des Designs festzulegen. Im Genauen bedeutet das, dass mit Platzhaltern für verschiedene Elemente gearbeitet wird: Bilder werden noch nicht ausgewählt, sondern bloß als Rechtecke ohne Inhalt oder mit Platzhalter-Fotos dargestellt. Texte werden noch nicht ausformuliert, sondern lediglich in Stichworten, mit Fülltexten wie Lorem Ipsum oder sogar bloß als Überschriften festgehalten. Grafen und Tabellen werden in kurzen Worten beschrieben, aber noch nicht gestaltet oder ebenfalls durch Beispielbilder ersetzt.

Der Sinn hinter einem solchen Mockup-Konzept ist jener, Kombinationen von Elementen sowie unterschiedliche inhaltliche Strukturen ohne großen Aufwand zu gestalten. Somit kannst du auch einfach verschiedene Design-Varianten ausprobieren, indem du Platzhalter entsprechend verschiebst und – falls nötig – umformst. Bilder können beispielsweise von Rechtecken zu Quadraten oder Kreisen geändert werden, um ein schöneres Gesamtbild zu schaffen.

Ebenso kann man mit Mockups einen Überblick darüber gewinnen, wie viele und welche Elemente in dem Design überhaupt Platz finden sollen oder müssen, und so besser planen, wie viel ein jedes davon einnehmen darf. Die Größen und Gewichtungen einzelner Elemente können einfach verändert werden, Textplatzhalter können angepasst werden, noch bevor der Text geschrieben wird, wodurch nachträgliches Ausbauen oder Kürzen wegfällt, und andere Teammitglieder können die Strukturen und Inhalte absegnen, bevor diese aufwendig fertiggestellt werden.

Kurz zusammengefasst: Ein Mockup ist eine grobe Voransicht des fertigen Designs, die dabei hilft, dieses ohne großen Mehraufwand (mit anderen gemeinsam) zu planen.

Hier sind beispielsweise zwei Newsletter-Vorlagen, die dir dabei helfen können, deine E-Mail-Marketing-Strategie visuell als Mockup zu planen:

Jetzt, wo du weißt, was ein Mockup eigentlich ist und wozu es gut ist, gilt es, deine eigenen Mockups zu gestalten. Der erste und wichtigste Schritt ist dabei zunächst, dir zu überlegen, wofür du das Mockup eigentlich brauchst.

Wie vorhin schon angesprochen, können Mockups vielen Zwecken dienen und auch für jedes beliebige Design verwendet werden – das bedeutet aber noch lange nicht, dass ein Mockup auch immer sinnvoll ist. Wenn du beispielsweise lediglich Visitenkarten für dich selbst gestaltest, dann macht es mitunter weit mehr Sinn, gleich mit deinen eigenen Daten herumzuexperimentieren, als zunächst einmal Platzhalter zu gestalten, die dann erst wieder ausgetauscht werden müssen. Immerhin können Dinge wie Schriftarten und -größen sowie Farben sowieso mit wenigen Klicks geändert werden. Gestaltest du indessen Visitenkarten für ein ganzes Unternehmen, kannst du natürlich auch mit Platzhalter-Texten arbeiten.

Ein Mockup für eine Infografik macht ebenfalls schon weit mehr Sinn – immerhin geht es dabei auch darum, visuelle Geschichten zu erzählen. Sowohl die Textlänge, die eingesetzten Bilder als auch sonstige Elemente können auf viele verschiedene Weisen dargestellt und formatiert werden – und es wäre doch schade, wenn du eine tolle Grafik aufwendig bearbeitest, nur um dann festzustellen, dass sie in dein finales Design eigentlich gar nicht so wirklich passt.

Auch die Funktion des Mockups solltest du dir im Voraus überlegen: Soll es ein rein visuelles Konzept werden, um sich das Endprodukt besser vorstellen zu können? Oder sollen hier auch gleich Funktionen getestet werden? Bei der Gestaltung einer Website oder einer Landing Page könnte ein Mockup beispielsweise bereits klickfähig sein, um die Möglichkeit zu schaffen, dass sowohl der Programmierer als auch der Grafiker gleichzeitig an der Seite arbeiten. Zudem ist es auch einfacher für den Grafiker, die entsprechenden Elemente zu gestalten.

Je nachdem, wofür das Mockup genau benötigt wird, sollte es auch einen unterschiedlichen Detailgrad aufweisen. Ein Mockup für dich alleine kann beispielsweise mit Platzhaltern wie „Bild 1”, „Bild 2”, „Text Thema 1” oder „CTA-Fläche” auskommen, während ein Mockup, das von Team-Kollegen abgesegnet werden soll, wohl mehr Infos benötigt, um deine Intentionen klar zu machen. Textplatzhalter mit stichwortartigen Beschreibungen des geplanten Inhalts oder Bild-Platzhalter mit groben Ideen, was auf dem Bild zu sehen sein soll, sind hierbei beispielsweise hilfreich.

Web-Elemente wie umfangreiche Infografiken lassen sich als Mockup vorab gut gestalten. Hier sind zwei Vorlagen als Beispiele:

Wenn der Sinn und der notwendige Detailgrad erst mal feststehen, dann geht es daran, das eigentliche Mock-up zu kreieren.

Der wichtigste Grund dafür, überhaupt ein Mockup zu erstellen, ist jener, im Design flexibel zu bleiben. Insofern ist es auch am wichtigsten, alle Elemente, die sich noch (stark) ändern könnten, als Platzhalter zu gestalten, während Dinge, die bereits feststehen oder sehr leicht änderbar sind, schon in die (voraussichtlich) finale Version eingearbeitet werden können.

Ein gutes Beispiel für Zweiteres wären Farben: Geht es darum, ein Mockup für eine bestimmte Firma samt festgelegten Corporate Identity Farben zu erstellen, dann stehen diese schon fest und man sollte sie auch gleich in das Mockup einarbeiten. Andererseits können Farben generell mit wenigen Klicks angepasst werden (solange es nicht um komplizierte Farbverläufe und Ähnliches geht) – Platzhalter sind hierbei also in den allermeisten Fällen unnötig.

Bilder sind da schon eine andere Sache: Zum einen steht oft ein großer Pool aus möglichen Fotos, Illustrationen und mehr zur Auswahl, zum anderen müssen die einzelnen Bilder dann auch auf die schlussendliche Form getrimmt, entsprechend mit Effekten belegt und anderweitig bearbeitet werden. Das alles kostet Zeit und trägt nur unwesentlich dazu bei, das Look & Feel des Designs schon im Mockup zu zeigen. Platzhalter mit Beschreibungen wie „Bild Baum, Tiefenwirkung, Schlagschatten” bieten sich also zunächst besser an, während nur die finale Auswahl tatsächlich bearbeitet und an das Design angepasst wird.

Beispiele für Elemente, die du als Platzhalter anlegen solltest, sind demnach:

• Fotos und Illustrationen
• Diagramme
• Tabellen
• längere Textblöcke
• Call-to-Action-Schaltflächen
• Formulare
• Zeitlinien

Bei diesen beiden Vorlagen für Faltblätter-Broschüren können verschiedene Elemente ganz einfach ausgetauscht und beliebig bearbeitet werde:

Hast du erst einmal alle Elemente, die du für dein Design benötigst, beisammen, geht es daran, einen ersten Entwurf zu bauen.

Schiebe die Elemente hierfür einfach so lange hin und her oder skaliere sie, bis dir das prinzipielle Layout gefällt und du der Meinung bist, das sowohl die Informationsdichte wie auch die Anordnung der Informationen und der Lesefluss in deinem Design stimmen.

Vergiss dabei nicht: Ein Mockup soll dir dabei helfen, Zeit zu sparen, dich aber auch inspirieren. Sei in der Mockup-Phase deshalb ruhig mutig und probiere vollkommen unterschiedliche Varianten aus. Das Verschieben und Skalieren deiner Elemente kostet kaum Zeit, kann dir aber völlig neue Sichtweisen auf Probleme oder Möglichkeiten bieten, die du ohne diese visuelle Hilfe gar nicht erst gesehen hättest.

Mockups werden auch gerne bei größeren Print-Projekten wie Magazinen oder langen Berichten eingesetzt. Hier sind zwei Vorlagen, die dir bei der Planung helfen:

Wenn du ein Mockup für eine reine Drucksorte erstellst, dann kannst du diesen Punkt hier auslassen; geht es allerdings um ein Mockup für eine Website, Handy-App oder etwas ähnliches Interaktives, dann solltest du als Abschluss auch schon erste Funktionalitäten hinzufügen, beispielsweise Tooltips, die erscheinen, wenn man die Maus über bestimmte Flächen bewegt, Menüs, die ausklappen, wenn man Symbole anklickt, oder Formulare, die sich öffnen, wenn man Call-to-Action-Schaltflächen betätigt.

Der Sinn dahinter ist jener, in dem Mockup auch gleich zu sehen, ob beispielsweise Tooltips wichtige andere Elemente überlagern und deshalb anders angeordnet werden sollten, ob Menüs intuitiv gefunden und navigiert werden können, oder ob Formulare auf allen Bildschirmgrößen – vom Handy bis zum PC-Monitor – leserlich und sinnvoll dargestellt werden.

Online findest du eine ganze Reihe an verschiedenen Tools und Programmen (wie etwa Moqups, Mockingbird, Pencil, Wireframe.cc und mehr) die dir dabei helfen, interaktive Mockups zu erstellen, um so die Funktionalität und User Experience (UX) testen zu können.

Websites und Landing Pages werden gerne mit interaktiven Mockups vorgeplant. Hier ist eine schicke Design-Vorlage für dein Website-Mockup:

Dein Mockup ist soweit fertig – da versteht es sich von selbst, dass es auch genutzt werden sollte. Natürlich kannst du das Mockup einfach als Bauplan für dich selbst verwenden, es mit Partnern teilen, um ihr Feedback einzuholen, oder es als Vorlage an andere weitergeben, damit diese es weiterentwickeln und bei Bedarf anpassen können. Wir wollen dir hier aber auch noch ein paar Nutzungsmöglichkeiten mit auf den Weg geben, an die du mitunter noch gar nicht gedacht hast.

Zum einen könntest du dein Mockup als Quasi-User-Test verwenden: Sende dazu dein Mockup an Leute aus der geplanten Zielgruppe des fertigen Designs, die nichts mit dessen Gestaltung zu tun hatten, und frage sie, wo ihr Blick zuerst hinfällt, in welcher Reihenfolge sie die Elemente betrachten, welche Elemente ihnen besonders oder auch kaum auffallen oder welche Gefühle das grobe Layout bei ihnen auslöst. Die Antworten können dir dabei helfen, das fertige Design zu optimieren und potenzielle Probleme schon in frühen Projektphasen ausfindig zu machen, was dir wiederum viel Zeit (und Geld) sparen kann.

Zum anderen kannst du das Mockup aber auch als Eintrag in deinem Portfolio ablegen. Falls du beispielsweise als Designer für Apps arbeitest, könntest du eine ganze Reihe an schönen User-Interface-Mockups erstellen und diese deinen potenziellen Kunden dann in einer Mappe vorlegen. So können sie sich schon vor dem Beginn deiner Arbeit eine ungefähre Vorstellung davon machen, welche Ideen du hast und wie du diese umsetzt. Und das auch von bislang noch nicht fertiggestellten (und somit präsentierbaren) Projekten. Das erspart dir dann nicht nur Arbeit beim aktuellen Projekt, sondern auch bei allen zukünftigen Projekten.

Auch Veranstaltungsprogramme lassen sich im Voraus mithilfe von Mockups gut planen, vor allem falls noch nicht alles sofort feststeht:

Wie dir vielleicht aufgefallen ist, haben wir nun schon öfter darauf hingewiesen, dass Mockups auch als Vorlagen genutzt werden können. Umgekehrt kannst du aber natürlich auch Vorlagen für Designs zum Mockup umfunktionieren. Und wo findest du tolle Vorlagen, fragst du? Natürlich direkt hier in Canva.

Je nachdem, was du planst, kannst du dich hier einfach durch zahlreiche Vorlagen stöbern und diese dann als Mockups nutzen, bei denen wir für dich sogar schon ein paar Schritte weitergegangen sind, indem wir statt leerer Flächen, richtige Bilder und Texte eingesetzt haben. Solltest du einzelne (oder alle) Elemente behalten wollen, kannst du das ohne Weiteres tun und sparst dir sogar noch mehr Arbeit als mit einem von Grund auf selbst erstellten Mockup.

Manche Design-Elemente in den professionellen Canva-Vorlagen beinhalten übrigens kostenpflichtige Elemente, wie etwa Illustrationen oder Fotos. Diese kannst du kaufen oder gegen eigene bzw. andere Bilder ersetzen.

Hier findest du gleich zwei schicke Vorlagen, die sich perfekt als Mockups für Visitenkarten eignen:

Mit den vielen Canva-Vorlagen für alle möglichen Designs und unseren Tipps oben sollte es ein Leichtes für dich sein, im Nu deine eigenen Mockups zu erstellen. Möchtest du dennoch ganz bei Null beginnen, kannst du aber natürlich auch einfach unser praktisches Canva Design-Tool starten und dann mit generischen Platzhaltern oder auch den Bildern, Schriftarten und mehr in unserer Datenbank arbeiten. Wir wünschen dir in jedem Fall viel Spaß beim Planen und Gestalten!