Wireframe, Mockup oder Prototyp? Die Unterschiede einfach erklärt

Wer eine neue Website plant, stolpert früher oder später über drei Begriffe, die gern durcheinandergeworfen werden: Wireframe, Mockup und Prototyp. Dabei beschreiben sie drei klar getrennte Stufen auf dem Weg von der Idee zur fertigen Website – und wer sie kennt, versteht Angebote von Agenturen besser und spart sich teure Korrekturschleifen. Hier die Unterschiede, kompakt erklärt. Wie der Prozess bei uns konkret aussieht, zeigen wir auf der Seite zum SEO-Webdesign.

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.