Wireframe, Mockup, Prototyp: Was ist der Unterschied?

„Wir schicken Ihnen nächste Woche die Wireframes“ – spätestens bei diesem Satz fragen sich viele Auftraggeber, was sie eigentlich erwartet. Und wenn dann graue Kästen ohne Farben und Bilder kommen, ist die Enttäuschung manchmal groß. Dabei sind diese Kästen kein halbfertiges Design, sondern eine eigene Arbeitsstufe mit einem klaren Zweck.

Dieser Ratgeber erklärt die drei Begriffe, die in Webprojekten am häufigsten durcheinandergehen, und zeigt, was Sie in welcher Phase prüfen sollten.

Die drei Entwurfsstufen auf einen Blick

Wireframe, Mockup und Prototyp unterscheiden sich vor allem darin, wie nah sie am fertigen Ergebnis sind. In der Fachsprache spricht man von Fidelity, also Detailtreue. Die Nielsen Norman Group unterscheidet dabei drei Dimensionen: wie interaktiv ein Entwurf ist, wie realistisch er aussieht und wie vollständig die Inhalte sind.

Wireframe: das Gerüst der Seite

Ein Wireframe ist ein schematischer Entwurf einer Seite. Die Nielsen Norman Group beschreibt Wireframes als übliches Format, um Layout-Ideen auf Seitenebene zu zeigen. Statt Fotos stehen dort durchgestrichene Kästen, statt fertiger Texte Platzhalter oder Stichworte, statt Farben Graustufen.

Das ist Absicht. Ohne Farben und Bilder konzentriert sich die Diskussion auf die Fragen, die am Anfang wirklich zählen:

• Welche Inhalte stehen auf der Seite – und welche nicht?
• In welcher Reihenfolge erscheinen sie?
• Was ist am wichtigsten und bekommt den meisten Platz?
• Wo sind Telefonnummer, Anfrage-Button und Vertrauenselemente?
• Wie sieht das Ganze auf dem Smartphone aus?

Wireframes können auf Papier skizziert oder in Werkzeugen wie Figma erstellt werden. Bei Websites mit vielen Unterseiten ergänzen sie meist eine Übersicht der Seitenstruktur. Wie Sie diese planen, erklärt der Ratgeber Seitenstruktur einer Website planen.

Mockup: so wird die Seite aussehen

Das Mockup ist ein statischer, gestalteter Entwurf. Jetzt kommen Farben, Schriften, Bilder, Symbole und Abstände hinzu. Für viele Auftraggeber ist das der Moment, in dem die Website zum ersten Mal „echt“ wirkt.

Beim Mockup prüfen Sie vor allem die Wirkung und die Lesbarkeit:

• Passt die Gestaltung zu Ihrem Unternehmen und Ihrem bestehenden Erscheinungsbild – Logo, Fahrzeugbeschriftung, Geschäftspapiere?
• Sind Texte gut lesbar, auch in kleiner Schrift und auf hellem oder farbigem Hintergrund?
• Heben sich Buttons klar ab, und ist erkennbar, was anklickbar ist?
• Wirken die Bilder glaubwürdig? Echte Fotos aus Ihrem Betrieb sind Stockbildern fast immer überlegen.

Aus den abgestimmten Mockups entsteht oft ein Regelwerk für Farben, Schriften und Bausteine. Warum sich das lohnt, lesen Sie im Ratgeber Styleguide für die Website.

Prototyp: klicken, bevor programmiert wird

Ein Prototyp lässt sich durchklicken. Menüs öffnen sich, Buttons führen zur nächsten Seite, ein Formular zeigt nach dem Absenden eine Bestätigung. Im Hintergrund steckt aber noch keine echte Technik: Es werden keine Daten gespeichert, keine E-Mails verschickt.

Die Nielsen Norman Group beschreibt einen Prototyp als Hypothese für eine Designlösung, die man am besten prüft, indem man Nutzern bei der Bedienung zusieht. Prototypen gibt es in unterschiedlicher Detailtreue:

• Einfache Prototypen aus verknüpften Wireframes oder sogar Papierskizzen sind schnell gebaut und lassen sich während eines Tests ändern. Testpersonen trauen sich eher, Kritik zu äußern, weil sichtbar ist, dass noch nichts fertig ist.
• Detailreiche Prototypen sehen aus wie die fertige Website und reagieren realistisch. Sie eignen sich, um Abläufe, Formulare und visuelle Details zu testen, kosten aber mehr Zeit, weil jede Klickfläche vorab angelegt werden muss.

Für eine typische Unternehmenswebsite mit Startseite, Leistungsseiten und Kontakt ist ein aufwendiger Prototyp nicht immer nötig. Sinnvoll wird er bei mehrstufigen Abläufen: einem Angebotsrechner, einer Terminbuchung, einem Konfigurator oder einem Shop. Wie Sie einen Prototyp mit wenigen Testpersonen prüfen, zeigt der Ratgeber Usability-Test mit kleinem Budget.

Wann Sie welche Stufe zu sehen bekommen sollten

Nicht jedes Projekt durchläuft alle Stufen in voller Tiefe. Ein sinnvoller Ablauf für eine Unternehmenswebsite sieht meist so aus:

