Wireframe, Mockup, Prototyp: der Unterschied und wann Sie welchen Schritt brauchen

Ein WireframeEin Wireframe ist ein schematischer Entwurf einer Seite oder eines Screens, der Struktur, Inhalte und Funktionen ohne finale Gestaltung zeigt. Er klärt früh,…Mehr erfahren → ist ein schematischer Entwurf ohne Farben und Bilder, der zeigt, welche Inhalte wo stehen. Ein MockupEin Mockup ist eine visuell ausgearbeitete, aber nicht funktionsfähige Darstellung einer Website, App oder eines Produkts. Es zeigt Farben, Schriften, Bilder…Mehr erfahren → ist ein visuell ausgearbeiteter, aber statischer Entwurf, der zeigt, wie die Seite aussieht. Ein Prototyp lässt sich bedienen und zeigt, wie sich ein Ablauf anfühlt. Die drei Stufen bauen aufeinander auf: zuerst die Struktur, dann das Aussehen, dann das Verhalten. Nicht jedes Projekt braucht alle drei, aber jedes Projekt braucht Antworten auf alle drei Fragen.

Wer zum ersten Mal eine Website oder eine Web-AppEine Web-App ist eine Anwendung, die im Browser läuft und sich wie ein Programm bedienen lässt — mit Login, Eingaben, gespeicherten Daten und Abläufen. Anders…Mehr erfahren → in Auftrag gibt, bekommt diese Begriffe oft in der Offerte zu lesen, ohne dass jemand erklärt, worüber man in welcher Phase entscheidet. Das führt zu einem bekannten Problem: Beim Wireframe wird über Farben diskutiert, beim Mockup wird die Struktur grundsätzlich in Frage gestellt, und beim Prototyp merkt man, dass ein ganzer Schritt im Ablauf fehlt.

Die drei Stufen im Überblick

Wireframe: die Struktur zuerst

Ein Wireframe ist das Drahtgitter einer Seite. Graue Kästen für Bilder, Linien für Text, Rechtecke für Knöpfe. Bewusst ohne Farben und ohne Gestaltung, damit sich die Diskussion um das Wesentliche dreht: Welche Inhalte braucht diese Seite? Was ist das Wichtigste? Was kommt zuerst?

Ein gutes Wireframe enthält:

• alle Inhaltsblöcke der Seite in ihrer Reihenfolge,
• die Hauptaussage und den wichtigsten Handlungsaufruf,
• die Navigation mit allen Hauptpunkten,
• Hinweise auf Funktionen, etwa «Formular mit fünf Feldern» oder «Karte mit Standort»,
• Varianten für Handy und Desktop, wenn sich die Anordnung stark unterscheidet.

Vor dem Wireframe steht oft die Frage, welche Seiten es überhaupt gibt und wie sie zusammenhängen. Das ist die Informationsarchitektur. Bei Abläufen über mehrere Schritte hilft zusätzlich ein User Flow, der zeigt, auf welchem Weg Besucher von der Startseite bis zur Anfrage gelangen.

Mockup: das Aussehen

Ein Mockup ist der Gestaltungsentwurf. Jetzt kommen Farben, Schriften, Bilder, Icons und Abstände dazu. Das Mockup zeigt, wie die fertige Seite aussehen wird, bis auf das Verhalten.

Hier wird über Wirkung entschieden: Passt die Bildsprache zur Firma? Ist der Kontrast ausreichend, auch auf dem Handy im Sonnenlicht? Wirken die Seiten einheitlich? Hilfreich ist ein Moodboard im Vorfeld, also eine Sammlung von Bildern, Farben und Beispielen, die die gewünschte Stimmung zeigen.

Bei grösseren Projekten entsteht aus den Mockups ein Design-System: eine Sammlung wiederverwendbarer Bausteine wie Knöpfe, Formularfelder, Karten und Farbwerte, damit neue Seiten später einheitlich aussehen. Wie Schriften ausgewählt und eingebunden werden, beschreibt Schriftarten für die Website.

Zur Begriffsverwirrung: «Mockup» heisst im Alltag auch die Darstellung eines Designs auf einem Gerät, etwa ein Website-Entwurf in einem Laptop- oder Handy-Rahmen für eine Präsentation. Das ist dasselbe Wort für einen anderen Zweck. Im Projektablauf ist mit Mockup der statische Gestaltungsentwurf gemeint.

Prototyp: das Verhalten

Ein Prototyp ist ein Entwurf, den man bedienen kann. Knöpfe führen zu anderen Bildschirmen, Menüs öffnen sich, Formulare zeigen Fehlermeldungen. Er kann auf Wireframes basieren, dann spricht man von einem groben Prototyp, oder auf Mockups, dann ist er ausgearbeitet.

