Das Bühnenbild steht. Die Kostüme sitzen. Das Licht trifft genau dort auf, wo es soll. Es sieht aus wie die Premiere. Es riecht fast danach.

Nur: Im Saal sitzt niemand.

Und wenn die Hauptdarstellerin im zweiten Akt über die Schwelle stolpert, hält der Regisseur die Probe an. Es kostet nichts. Man rückt die Schwelle einen halben Meter zur Seite, und weiter geht’s.

Das ist eine Generalprobe. Und sie ist ziemlich genau das, was ein Mockup für ein Design ist.

Ein Mockup zeigt das spätere Design detailgetreu, bleibt aber statisch und dient der visuellen Prüfung vor der Umsetzung.

Was ist ein Mockup?

Ein Mockup ist die Generalprobe eines Designs. Eine statische, detailgetreue Vorschau darauf, wie das fertige Produkt einmal aussehen wird: Farben, Schriften, Abstände, Bilder, Beschriftungen, alles am richtigen Platz. Es sieht aus wie das Endergebnis. Es ist aber keines.

Denn ein Mockup funktioniert nicht. Man kann nicht draufklicken, nichts öffnet sich, kein Knopf reagiert. Es ist zum Anschauen da, nicht zum Benutzen. Genau darin liegt sein Wert: Es zeigt das Wie des Aussehens, bevor jemand eine Zeile funktionierenden Code schreibt oder eine Druckmaschine anwirft.

Im Webdesign, in der App-Entwicklung, im Print, im Produktdesign: Überall taucht das Mockup an derselben Stelle im Prozess auf. Nach der groben Idee. Vor der teuren Umsetzung. In dem Moment, in dem Korrekturen noch fast umsonst sind.

Wireframe, Mockup, Prototyp: drei Stufen, ein altes Missverständnis

Eine kleine Geschichte aus der Branche, weil sie den Unterschied besser erklärt als jede Definition.

Eine bekannte Wireframe-Software hieß über neun Jahre lang „Balsamiq Mockups“. Bis der Gründer beim großen Rewrite eingestehen musste: Das Tool baut gar keine Mockups. Es baut Wireframes. Er hatte als UX-Neuling den Unterschied schlicht nicht gekannt. Also taufte er die neue Version um und nannte sie Balsamiq Wireframes, den Namen, den sie laut ihm von Anfang an hätte tragen sollen.

Wenn selbst die Profis die Begriffe verwechseln, lohnt es sich, einmal sauber zu trennen. Bleiben wir im Theater.

Der Wireframe ist die Leseprobe am Tisch. Die Schauspielerinnen und Schauspieler sitzen im Pulli da und sprechen ihren Text. Es geht nur ums Gerüst: Wer steht wo, wer sagt was, in welcher Reihenfolge. Keine Kostüme, keine Farben, kein Licht. Graue Kästen, Platzhalterstriche, nackte Struktur. Schnell gemacht, schnell verworfen.

Das Mockup ist die Generalprobe. Jetzt sitzt alles. Kostüme, Bühne, Beleuchtung. Es sieht aus wie die Premiere, fühlt sich aber noch nicht so an, weil es still bleibt. Man schaut zu und urteilt: Passt die Stimmung? Stimmt der Ton der Farben? Erschlägt die eine Szene alle anderen?

Der Prototyp ist die Vorpremiere mit Testpublikum. Zum ersten Mal darf jemand wirklich mitspielen. Man klickt, wischt, scrollt, und sieht, ob die Geschichte trägt, wenn echte Menschen sie erleben. Der Prototyp ist interaktiv. Hier geht es nicht mehr ums Aussehen, sondern ums Verhalten.

Drei Stufen, eine Richtung: von der Struktur über das Aussehen zur Erfahrung. Wer sie durcheinanderwirft, diskutiert in der Leseprobe über Lippenstiftfarben. Verschwendete Zeit.

Die zwei Gesichter des Wortes „Mockup“

Hier wird es interessant, denn das Wort führt ein Doppelleben. Wer „Mockup“ googelt, sucht eine von zwei sehr unterschiedlichen Dingen.

Da ist erstens das Screen-Mockup aus der digitalen Welt, von dem bisher die Rede war: die detailgetreue Vorschau einer Website oder App.

Und da ist zweitens das Produkt- oder Print-Mockup: eine Schablone, die ein Design in seine spätere Umgebung setzt. Das Logo auf der Kaffeetasse. Der Schriftzug auf dem T-Shirt. Das Etikett auf der Flasche. Das Plakat an der Bushaltestelle. Designerinnen und Designer benutzen dafür fotorealistische Vorlagen, in die sie ihren Entwurf einfügen, damit der Kunde sieht, wie die Sache in der echten Welt wirkt.

Verschieden in der Form, identisch im Kern. Beide zeigen einer Sache ihre künftige Haut, bevor jemand teuer in Vorleistung geht. Die Tasse muss nicht gebrannt, die App nicht programmiert sein. Man sieht trotzdem schon, ob es zündet.

Wofür sich der Aufwand lohnt

Eine Generalprobe kostet einen Abend. Eine missglückte Premiere kostet die ganze Spielzeit.