1. BriefingZiele, Zielgruppen, Inhalte und Wünsche werden festgehalten. Was hineingehört, erklärt der Ratgeber Website-Briefing erstellen.
2. SeitenstrukturWelche Seiten gibt es, wie hängen sie zusammen, was steht in der Navigation?
3. Wireframes der SchlüsselseitenMeist Startseite, eine typische Leistungsseite und die Kontaktseite – jeweils für Desktop und Smartphone.
4. Mockup der StartseiteDie Gestaltungsrichtung wird an der wichtigsten Seite festgelegt.
5. Mockups weiterer SeitentypenAuf Basis der abgestimmten Richtung, oft schneller als die erste Seite.
6. Prototyp bei BedarfFür Formulare, Rechner oder mehrstufige Abläufe – idealerweise mit einem kurzen Test.
7. UmsetzungErst jetzt wird programmiert oder im Page-Builder gebaut.

Warum frühe Entwürfe Kosten sparen

Je später eine Änderung kommt, desto teurer wird sie. Eine verschobene Sektion ist im Wireframe eine Sache von Minuten. Im fertigen Mockup müssen Abstände, Bilder und mobile Ansichten nachgezogen werden. Nach der Programmierung betrifft dieselbe Änderung Vorlagen, Inhalte und manchmal die Technik.

Jakob Nielsen verweist in einem Beitrag zum Papier-Prototyping auf eine Schätzung aus der Softwaretechnik, nach der eine Änderung vor der Programmierung rund hundertmal günstiger ist als danach. Die genaue Zahl hängt vom Projekt ab, die Richtung bestätigt sich aber in der Praxis: Wer bei Wireframes gründlich hinschaut, spart sich spätere Schleifen. Wie Sie das Budget für ein Webprojekt insgesamt einordnen, erklärt unser Leitfaden zu den Webdesign-Kosten.

Entwürfe richtig prüfen und Feedback geben

Die meisten Abstimmungsrunden scheitern nicht am Entwurf, sondern an unklarem Feedback. Diese Fragen helfen mehr als „gefällt mir“ oder „gefällt mir nicht“:

• Aufgabe statt Geschmack: Findet ein neuer Kunde in fünf Sekunden heraus, was Sie anbieten und wie er Sie erreicht?
• Konkret statt allgemein: „Die Telefonnummer sollte oben rechts stehen“ hilft mehr als „irgendwie unruhig“.
• Stufe beachten: Beim Wireframe nicht über Farben diskutieren, beim Mockup nicht grundsätzlich über die Seitenstruktur.
• Eine Stimme bündeln: Sammeln Sie das Feedback aller Beteiligten intern und geben Sie es gebündelt weiter, statt dass fünf Personen parallel schreiben.
• Kunden fragen: Zeigen Sie den Entwurf zwei oder drei echten Kunden. Deren Reaktion ist oft aufschlussreicher als die interne Diskussion.

Typische Missverständnisse

In Abstimmungen begegnen uns immer wieder dieselben Annahmen, die Projekte unnötig verlängern:

„Das Wireframe sieht ja noch gar nicht aus“

Genau das ist der Sinn. Ein Wireframe soll nicht gefallen, sondern eine Struktur zur Diskussion stellen. Wer es wie ein fertiges Design bewertet, diskutiert über graue Kästen statt über Inhalte. Hilfreicher ist die Frage: Würde ein Kunde, der diese Seite zum ersten Mal sieht, die richtigen Informationen in der richtigen Reihenfolge bekommen?

„Im Mockup ist alles festgelegt, also wird es genau so“

Ein Mockup zeigt einen Zustand, meist mit idealen Texten und Bildern. Auf der echten Website sind Überschriften mal länger, Bilder haben andere Formate, und Inhalte ändern sich. Gute Mockups berücksichtigen das bereits, etwa durch realistische Textlängen. Kleine Abweichungen bei der Umsetzung sind trotzdem normal und kein Zeichen schlechter Arbeit.

„Ein Prototyp ist schon fast die fertige Website“

Auch ein sehr realistisch wirkender Prototyp ist eine Kulisse. Ladezeit, Formularversand, Datenschutz, Barrierefreiheit, Suchmaschinenoptimierung und die Pflege im Redaktionssystem entstehen erst in der Umsetzung. Rechnen Sie nach dem Prototyp also nicht mit wenigen Tagen bis zum Go-live, sondern mit der eigentlichen Bauphase.

„Je mehr Entwürfe, desto besser“

Drei Gestaltungsvarianten zur Auswahl klingen großzügig, führen aber oft zu Mischwünschen („das Menü von A, die Farben von B“). In vielen Projekten ist eine gut begründete Richtung, die gemeinsam weiterentwickelt wird, der schnellere Weg.

Checkliste: Entwürfe abnehmen

• Im Wireframe stehen echte Überschriften oder Stichworte statt Blindtext.
• Telefonnummer, Anfrage-Button und Vertrauenselemente sind in jedem Entwurf eingeplant.
• Es gibt zu jedem Entwurf auch die Smartphone-Ansicht.
• Das Mockup passt zu Logo und bestehendem Erscheinungsbild.
• Texte sind auch in kleiner Schrift gut lesbar, Buttons klar erkennbar.
• Mehrstufige Abläufe wurden als Prototyp durchgeklickt, idealerweise von Außenstehenden.
• Feedback wurde intern gebündelt und konkret formuliert.
• Jede Stufe ist freigegeben, bevor die nächste beginnt.

Häufige Fragen

Quellen

1. Nielsen Norman Group: UX Prototypes – Low Fidelity vs. High Fidelity (2016)
2. Nielsen Norman Group: Wireflows – A UX Deliverable for Workflows and Apps (2016) – Definition Wireframes
3. Nielsen Norman Group: Paper Prototyping (2003) – Kosten früher vs. später Änderungen