Erste Ideenskizzen & Interaktive Prototypen
Den Wert frühen Skizzierens verstehen, den Unterschied zwischen Lo-Fi-, Mid-Fi- und Hi-Fi-Prototypen kennen und einen einfachen interaktiven Prototyp erleben.
- Erklären, warum frühes Skizzieren effizienter ist als direkt Code zu schreiben
- Die drei Fidelitätsstufen (Lo-Fi, Mid-Fi, Hi-Fi) und ihren Zweck kennen
- Verstehen, welche Fragen jede Fidelitätsstufe beantworten kann
- Einen einfachen klickbaren Prototyp selbst erkunden
Warum überhaupt?
Skizzieren bevor man baut
Entwickler neigen dazu, direkt zum Code zu springen, weil Code sich produktiv anfühlt. Aber Code ist eine der teuersten Möglichkeiten, eine Idee zu erkunden.
1×
Skizze auf Papier
3 Minuten
10×
Digitaler Wireframe
30 Minuten
100×
Code-Prototyp
Stunden
Das Ziel des frühen Skizzierens ist nicht, schöne Arbeit zu produzieren. Es geht darum, Ideen schnell zu externalisieren, damit du sie beurteilen und verwerfen kannst. Wenn eine Idee nur in deinem Kopf existiert, neigst du dazu, sie zu verteidigen. Wenn sie auf Papier ist, kannst du sie kritisch betrachten.
3 Skizzen-Ideen für denselben Inhalt
Benachrichtigungs-Posteingang — drei verschiedene Layouts erkundet:
Liste
Klare Struktur, wenig Kontext
Karten-Grid
Mehr Kontext, weniger Items
Zeitstrahl
Zeitlicher Kontext sichtbar
Theorie
Prototyp-Fidelitätsstufen
Fidelität beschreibt, wie eng ein Prototyp dem fertigen Produkt ähnelt. Jede Stufe dient einem anderen Zweck:
Lo-Fi — Struktur testen
Grobe Skizzen oder einfache digitale Wireframes ohne Styling. Schnell zu erstellen, schnell zu verwerfen. Die Frage: „Ist das die richtige Struktur?"
Mid-Fi — Layout validieren
Detailliertere Wireframes mit realen Beschriftungen und Proportionen, aber ohne Markenfarben. Ideal für Stakeholder-Reviews. Die Frage: „Funktioniert das Layout?"
Hi-Fi — Ästhetik und Interaktion testen
Dem fertigen Produkt sehr ähnlich – mit echten Schriften, Farben und Interaktionen. Die Frage: „Fühlt sich das richtig an?"
Vergleich: Lo-Fi / Mid-Fi / Hi-Fi
Lo-Fi
3 min · grobe Skizze
Ist das die richtige Struktur?
Mid-Fi
30 min · klares Layout
Funktioniert das Layout?
Hi-Fi
4 std · pixelgenau
Fühlt sich das richtig an?
Ein häufiger Fehler ist der zu frühe Sprung zum Hi-Fi. Nutzer und Stakeholder neigen dazu, Feedback zur Ästhetik zu geben („Ich mag dieses Blau nicht"), statt zur Struktur – wenn der Prototyp fertig aussieht.
Interaktiv
Klickbarer Prototyp — Selbst ausprobieren
Ein Paper-Prototyp besteht aus einfachen Bildschirmen, die durch Nutzeraktionen (Klick, Tippen) verbunden werden. So lässt sich ein Ablauf testen, bevor eine einzige Zeile Code geschrieben wird.
Interaktive Demo
So funktioniert ein klickbarer Paper-Prototyp: Einzelne Bildschirme werden durch Aktionen (Klick, Tippen) miteinander verbunden — ganz ohne echten Code.
Klicke dich durch diese Café-Bestell-App und beobachte, wie drei einfache Screens bereits ein testbares Erlebnis erzeugen:
Guten Morgen!
Was darf es heute sein?
Screen: Speisekarte — Alle Produkte auf einen Blick
Navigationsfluss
Fang mit der grobsten möglichen Darstellung an. Verfeinere nur, wenn die Struktur validiert ist. Code ist der teuerste Weg, eine Idee zu testen – und Papier ist der günstigste.