Design-Werkzeuge

Wireframe, Mockup, Prototyp: Die Unterschiede erklärt

Struktur, Aussehen, Verhalten: was die drei Entwurfsstufen unterscheidet und welche Sie für Ihr Projekt wirklich brauchen.

Redaktion PlanetPixel · Stand: 26. Oktober 2026

Wireframe, Mockup und Prototyp sind drei Entwurfsstufen, die vor der Entwicklung einer Website oder App stehen. Das Wireframe klärt die Struktur, das Mockup das Aussehen, der Prototyp das Verhalten. Wer die Begriffe auseinanderhält, kann im Projekt gezielter Feedback geben und vermeidet, dass über Farben diskutiert wird, bevor klar ist, welche Inhalte überhaupt auf die Seite gehören. Einen Überblick über passende Programme bietet die Rubrik Werkzeuge.

Die drei Stufen im Vergleich

	Wireframe	Mockup	Prototyp
Zentrale Frage	Was steht wo?	Wie sieht es aus?	Wie funktioniert es?
Detailgrad	gering	hoch	gering bis hoch
Farben, Schriften, Bilder	keine oder Platzhalter	final oder nahezu final	je nach Stufe
Interaktion	keine	keine	klickbar
Aufwand	gering	mittel	mittel bis hoch
Typisches Werkzeug	Papier, Whiteboard, Design-Software	Design-Software	Design-Software, auch Code
Feedback zu	Inhalten, Reihenfolge, Gewichtung	Farben, Bildsprache, Typografie	Abläufen, Verständlichkeit, Bedienung

Dieselbe Seite in drei Stufen: als Wireframe nur Struktur, als Mockup mit Farben und Form, als Prototyp mit einer Verbindung, die beim Klick zur nächsten Ansicht führt.

Wireframe: die Struktur

Ein Wireframe ist der Grundriss einer Seite. Es zeigt, welche Bereiche es gibt, in welcher Reihenfolge sie stehen und wie viel Platz sie bekommen: Kopfzeile, Startbereich, Inhaltsblöcke, Formular, Footer. Bilder werden als durchgestrichene Kästen dargestellt, Texte als graue Linien oder als erste echte Formulierungen.

Wireframes sind bewusst schlicht. Das hat einen praktischen Grund: Sobald Farben und Fotos im Spiel sind, dreht sich die Diskussion um Geschmack. Im Wireframe-Stadium sollen andere Fragen geklärt werden. Steht das Wichtigste oben? Fehlt ein Inhalt? Ist die Hauptaktion sichtbar?

Ein Tipp: Arbeiten Sie früh mit echten Inhalten statt Blindtext. Ob eine Überschrift in eine Zeile passt oder ein Abschnitt drei oder zehn Absätze braucht, verändert das Layout stärker als jede Farbe.

Mockup: das Aussehen

Ein Mockup zeigt, wie die Seite später aussehen soll: mit Farben, Schriften, Bildern, Abständen und Icons. Es ist statisch, also ein Bild der Seite, das sich nicht bedienen lässt. Mockups entstehen meist für die wichtigsten Seitentypen, etwa Startseite, Übersichtsseite, Artikel und Kontaktseite, jeweils für Desktop und Smartphone.

Der Begriff ist doppeldeutig. Im Grafikdesign versteht man unter Mockup auch die Präsentation eines Entwurfs in realistischer Umgebung, etwa ein Logo auf einer Tasse oder eine Website auf einem Laptop-Bildschirm. Im Webdesign-Prozess ist mit Mockup in der Regel der statische Gestaltungsentwurf gemeint.

Aus den Mockups lassen sich wiederkehrende Regeln ableiten, etwa Farbwerte, Schriftgrößen und Button-Stile. Diese Regeln werden später in einem Styleguide festgehalten.

Prototyp: das Verhalten