Genau das ist die Rechnung hinter dem Mockup. Wer ein Designproblem im Mockup entdeckt, schiebt ein paar Pixel. Wer es erst im fertigen Produkt entdeckt, reißt mühsam etwas ein, das schon stand. Je später der Fehler auffällt, desto teurer wird seine Korrektur. Das gilt für Bühnen wie für Bildschirme.

Dazu kommt etwas, das man leicht unterschätzt: Ein Mockup spricht eine Sprache, die alle verstehen. Eine Entwicklerin liest einen Wireframe wie eine Partitur. Die Kundin, die das Projekt bezahlt, sieht darin nur graue Kästen und Verwirrung. Ein Mockup dagegen zeigt ihr ein Bild, das sie sofort begreift, ganz ohne technisches Vorwissen. Aus „Ich glaube, wir reden über dasselbe“ wird „Ja, genau so.“

Was würde es Ihr nächstes Projekt kosten, einen Fehler zu finden, nachdem alles schon gebaut ist?

Womit man Mockups baut

Die Werkzeuglandschaft hat sich in den letzten Jahren spürbar verschoben. Wer hier mit veraltetem Wissen plant, plant am Markt vorbei.

Figma ist heute der Standard. Cloudbasiert, im Browser, mehrere Leute arbeiten gleichzeitig an derselben Datei. Für UI- und Screen-Mockups führt für die meisten Teams kaum ein Weg daran vorbei. Sketch bleibt eine starke Alternative für alle, die auf dem Mac zu Hause sind. Wer es offen und kostenlos mag, schaut sich Penpot an.

Ein wichtiger Hinweis, weil er in vielen älteren Artikeln im Internet noch falsch steht: Adobe XD wird oft als beliebtes Mockup-Tool genannt. Das stimmt so nicht mehr. Adobe hat XD bereits 2023 in den sogenannten Wartungsmodus geschickt. Seither gibt es keine neuen Funktionen, das Tool wird Neukunden nicht mehr als Einzelprodukt verkauft. Im Rennen um die Profis hat Figma gewonnen. Wer heute neu einsteigt, lernt sinnvollerweise nicht XD.

Für Produkt- und Print-Mockups gelten andere Regeln. Hier arbeitet man mit Photoshop oder Affinity Photo und sogenannten Smart-Object-Vorlagen, in die sich das eigene Motiv mit einem Klick einsetzen lässt. Daneben gibt es zahlreiche Online-Generatoren, die fertige Szenen anbieten. Für einfache, schnelle Sachen, etwa für Social Media, reicht oft auch ein Tool wie Canva.

Und Balsamiq? Das Werkzeug aus der Geschichte oben ist hervorragend, aber eben für Wireframes, nicht für detailgetreue Mockups. Der richtige Name verrät den richtigen Einsatz.

Wie ein gutes Mockup entsteht

Der Weg ist kürzer, als die meisten denken, wenn man die Reihenfolge respektiert.

Zuerst das Ziel klären. Wofür ist das Ding da, was soll der Mensch davor tun? Dann die Struktur, im Zweifel als schneller Wireframe. Erst danach kommt die Haut drauf: Farben, Schriften, Bilder. Diese Reihenfolge nicht umzudrehen ist die halbe Miete.

Ein Tipp, der mehr wert ist, als er klingt: Echte Inhalte statt Blindtext. „Lorem ipsum“ und freundliche Platzhalterbilder schmeicheln jedem Entwurf. Sie verstecken aber genau die Probleme, die später wehtun. Die echte Überschrift ist dreimal so lang und sprengt das Layout. Der echte Produktname klingt sperrig. Die echten Bilder sind dunkel und unruhig. Ein Mockup mit echtem Material ist ehrlicher, und ehrlich ist hier ein Kompliment.

Dann früh Feedback einholen und überarbeiten. Ein Mockup ist kein Denkmal. Es ist Knetmasse, solange es eines bleiben darf.

Die teuersten Fehler

Drei Stolpersteine tauchen immer wieder auf, und jeder kostet später.

Der erste: zu früh schön machen. Wer Farben justiert, bevor die Struktur steht, poliert eine Bühne, die vielleicht noch umgebaut wird. Reihenfolge schlägt Eile.

Der zweite: Feedback weghören. Design ist kein Monolog, sondern eine Folge von Schleifen. Wer die Rückmeldung der Kollegin, des Kunden, der späteren Nutzer überhört, baut sehenden Auges am Bedarf vorbei.

Der dritte: nur eine Größe denken. Ein Bildschirm ist nicht der Bildschirm. Was am großen Monitor souverän wirkt, kann auf dem Handy zerbröseln. Ein Mockup, das nicht mitdenkt, wie das Design auf kleinen Geräten atmet, ist eine Generalprobe nur für die erste Reihe.

Worauf es ankommt

Ein Mockup ist der billige Ort, an dem ein Design scheitern darf. Die Premiere ist der teure.

Wer diesen einen Abend ernst nimmt, an dem alles schon aussieht wie fertig und doch nichts in Stein gemeißelt ist, spart sich später die wirklich unangenehmen Korrekturen. Nicht weil das Mockup perfekt sein muss. Sondern weil es der letzte Moment ist, in dem Irren noch nichts kostet.

Die Frage ist also nicht, ob Sie sich die Generalprobe leisten können.

Sondern, ob Sie sich die Premiere ohne sie leisten wollen.