Screendesign
Wireframing und Prototyping – Ideen vor dem Code testen
Wireframes und Prototypen sind die Sprache zwischen Idee und fertigem Produkt. Sie machen Designentscheidungen sichtbar, bevor Code geschrieben wird — und ermöglichen frühe, günstige Korrekturen. Ein Fehler im Wireframe zu finden kostet Minuten. Denselben Fehler nach dem Launch zu finden kostet Wochen.
Wireframe vs. Prototyp — der Unterschied
Interaktivität
Wireframe: Keine oder minimal — Prototyp: Klickbar, simuliert Interaktionen
Fidelity
Wireframe: Low bis Mid — Prototyp: Mid bis High
Zweck
Wireframe: Layout und Struktur zeigen — Prototyp: Flows und Interaktionen testen
Erstellungszeit
Wireframe: Schnell (Minuten bis Stunden) — Prototyp: Langsamer (Stunden bis Tage)
Einsatz
Wireframe: Frühe Konzeptphase — Prototyp: Testing und Präsentation
Fidelity-Stufen
Low Fidelity (Lo-Fi)
Schnelle Skizzen auf Papier oder mit einfachen digitalen Tools. Graue Boxen und Linien statt echtem Content. Keine Details, keine Farben. Ideal für: erste Ideen testen, Layouts diskutieren, schnelle Iteration. Vorteil: so schnell zu erstellen dass man keine Angst hat sie wegzuwerfen.
Mid Fidelity
Klarer strukturierter als Lo-Fi, aber immer noch ohne visuelle Ausarbeitung. Echte Texte (oder Lorem Ipsum), echte UI-Elemente (Buttons, Inputs), keine Farben außer Grautönen. Ideal für: Informationsarchitektur validieren, User Flows testen, Entwickler-Briefing.
High Fidelity (Hi-Fi)
Vollständig ausgearbeitetes Design: echte Inhalte, echte Farben, echte Typografie, Animationen. Kaum von der fertigen Website zu unterscheiden. Ideal für: finales Nutzer-Testing, Stakeholder-Präsentation, Entwicklungs-Handoff.
So niedrig wie möglich starten
Die häufigste Fidelity-Falle: zu früh zu hochwertig. Wenn ein Wireframe zu professionell aussieht, wollen Stakeholder und Nutzer keine grundlegenden Änderungen mehr vorschlagen — es sieht ja schon so fertig aus. Lo-Fi signalisiert: Das ist noch nicht final, wir freuen uns über Feedback.
Wireframing-Tools
Figma
Digital, kollaborativ — Marktstandard, Prototyping, Design-System — Free / ab 15$/Mo
Whimsical
Digital, einfach — Schnell, intuitiv, Flowcharts — Free / ab 10$/Mo
Balsamiq
Digital, Lo-Fi — Bewusst skizzenhafte Optik — ab 9$/Mo
Miro
Whiteboard — Kollaboration, große Flächen — Free / ab 8$/Mo
Stift und Papier
Analog — Schnellstes Medium überhaupt — Kostenlos
Prototyping in Figma
Figma ist 2026 der de-facto-Standard für UX-Prototyping. Designs werden direkt im selben Tool in klickbare Prototypen verwandelt — ohne Code, ohne Export. Interaktionen, Übergänge, Hover-States und komplexe Flows sind ohne Programmierung möglich.
Einfacher Click-Through-Prototyp
Frames verlinken: Element anklicken -> Prototyp-Tab -> Ziel-Frame verbinden. Ergibt einen klickbaren Prototyp der wichtige User Flows simuliert. Reicht für die meisten Usability Tests.
Interaktive Komponenten
Figma Interactive Components ermöglichen Hover-States, Toggle-States und andere Micro-Interactions direkt in Komponenten. Macht Prototypen realistischer ohne komplexe Overlay-Logik.
Variables und Conditional Logic
Figma Variables (2023 eingeführt) ermöglichen dynamische Prototypen: Formulare die Eingaben speichern, Zustände die sich über den Flow merken, Dark/Light-Mode-Switching. Nähert sich Code-Prototypen in der Realismus-Stufe.
Prototype-Sharing
Figma-Prototypen per Link teilen — kein Figma-Account für Viewer nötig. Für Remote Usability Tests mit Teilnehmern die nicht mit Figma vertraut sind ideal.
Wann welchen Ansatz?
Papier-Sketches
Am Anfang jedes Projekts. Ideen generieren, Layouts diskutieren, User Flows skizzieren. Kein Tool aufmachen — Stift und leeres Papier.
Lo-Fi-Wireframes
Nach ersten Sketches: Strukturen digitalisieren, mit Team und Stakeholdern diskutieren, erste Nutzer-Interviews mit einfachen Mockups.
Mid-Fi-Wireframes
Wenn Grundstruktur klar ist: Informationsarchitektur feintunen, interne Reviews, erste Usability Tests für Flow-Validierung.
Hi-Fi-Prototyp
Wenn Struktur und Flows validiert sind: finales Nutzer-Testing mit repräsentativen Designs, Stakeholder-Freigabe, Entwicklungs-Handoff.
Häufig gestellte Fragen zum Thema Wireframing und Prototyping
Figma ist zum Marktstandard geworden — Kenntnisse sind praktisch unverzichtbar für professionelle UX-Designer. Für Einsteiger: Figma hat einen kostenlosen Plan und exzellente offizielle Tutorials. Die Lernkurve ist steiler als bei anderen Tools, aber die Investition lohnt sich.
Ein Prototyp simuliert ein Produkt — er ist nicht funktional, sondern eine Darstellung. Ein MVP (Minimum Viable Product) ist ein echtes, funktionierendes Produkt mit minimalem Feature-Set. Prototypen testen das Design, MVPs testen das Business-Modell und die Technologie.
Kommt drauf an was getestet wird. Flow und Struktur: Lo-Fi reicht. Visuelle Hierarchie, Lesbarkeit, emotionale Reaktionen: Hi-Fi nötig. Faustregel: Lo-Fi für frühe Tests (billiger, leichter zu ändern), Hi-Fi für finale Validierung.
Kontext setzen bevor zeigen: Warum wurde diese Struktur gewählt? Welches Nutzerproblem löst sie? Dann zeigen. Explizit um Feedback zu Struktur und Funktion bitten, nicht zu Farben und Fonts. Bei Lo-Fi: explizit sagen dass es noch kein finales Design ist.