Ein Prototyp ist ein Entwurf, den man bedienen kann. Klickt man auf einen Button, öffnet sich die nächste Ansicht, ein Menü klappt auf oder ein Formular zeigt eine Fehlermeldung. Prototypen gibt es in allen Detailstufen:

Papierprototyp: gezeichnete Bildschirme, die eine Person beim Test von Hand austauscht. Schnell und überraschend aufschlussreich.
Klickbarer Wireframe-Prototyp: graue Entwürfe, die verlinkt sind, um Abläufe zu prüfen.
High-Fidelity-Prototyp: fertiges Design mit Übergängen und Animationen, nah am Endprodukt.
Code-Prototyp: eine echte, aber vereinfachte Umsetzung im Browser, sinnvoll bei technisch anspruchsvollen Funktionen.

Der große Vorteil von Prototypen: Sie lassen sich mit Nutzern testen, bevor Entwicklungsaufwand entsteht. Schon wenige Testpersonen, die typische Aufgaben lösen, decken oft die größten Verständnisprobleme auf.

Der übliche Ablauf im Projekt

Ziele und Inhalte sammeln: Was soll die Website leisten, welche Seiten braucht sie?
Sitemap erstellen: die Struktur aller Seiten als Baum.
Wireframes der wichtigsten Seitentypen: Struktur klären und abstimmen.
Moodboard und Stilrichtung: Farben, Bildsprache, Schriften sammeln, wie im Artikel Moodboard erstellen beschrieben.
Mockups: das Design auf die Wireframes anwenden.
Prototyp: zentrale Abläufe klickbar machen und testen.
Entwicklung: Umsetzung im Code, idealerweise mit einem Styleguide als Grundlage.

In der Praxis verläuft das selten streng nacheinander. Erkenntnisse aus dem Prototyp-Test führen oft zurück zum Wireframe. Das ist gewollt, denn Änderungen sind in frühen Stufen am günstigsten.

Welche Stufe brauchen Sie?

Kleine Website mit wenigen Seiten: Wireframe-Skizzen und ein Mockup von Startseite und einer Unterseite reichen meist.
Relaunch einer bestehenden Website: Wireframes helfen, die Struktur neu zu denken. Mockups machen das neue Design greifbar.
Shop, Buchungsstrecke oder Formularprozess: Ein Prototyp lohnt sich, weil Fehler im Ablauf später teuer werden.
App oder Webanwendung: Prototypen sind hier Standard, oft in mehreren Durchgängen.

Wer eine Website beauftragt, sollte im Angebot nachlesen, welche Entwurfsstufen enthalten sind und wie viele Korrekturschleifen vorgesehen sind. Hinweise dazu gibt der Ratgeber Webdesigner beauftragen.

Mehrere Bildschirmgrößen mitdenken

Websites werden auf Smartphones mindestens so oft aufgerufen wie am Desktop. Wireframes und Mockups sollten deshalb von Anfang an mindestens eine schmale und eine breite Ansicht zeigen. Dabei wird schnell sichtbar, welche Inhalte auf dem Smartphone nach unten rutschen, wo das Menü hinter einer Schaltfläche verschwindet und ob die Hauptaktion noch im ersten Bildschirm steht. Wer nur die Desktop-Ansicht abstimmt, verschiebt diese Entscheidungen in die Entwicklung, wo sie unter Zeitdruck getroffen werden.

Eine praktische Reihenfolge ist, die schmale Ansicht zuerst zu entwerfen. Der knappe Platz zwingt dazu, Prioritäten zu setzen, und die breite Ansicht entsteht dann als Erweiterung statt als Ausgangspunkt.

Gutes Feedback in jeder Stufe

Entwürfe werden besser, wenn Rückmeldungen zur jeweiligen Stufe passen. Hilfreiche Fragen sind:

