Wireframe, Mockup, Prototyp: Unterschiede

Wireframe, Mockup und Prototyp sind drei aufeinander aufbauende Stufen der Website-Planung: Der Wireframe legt als Strukturskizze fest, was wohin kommt; das Mockup zeigt das visuelle Design mit Farben, Schriften und Bildern – statisch; der Prototyp macht das Design klickbar und simuliert die Bedienung. Wer die Unterschiede kennt, versteht Agentur-Angebote besser und spart sich teure Korrekturschleifen.

Die Kurzfassung

• Wireframe = die Strukturskizze. Schwarz-weiß, ohne Design-Details: Was kommt wohin?
• Mockup = das visuelle Design. Farben, Schriften, Bilder – aber statisch, nichts ist klickbar.
• Prototyp = die klickbare Simulation. Verhält sich wie die fertige Website, ohne dass eine Zeile Code existiert.

Wireframe: die Struktur zuerst

Ein Wireframe ist eine einfache Strukturskizze ohne Design-Details. Er beantwortet die Fragen, die VOR jeder Gestaltung geklärt sein müssen: Wo sitzt die Navigation? Welche Inhalte braucht die Startseite? Wo steht der Kontakt-Button?

Gerade weil ein Wireframe bewusst „hässlich” ist, funktioniert er so gut: Niemand diskutiert über Farbtöne, solange die Struktur nicht steht. Strukturentscheidungen in dieser Phase kosten Minuten – dieselben Änderungen an einer fertig entwickelten Website kosten Stunden oder Tage.

Mockup: das Design wird sichtbar

Ein Mockup zeigt das visuelle Design mit Farben, Schriften und Bildern – ist aber statisch. Hier entsteht zum ersten Mal der echte Eindruck der späteren Website: Layout, Farbschema, Typografie und Designelemente werden konkret und lassen sich abstimmen, bevor die Entwicklung beginnt.

In unserem Prozess entsteht das Mockup in Figma. Das hat einen praktischen Vorteil für Kunden: Sie bekommen Zugang zur Datei und können direkt im Browser Kommentare hinterlassen – ohne Software zu installieren. Die Abstimmung bleibt einfach und transparent.

Gute High-Fidelity-Mockups sind außerdem entwicklerfreundlich aufgebaut: Sie enthalten Abstände, Schriftgrößen und Farben, sodass sich CSS-Werte direkt auslesen und Assets exportieren lassen. Das Mockup ist damit keine hübsche Skizze, sondern die verbindliche Bauanleitung für die Umsetzung.

Prototyp: klicken statt vorstellen

Ein Prototyp ist interaktiv und simuliert die Bedienung der fertigen Website. Buttons reagieren, Menüs öffnen sich, Seitenwechsel funktionieren – ideal, um die Benutzerführung zu testen, bevor entwickelt wird.

Für die meisten Unternehmenswebsites ist ein vollständiger Prototyp nicht zwingend nötig – ein sauber abgestimmtes Mockup reicht oft aus. Sinnvoll wird der Prototyp bei komplexeren Projekten: Onlineshops, Buchungsstrecken oder Anwendungen, bei denen die Bedienlogik über Erfolg und Misserfolg entscheidet.

Wie lange dauert das?

Je nach Umfang dauert die Mockup-Erstellung ein bis drei Wochen. Einfache Websites mit 5 bis 10 Seiten sind in etwa einer Woche fertig; komplexere Projekte mit vielen Seitentypen oder E-Commerce-Funktionen brauchen entsprechend mehr Zeit.

Warum dieser Prozess am Ende Geld spart

Jede Änderung wird teurer, je später sie kommt. Eine Struktur-Korrektur im Wireframe ist eine Sache von Minuten. Dieselbe Korrektur im Mockup kostet vielleicht eine Stunde. Nach der Entwicklung bedeutet sie: Code anfassen, testen, neu deployen. Deshalb gilt: erst Struktur (Wireframe), dann Design (Mockup), dann – wo nötig – Verhalten (Prototyp), und erst zum Schluss die Umsetzung.

Genau so bauen wir Websites: Der Mockup-Prozess in fünf Schritten ist fester Bestandteil unseres SEO-Webdesigns – mit transparenten Festpreisen und SEO, das von Anfang an mitgedacht wird. Welche Struktur Ihre Website überhaupt braucht, klärt vorab die Informationsarchitektur.