Ein Prototyp ist eine klickbare Vorabversion einer Website oder Anwendung, mit der sich Abläufe und Interaktionen testen lassen, bevor die eigentliche Entwicklung beginnt. Anders als das statische Mockup simuliert der Prototyp echtes Verhalten: Menüs öffnen sich, Buttons führen zur nächsten Seite, Formularstrecken lassen sich durchspielen. So werden Bedienkonzepte früh überprüfbar — mit Testpersonen oder im Kundengespräch.
Wie funktioniert Prototyping?
Prototypen entstehen meist in Design-Werkzeugen wie Figma: Die statischen Entwürfe der einzelnen Seiten werden mit Verknüpfungen versehen — ein Klick auf den Menüpunkt springt zum entsprechenden Seitenentwurf, ein Klick auf den Button zur Dankeseite. Das Ergebnis fühlt sich beim Durchklicken an wie eine echte Website, ohne dass eine Zeile Code geschrieben wurde.
Der Detailgrad variiert: Ein einfacher Klick-Dummy verbindet wenige Screens, ein High-Fidelity-Prototyp simuliert auch Animationen, Eingabefelder und Zustandswechsel. Welcher Grad sinnvoll ist, hängt von der Frage ab, die der Prototyp beantworten soll — grobe Navigationslogik braucht weniger Ausarbeitung als eine mehrstufige Formularstrecke.
Warum sind Prototypen wichtig?
Bedienprobleme zeigen sich erst in der Interaktion: Ob eine Navigation verständlich ist, ob Nutzer den Weg zur Kontaktaufnahme finden, ob eine Formularstrecke abbricht — das lässt sich an statischen Bildern nur vermuten, am Prototyp aber beobachten. Tests mit wenigen Personen decken die gravierendsten Usability-Probleme meist schnell auf.
Wirtschaftlich ist der Prototyp eine Versicherung: Änderungen am klickbaren Entwurf kosten Stunden, Änderungen an der programmierten Website Tage bis Wochen. Bei komplexeren Projekten — etwa einem Mandanten-Onboarding, einem Rechner oder einer Buchungsstrecke — gehört ein Prototyp deshalb zum professionellen Vorgehen, bevor Entwicklungsbudget gebunden wird.
Prototypen in der Praxis
Für eine klassische Unternehmens- oder Kanzlei-Website genügt oft ein schlanker Prototyp der Kernstrecken: Startseite → Leistungsseite → Kontakt. Er dient vor allem der Abstimmung mit dem Kunden, der die künftige Website realistisch erleben kann, statt sich Abläufe vorstellen zu müssen. Bei Landingpages lässt sich so auch der Weg von der Anzeige bis zur Conversion durchspielen.
Wichtig ist die Erwartungssteuerung: Ein Prototyp ist eine Simulation — Formulare versenden nichts, Inhalte sind teils Platzhalter, Ladezeiten sagen nichts über die spätere Website aus. Er beantwortet Fragen zu Struktur und Bedienung, nicht zu Technik und Performance. Für Letzteres dient eine Staging-Umgebung mit der echten Umsetzung.