Beim Wireframe: Fehlt ein Inhalt, den Besucher erwarten? Stimmt die Reihenfolge? Ist klar, was die wichtigste Aktion ist?
Beim Mockup: Passt die Wirkung zur Zielgruppe? Sind Texte gut lesbar und Kontraste ausreichend? Wirken Bilder und Icons einheitlich?
Beim Prototyp: Finden Testpersonen ohne Hilfe zum Ziel? Wo zögern sie, wo klicken sie daneben, wo fragen sie nach?

Formulieren Sie Rückmeldungen als Beobachtung oder Problem statt als fertige Lösung. “Ich finde die Telefonnummer nicht” hilft mehr als “Macht die Telefonnummer rot”. So bleibt Raum für die beste Lösung, und die Diskussion dreht sich um Besucher statt um persönlichen Geschmack.

Werkzeuge

Für alle drei Stufen gibt es passende Programme, aber kein Werkzeug ist Pflicht:

Papier, Stift, Whiteboard: ideal für die ersten Wireframes und für Workshops.
Design-Software wie Figma oder Penpot: deckt Wireframe, Mockup und Prototyp in einer Datei ab. Wie der Einstieg in Figma gelingt, zeigt der Artikel Figma für Einsteiger.
Spezialisierte Wireframe-Werkzeuge: mit absichtlich skizzenhaftem Stil, der zeigt, dass es noch nicht um Design geht.
Präsentationsprogramme: für einfache klickbare Abläufe ausreichend, wenn nichts anderes zur Hand ist.

Häufige Missverständnisse

“Das Wireframe sieht ja noch gar nicht gut aus.” Das soll es auch nicht. Bewertet wird die Struktur.
“Das Mockup ist fertig, also ist die Website fast fertig.” Ein Mockup ist ein Bild. Technik, Inhalte, mobile Ansichten und Sonderfälle kommen noch.
“Ein Prototyp muss perfekt sein.” Ein grober Prototyp, der früh getestet wird, bringt meist mehr als ein perfekter, der zu spät kommt.
“Wir überspringen die Wireframes, das spart Zeit.” Oft verschiebt das die Strukturdiskussion nur in die Mockup-Phase, wo Änderungen aufwendiger sind.

Wireframe, Mockup und Prototyp sind keine Formalitäten, sondern Werkzeuge, um die richtigen Fragen zur richtigen Zeit zu stellen. Welche Gestaltungsprinzipien in jeder Stufe gelten, beschreiben die Grundlagen guter Gestaltung.

Häufige Fragen

Fragen und Antworten

Muss man alle drei Stufen durchlaufen?

Nein. Bei kleinen Websites reichen oft Wireframes und ein Mockup der wichtigsten Seiten. Prototypen lohnen sich vor allem, wenn Abläufe komplex sind, etwa Buchungsstrecken, Konfiguratoren oder Apps, und vor der Entwicklung mit Nutzern getestet werden sollen.

Sind Wireframes immer grau und schwarz-weiß?

In der Regel ja. Der Verzicht auf Farben und echte Bilder ist Absicht: Er lenkt die Diskussion auf Struktur und Inhalte statt auf Geschmacksfragen. Einzelne Akzente, etwa zum Markieren der Hauptaktion, sind trotzdem möglich.

Was bedeutet Low Fidelity und High Fidelity?

Fidelity beschreibt, wie nah ein Entwurf am Endprodukt ist. Low Fidelity heißt grob und schnell, etwa eine Skizze auf Papier. High Fidelity heißt detailliert und realistisch, etwa ein klickbarer Prototyp mit echtem Design und Inhalt. Dazwischen gibt es fließende Übergänge.

Mit welchem Programm erstellt man Wireframes?

Für den Anfang reichen Papier und Stift. Digital eignen sich Design-Werkzeuge wie Figma oder Penpot, die Wireframes, Mockups und Prototypen in einem Programm abdecken. Es gibt auch spezialisierte Wireframe-Werkzeuge mit bewusst skizzenhaftem Stil.

Passt dazu