Der Prototyp beantwortet die wichtigste Frage überhaupt: Können Menschen damit erledigen, wofür das Ganze gebaut wird? Um das herauszufinden, geben Sie fünf Personen aus der Zielgruppe je eine Aufgabe, etwa «Fragen Sie eine Offerte für eine Badsanierung an», und beobachten Sie, ohne zu helfen. Wie das geht, erklärt der Glossarbegriff Usability Testing.

Wichtig ist die Abgrenzung zu einem anderen Gebrauch des Wortes: In der Produktentwicklung meint «Prototyp» oft eine frühe, funktionierende Version einer neuen Anwendung, mit der getestet wird, ob Kunden das Produkt überhaupt wollen. Diese Bedeutung erklärt Proof of Concept, Prototyp oder MVP?. Im Design-Ablauf ist der Prototyp dagegen ein bedienbarer Entwurf, oft ganz ohne echte Datenbank dahinter.

Wann Sie welchen Schritt brauchen

Bei kleinen Websites wird heute oft direkt im Code gestaltet: Das Mockup entsteht im Browser, wo es sofort auf Handy und Desktop sichtbar ist. Das spart einen Zwischenschritt und ist bei bekannten Seitentypen sinnvoll. Je mehr Interaktion ein Projekt hat, desto wertvoller wird ein Prototyp vor der Programmierung. Wie das im Ablauf einer Web-App aussieht, zeigt Wie ein Web-App-Projekt abläuft.

Werkzeuge

Für Wireframes reichen Papier und Stift oder ein Whiteboard, gerade in der ersten Runde. Digitale Werkzeuge wie Figma erlauben es, aus Wireframes Mockups und daraus klickbare Prototypen zu machen, ohne das Werkzeug zu wechseln, und sie lassen mehrere Personen gleichzeitig kommentieren. Inzwischen erzeugen auch KI-Werkzeuge aus einer Beschreibung erste Entwürfe oder sogar lauffähige Oberflächen. Das beschleunigt den Start, ersetzt aber nicht die Entscheidung, was auf eine Seite gehört. Wo KI im Designprozess Zeit spart und wo nicht, beschreibt KI im Webdesign-Prozess.

Beispiel: Anfragestrecke für einen Gartenbaubetrieb

Konstruiertes Beispiel, kein Kundenfall. Ein Gartenbaubetrieb am Zürichsee möchte auf der neuen Website eine Anfragestrecke in mehreren Schritten: Art des Projekts, Grösse des Gartens, gewünschter Zeitraum, Fotos, Kontaktangaben.

• Wireframe: Fünf Bildschirme in Graustufen. Beim Durchgehen mit dem Inhaber fällt auf, dass «Unterhalt» und «Neugestaltung» ganz unterschiedliche Fragen brauchen. Die Strecke bekommt eine Verzweigung nach dem ersten Schritt.
• Mockup: Die Bildschirme in den Farben und Schriften der Website, mit Fotos aus eigenen Projekten. Diskutiert wird, ob die Auswahl als Karten mit Bild oder als Liste besser wirkt. Entschieden wird für Karten.
• Prototyp: Die Strecke wird klickbar gemacht und fünf Personen aus dem Bekanntenkreis gezeigt, die einen Garten haben. Zwei von fünf finden den Knopf zum Hochladen von Fotos nicht, weil er wie ein Hinweis aussieht. Das wird vor der Programmierung geändert.

Jede der drei Runden hat einen anderen Fehler gefunden. Keiner davon wäre im jeweils anderen Schritt aufgefallen.

Checkliste für Auftraggeber

• Beim Wireframe: Fehlt ein Inhalt? Stimmt die Reihenfolge? Ist klar, was die Besucher tun sollen? Über Farben noch nicht diskutieren.
• Beim Mockup: Passt die Wirkung zur Firma? Sind Texte lesbar, Knöpfe als Knöpfe erkennbar? Sehen alle Seiten aus wie aus einem Guss?
• Beim Prototyp: Selbst durchklicken und ein paar Menschen aus der Zielgruppe zuschauen. Nicht erklären, nur beobachten.

Wie wir arbeiten

Bei Websites gestalten wir je nach Projekt mit Wireframes und Mockups oder direkt im Code, siehe Webdesign. Ein erstes Konzept für Ihre Website gibt es als kostenloses Design-Konzept. Für Anwendungen mit vielen Abläufen setzen wir auf klickbare Prototypen vor der Entwicklung, beschrieben unter UX-Agentur Zürich und UI- und UX-Design. Soll eine neue Produktidee schnell mit echten Nutzern getestet werden, entsteht ein funktionierender Prototyp im Rahmen von Prototyp und Validierung.

Fazit

Wireframe, Mockup und Prototyp sind keine Bürokratie, sondern drei Gelegenheiten, Fehler zu finden, solange sie billig sind. Das Wireframe klärt die Struktur, das Mockup die Wirkung, der Prototyp den Ablauf. Wer bei jedem Schritt die passende Frage stellt und die richtigen Menschen urteilen lässt, spart sich die teuerste Art, einen Fehler zu entdecken: nach dem Livegang.