- Ein Wireframe zeigt nur Struktur und Inhaltshierarchie, ohne Farben oder Typografie.
- Ein Mockup ist das ausgearbeitete visuelle Design als statisches Bild, kein Klick funktioniert.
- Ein Prototyp simuliert echte Interaktion, damit Usability-Probleme vor der Entwicklung sichtbar werden.
- Die meisten Mittelstandsprojekte brauchen Wireframes und Mockups, aber keinen Prototypen. Der lohnt sich erst bei mehrstufigen Prozessen oder ungewöhnlichen Interaktionsmustern.
Im Gespräch mit einer Webagentur fallen diese drei Begriffe fast immer. Manchmal meint die Agentur damit dasselbe, manchmal sehr Verschiedenes. Wer nicht nachfragt, unterschreibt ein Angebot, ohne zu wissen, was tatsächlich drin ist. Dieser Ratgeber erklärt, was hinter den Begriffen steckt, warum die Reihenfolge zählt und wann welcher Schritt nötig ist.
Warum die drei Begriffe so häufig verwechselt werden
Wireframe, Mockup und Prototyp beschreiben drei verschiedene Phasen im Designprozess, die auf dasselbe Ziel hinarbeiten: eine Website oder App zu bauen, die funktioniert. Jede Phase beantwortet eine andere Frage. Der Wireframe klärt, was wo steht. Das Mockup zeigt, wie es aussieht. Der Prototyp prüft, ob die Interaktion so läuft, wie gedacht.
Verwechslungen entstehen, weil manche Agenturen die Schritte zusammenlegen, andere sie überspringen, und einige Werkzeuge wie Figma alle drei in einer Datei verwalten. Im Angebot steht dann „Konzeption und Design“, was genau darunter fällt, bleibt offen.
Für Sie als Auftraggeber ist das relevant, weil jeder Schritt Zeit kostet und Fehler, die früh erkannt werden, deutlich günstiger zu korrigieren sind als späte. Jakob Nielsen von der Nielsen Norman Group hat diesen Zusammenhang konkret beziffert: Korrekturen vor der Programmierung kosten rund hundert Mal weniger als Änderungen nach Abschluss der Entwicklung.
Wireframe: Struktur ohne Gestaltung
Ein Wireframe sieht aus wie ein technischer Grundriss. Rechtecke stehen für Bilder, Linien für Fließtext, beschriftete Boxen für Navigation und Buttons. Der bewusste Verzicht auf visuelles Design ist kein Mangel, sondern Methode. Wer sich in dieser Phase noch nicht von Farben und Schriften ablenken lässt, trifft bessere Strukturentscheidungen.
Die Interaction Design Foundation beschreibt Wireframes als grundlegende visuelle Darstellungen einer Benutzeroberfläche, die Struktur und Layout einer Seite oder App skizzieren. Designdetails wie Farben, Schriften oder Bilder bleiben dabei bewusst außen vor. Das Werkzeug macht deutlich, wie Inhalte auf der Seite priorisiert werden: Was steht oben? Wie viel Platz bekommt die Navigation? Wo liegt der primäre Call-to-Action?
Lo-Fi und Hi-Fi: Zwei Varianten
In der Praxis unterscheidet man zwischen Low-Fidelity- und High-Fidelity-Wireframes. Ein Lo-Fi-Wireframe ist eine grobe Skizze, manchmal handgezeichnet, die grundlegende Strukturentscheidungen festhält. Ein Hi-Fi-Wireframe bildet bereits genaue Proportionen, Abstände und realistische Inhaltsmengen ab. Letztere werden eingesetzt, wenn Entwickler direkt danach arbeiten sollen.
Der entscheidende Vorteil der Wireframe-Phase: Eine strukturelle Änderung kostet hier wenig. Wird dieselbe Frage erst auf Mockup-Ebene gestellt, muss aufwendig ausgearbeitetes visuelles Design mit angepasst werden. Das ist teurer und verlangsamt das Projekt.
Wann lohnt sich ein Wireframe?
Wireframes zahlen sich bei Seiten aus, die strukturell anspruchsvoll sind: Produktdetailseiten, Checkout-Prozesse, Kategorieseiten mit Filterfunktion, mehrstufige Formulare. Eine einfache, textbasierte Landingpage mit einem klaren Handlungsaufruf braucht dagegen häufig kein formales Wireframe. Eine kurze schriftliche Inhaltsbeschreibung reicht dort oft aus.
Für Ihr Website-Briefing ist es hilfreich, die wichtigsten Seitentypen bereits vorab zu benennen. So weiß die Agentur, für welche Seiten ein Wireframe überhaupt nötig ist.
Mockup: Das visuelle Design als statisches Bild
Das Mockup ist das zentrale Verständigungsmittel zwischen Agentur und Auftraggeber. Hier sehen Sie zum ersten Mal, wie Ihre Website tatsächlich aussehen wird. Typischerweise liegt es als PNG oder PDF vor. Manche Agenturen liefern klickbare PDFs mit Sprungmarken, bei denen man zwischen Seiten wechseln kann, aber echte Interaktionslogik steckt nicht dahinter.
Ein professionelles Mockup enthält mindestens zwei Ansichten: Desktop und Mobil. Responsive Design verändert das Layout grundlegend. Eine Navigationsstruktur, die auf dem Desktop horizontal nebeneinander liegt, wird auf dem Smartphone zum Hamburger-Menü, und das beeinflusst Platzierung, Schriftgröße und die Reihenfolge der Inhalte.
Was ein Mockup leisten muss
Im Mockup werden Designentscheidungen sichtbar, die Sie beurteilen können, auch ohne technischen Hintergrund. Dazu gehört auch die Barrierefreiheit: Die Web Content Accessibility Guidelines (WCAG 2.2) fordern für normalen Fließtext ein Kontrastverhältnis von mindestens 4,5:1 zwischen Schrift- und Hintergrundfarbe, für große Schrift mindestens 3:1. Diese Werte lassen sich im Mockup prüfen und korrigieren, bevor der Entwickler die erste Zeile CSS schreibt. Wer das überspringt, riskiert nachträgliche Korrekturen am live gegangenen Design.
Im Mockup lässt sich prüfen, ob das Farbschema zum Markenprofil passt, ob die Schriftgröße lesbar ist und ob der primäre Button ausreichend hervorgehoben wird. Für die meisten mittelständischen Website-Projekte ist das Mockup der letzte Schritt vor der Entwicklung.
Wann reicht ein Mockup aus?
Wenn das Nutzungsverhalten vorhersehbar ist und keine ungewöhnlichen Interaktionsmuster vorliegen, braucht man keinen Prototypen. Eine Unternehmenswebsite mit fünf bis zehn Seiten, ein Portfolio, eine lokale Dienstleisterseite: Hier reicht ein Wireframe für die anspruchsvollsten Seiten und ein Mockup für alle relevanten Seitentypen in Desktop und Mobil. Was eine solche Website insgesamt leisten muss, zeigt der Ratgeber Was eine Unternehmenswebsite leisten muss.
Prototyp: Wenn Klicken möglich sein muss
Das Mockup zeigt, wie etwas aussieht. Der Prototyp zeigt, wie es sich verhält. Nutzer können Navigationspfade durchlaufen, Fehlerabläufe auslösen und den zeitlichen Fluss einer Interaktion erleben. Das zeigt Probleme, die im statischen Bild verborgen bleiben.
Ein konkretes Beispiel: Eine dreistufige Checkout-Sequenz wirkt im Mockup übersichtlich. Im Prototyp zeigt sich, dass Nutzer nach Schritt zwei nicht erkennen, wie viele Schritte noch folgen, weil der Fortschrittsbalken zu klein ist. Das ist ein echter Usability-Fehler, und er kostet in der Entwicklung deutlich mehr zu beheben als im Prototyp.
High-Fidelity vs. Low-Fidelity Prototypen
Die Nielsen Norman Group beschreibt Prototyp-Fidelity als Zusammenspiel von drei Dimensionen: Interaktivität (von nicht klickbar bis vollständig navigierbar), Visuals (von Skizze bis Live-Optik) und Inhalt (von Platzhaltern bis realen Texten). Ein Low-Fidelity-Prototyp kann ein Papier-Modell sein, bei dem ein Teammitglied die Systemreaktion manuell simuliert. Das klingt improvisiert, funktioniert aber für frühe Validierungen erstaunlich gut.
Ein High-Fidelity-Prototyp in Figma oder Adobe XD sieht dagegen aus wie die fertige Website. Klicks lösen animierte Übergänge aus, Fehlermeldungen erscheinen an der richtigen Stelle. Dieser Typ ermöglicht realistische Nutzertests, bei denen die Testpersonen vergessen, dass sie noch kein echtes Produkt bedienen.
Wie viele Testpersonen braucht man?
Für qualitative Usability-Tests empfiehlt die Nielsen Norman Group fünf Testpersonen als Standard. Der Erkenntnisgewinn pro zusätzlicher Person sinkt schnell, während die Kosten linear steigen. Mit fünf Personen werden die meisten schwerwiegenden Probleme gefunden. Wer mehr Budget hat, sollte lieber mehrere separate Studien durchführen als eine einzige Studie mit dreißig Teilnehmern.
Wann lohnt sich ein Prototyp?
Ein Prototyp rechnet sich, wenn das Projekt eines dieser Merkmale hat:
- Onlineshop mit angepasstem Checkout-Prozess oder Produktkonfigurator
- Buchungsstrecken und mehrstufige Formulare
- Filter- und Suchoberflächen mit dynamischen Inhalten
- Vorhaben, bei denen vor Entwicklungsbeginn ein echter Nutzertest stattfinden soll
Für eine klassische Unternehmenswebsite oder einen Standardshop ohne eigene Checkout-Logik ist der Prototyp-Aufwand meist nicht gerechtfertigt. Was ein vollständiges Website-Projekt von der Konzeption bis zum Launch umfasst, zeigt der Ratgeber Ein Website-Projekt von A bis Z.
Die drei Artefakte im Vergleich
| Artefakt | Detailgrad | Zweck | Wann sinnvoll |
|---|---|---|---|
| Wireframe (Lo-Fi) | Grob, schematisch, keine Farben | Struktur und Inhaltshierarchie klären | Frühe Konzeptionsphase, schnelle Iteration |
| Wireframe (Hi-Fi) | Präzise Proportionen, reale Inhaltsmengen, noch keine Farben | Spezifikation für Entwickler | Wenn Entwickler direkt danach bauen sollen |
| Mockup | Pixelgenaues Layout, echte Farben und Schriften, statisch | Visuelles Design zur Freigabe und Abstimmung | Vor der Entwicklung, für alle Projekte |
| Prototyp (Lo-Fi) | Papier oder statische Screens, Interaktion wird manuell simuliert | Frühe Validierung mit echten Nutzern | Wenn Grundstruktur und Flows geprüft werden sollen |
| Prototyp (Hi-Fi) | Klickbar, animiert, sieht wie finale Website aus | Realistischer Nutzertest vor der Entwicklung | Komplexe Interaktionen, Checkout, Konfiguratoren |
Welche Kombination passt zu welchem Projekt?
Kein Projekt muss alle Stufen durchlaufen. Die richtige Kombination hängt von Komplexität, Budget und dem Risiko ab, das Sie bei einer Fehlentwicklung tragen wollen.
Einfache Unternehmenswebsite (5 bis 10 Seiten)
Wireframe für die zwei bis drei strukturell anspruchsvollsten Seiten, Mockup für alle relevanten Seitentypen in Desktop und Mobil. Ein Prototyp ist nicht nötig. Der Festpreis-Ratgeber erklärt, welche dieser Leistungsbausteine typischerweise im Angebot enthalten sind.
Onlineshop mit Standard-Checkout
Wireframe für Kategorie-, Produkt- und Checkout-Seite. Mockup für alle definierten Templates in Desktop und Mobil. Ein Prototyp für den Checkout-Prozess ist sinnvoll, wenn die Nutzungsführung von der Norm abweicht oder die Conversion-Rate ein kritisches Ziel ist.
Komplexe Webanwendung oder Buchungsplattform
Alle drei Stufen vollständig, ergänzt um einen Nutzertest auf Prototyp-Basis vor Entwicklungsbeginn. Je später ein Strukturfehler entdeckt wird, desto teurer ist die Korrektur.
Relaunch eines bestehenden Projekts
Hier lohnt es sich, erst den Ist-Zustand zu analysieren, bevor Wireframes entstehen. Welche Seiten funktionieren gut, welche nicht? Ein Wireframe auf Basis der falschen Struktur löst das eigentliche Problem nicht.
Ein Beispiel aus der Praxis
In einem Projekt plante ein mittelständisches Unternehmen einen Onlineshop mit integriertem Konfigurator, über den Kunden Produkte aus mehreren Variablen zusammenstellen und direkt bestellen sollten. Die Agentur startete direkt mit dem Mockup, weil das Design unter Zeitdruck stand.
Nach drei Wochen Entwicklungszeit zeigte sich beim internen Test, dass der Konfigurationsfluss nicht funktionierte: Nutzer sprangen zurück an den Anfang, anstatt zur nächsten Variablen zu gelangen, weil die Schaltflächen missverständlich beschriftet waren. Die Korrektur kostete zwei Entwicklertage, weil Logik und Layout gemeinsam geändert werden mussten.
Ein klickbarer Prototyp mit einem halben Tag Aufwand hätte diesen Fehler vor dem ersten Entwicklertag sichtbar gemacht. Diese Frage gehört beim nächsten Projekt ins Briefing: Ist eine Prototyp-Phase geplant, und was umfasst sie genau?
Was Sie vor dem Gespräch mit der Agentur klären sollten
Diese Fragen gehören vor den Vertragsabschluss, nicht erst nach der ersten Präsentation.
- Werden Wireframes erstellt, oder beginnt das Projekt direkt mit dem visuellen Design?
- Werden Lo-Fi- oder Hi-Fi-Wireframes geliefert, und für welche Seitentypen?
- Wie viele Seitentypen werden als Mockup ausgearbeitet?
- Sind Desktop- und Mobilansicht im Mockup enthalten?
- Gibt es eine Prototyp-Phase, und ist sie im Angebot enthalten?
- Falls ein Prototyp geplant ist: Lo-Fi oder Hi-Fi, und wer führt den Nutzertest durch?
- Kann ich Wireframes und Mockups vor der Entwicklungsfreigabe abnehmen?
- In welchem Werkzeug entstehen die Designartefakte, und erhalte ich Zugang zu den Dateien?
- Wireframe klärt Struktur, Mockup zeigt Design, Prototyp testet Interaktion. Jeder Schritt beantwortet eine andere Frage.
- Fehler, die vor der Programmierung gefunden werden, kosten nach Erkenntnissen der Nielsen Norman Group rund hundert Mal weniger als Korrekturen am fertigen System.
- Die meisten Mittelstandsprojekte kommen mit Wireframes und Mockups aus. Einen Prototypen braucht man vor allem bei mehrstufigen Abläufen wie Checkout, Buchung oder Konfiguratoren.
- Im Agenturgespräch konkret nachfragen, welche Artefakte im Angebot enthalten sind und für welche Seitentypen sie geliefert werden.
Häufige Fragen
Was ist der Unterschied zwischen einem Wireframe und einem Mockup?
Ein Wireframe zeigt ausschließlich Struktur und Inhaltshierarchie: Wo steht die Navigation, wie groß ist der Inhaltsbereich, wo liegt der Call-to-Action? Farben, Schriften und Bilder fehlen bewusst. Ein Mockup fügt das vollständige visuelle Design hinzu: Markenprofil, Typografie, konkrete Bilder und pixelgenaue Abstände. Es ist immer noch statisch, kein Klick ist möglich.
Braucht jede Website einen Prototypen?
Nein. Für eine Unternehmenswebsite mit bekanntem Seitenaufbau reichen Wireframes und Mockups. Ein Prototyp lohnt sich erst, wenn das Projekt mehrstufige Abläufe enthält (Checkout, Buchung, Konfigurator), oder wenn vor der Entwicklung ein echter Nutzertest stattfinden soll. Die Kosten für einen klickbaren Prototyp in Figma liegen je nach Umfang zwischen einem halben und mehreren Entwicklertagen.
Kann ich als Auftraggeber selbst Wireframes erstellen?
Ja, und es lohnt sich. Einfache Handskizzen oder grobe Papierzeichnungen reichen aus, um grundlegende Strukturideen zu kommunizieren. Sie ersparen Abstimmungsrunden und helfen, Erwartungen präzise zu formulieren. Die formale Spezifikation mit genauen Proportionen und Inhaltsmengen übernimmt in der Regel die Agentur.
Was ist der Unterschied zwischen einem Hi-Fi-Wireframe und einem Mockup?
Ein Hi-Fi-Wireframe zeigt bereits präzise Proportionen, Abstände und realistische Inhaltsmengen, aber immer noch ohne Farben, echte Bilder oder Markenidentität. Ein Mockup ergänzt genau das. Die Grenze ist fließend, und manche Agenturen überspringen den Hi-Fi-Wireframe und gehen direkt vom Lo-Fi-Wireframe ins Mockup.
Muss ein Wireframe immer vor dem Mockup entstehen?
Es ist der sinnvolle Regelfall, kein absolutes Muss. Ohne vorherige Strukturklärung riskiert man, aufwendig ausgearbeitetes visuelles Design wegen struktureller Probleme neu zu erstellen. Bei sehr einfachen Projekten mit bekanntem Seitenaufbau kann der Wireframe-Schritt wegfallen.
Wie unterscheiden sich Lo-Fi- und Hi-Fi-Prototypen?
Lo-Fi-Prototypen können Papierskizzen sein, bei denen eine Person die Systemreaktion in Echtzeit simuliert. Sie entstehen schnell, lassen sich leicht ändern und erzeugen weniger Druck bei Testpersonen. Hi-Fi-Prototypen in Werkzeugen wie Figma sehen aus wie die fertige Website. Sie ermöglichen realistische Nutzertests, brauchen aber mehr Vorbereitungszeit.
Was kostet ein Prototyp zusätzlich zum Mockup?
Das hängt von Umfang und Werkzeug ab. Ein einfacher klickbarer Prototyp für wenige Screens entsteht in ein bis drei Stunden, wenn das Mockup bereits vorliegt. Ein vollständiger Hi-Fi-Prototyp für einen mehrstufigen Checkout-Prozess kann mehrere Entwicklertage in Anspruch nehmen. Der Aufwand rechnet sich, wenn er eine Fehlentwicklung in der Produktion verhindert.