Was ist ein Prototyp?
Ein Prototyp im Webdesign ist die letzte Stufe vor der Programmierung. Er entsteht aus einem fertigen Mockup, das in einem Tool wie Figma mit Klicks, Übergängen und Animationen verbunden wird. Du klickst auf den Button "Angebot anfordern" — und landest im Formular. Du füllst Felder aus — und siehst eine Erfolgsmeldung. Alles ohne eine Zeile Code.
Der entscheidende Unterschied zum Mockup: Ein Mockup ist ein Foto, ein Prototyp ist ein Film, in dem du selbst die Hauptrolle spielst. Beim Mockup siehst du, wie etwas aussieht. Beim Prototyp erlebst du, wie es sich anfühlt. Genau dieser Unterschied entscheidet, ob deine Seite später in der Realität funktioniert oder nicht.
Beispiel: Bei großen Tech-Produkten wie der Notion-App werden ganze Features erst als Prototyp gebaut, mit zehn echten Nutzern getestet und dann erst entwickelt. Was am Reißbrett genial wirkte, scheitert oft beim ersten echten Klick. Lieber im Prototyp scheitern als im Live-Produkt.
Mockup vs. Prototyp — der Unterschied in einer Tabelle
| Aspekt | Mockup | Prototyp |
|---|---|---|
| Zustand | Statisch, ein einzelnes Bild | Klickbar, mehrere verbundene Screens |
| Zeigt | Aussehen | Aussehen + Bedienung |
| Test mit Nutzern | Bedingt | Voll möglich |
| Aufwand | Mittel | Höher (Klicks definieren) |
| Wert | Visuelles Einverständnis | Echte UX-Validierung |
Beide haben ihre Berechtigung. Bei kleinen Projekten reicht oft ein Mockup. Bei allem, wo Nutzerführung wirklich wichtig ist — Online-Shops, Buchungssysteme, komplexe Formulare — lohnt sich der Prototyp.
Welche Arten von Prototypen gibt es?
Nicht jeder Prototyp ist gleich. Je nach Ziel und Phase wählt man eine andere Tiefe.
- Click-Dummy. Die einfachste Form. Statische Screens werden verlinkt — ein Klick auf Button A führt zu Screen B. Keine Animationen, keine Logik. Reicht, um die grobe Reihenfolge zu testen.
- Interaktiver Prototyp. Mit Hover-Zuständen, Übergängen, vielleicht einfachen Animationen. Hier merkst du schon, wie sich die Bedienung anfühlt.
- High-Fidelity-Prototyp. Praktisch ununterscheidbar von der echten Seite. Inklusive Mikro-Interaktionen, Ladezustände, Fehlermeldungen. Wird oft für Nutzertests mit echten Probanden verwendet.
- Code-Prototyp. Schon halb programmiert, in HTML, CSS und JavaScript. Sinnvoll, wenn auch echte Daten oder Animationen getestet werden müssen.
Für die meisten Kundenprojekte reicht ein Click-Dummy oder ein interaktiver Prototyp in Figma. Code-Prototypen lohnen sich erst bei großen Produkten.
Warum ist ein Prototyp für deine Website wichtig?
Ein Prototyp findet die Probleme, die niemand am Mockup sieht. Klassischer Fall: Im Mockup sieht der Buchungs-Button perfekt aus. Im Prototyp merkt man, dass man dreimal scrollen muss, um ihn zu finden. Im Mockup wirkt das Formular schlank. Im Prototyp wird klar, dass Pflichtfelder erst nach dem Absenden auffallen — und genervte Nutzer abspringen.
Mit einem Prototyp kannst du außerdem echte Nutzertests machen. Du setzt drei oder vier Leute aus deiner Zielgruppe vor den Bildschirm und gibst ihnen eine Aufgabe: "Versuche, eine Beratung zu buchen." Wo sie zögern, wo sie falsch klicken, wo sie aufgeben — das ist Gold. Jede dieser Beobachtungen spart dir später echte Conversion Rate.
Ein konkretes Beispiel: Ein Online-Shop für Naturkosmetik testet seinen neuen Checkout im Prototyp. Drei von fünf Testpersonen finden den "Weiter"-Button nicht, weil er unter dem Fold liegt. Die Designerin verschiebt ihn um 80 Pixel nach oben — ein Eingriff von zwei Minuten. Im Live-Shop hätte das Wochen gedauert, inklusive Diskussion mit Entwicklern und Stakeholdern.
Welche Tools werden für Prototypen verwendet?
Heute läuft fast alles in einer Handvoll Tools:
- Figma — Standard, super für Click-Dummys und interaktive Prototypen, kollaborativ.
- ProtoPie — wenn es um komplexe Mikro-Interaktionen geht.
- Adobe XD — solide Prototyping-Funktionen, wenn man eh in der Adobe-Welt steckt.
- Framer — fürs High-End-Prototyping mit echten Animationen, fast schon Code.
- Marvel — schlank, schnell, gut für Kundenrunden.
Häufige Fehler bei Prototypen
Zu viel reinpacken. Wer jeden möglichen Klick definiert, baut praktisch eine zweite Website. Konzentrier dich auf die wichtigsten Pfade — Startseite, Hauptangebot, Kontaktstrecke.
Keine echten Nutzer testen lassen. Ein Prototyp, der nur intern angeklickt wird, beweist nichts. Erst wenn jemand außerhalb deines Teams ihn benutzt, zeigen sich die ehrlichen Probleme.
Mobile vergessen. Ein Desktop-Prototyp testet nur die halbe Welt. Mobile Klick-Pfade müssen mit dabei sein.
Mit dem Prototyp das Mockup ersetzen wollen. Beide haben unterschiedliche Aufgaben. Wer den Designschritt überspringt, hat im Prototyp nur Geklicke ohne visuelle Identität.