Wireframing: Lo-Fi, Mid-Fi und der Übergang zum Mockup
Effektive Wireframes erstellen, Best Practices kennen und wissen, wann der Übergang vom Wireframe zum Hi-Fi-Mockup sinnvoll ist.
- Den Zweck eines Wireframes erklären – und wann er kein Mockup sein sollte
- Lo-Fi-Wireframes mit korrekter Notation und Anmerkungen erstellen
- Den Übergang vom Wireframe zum Hi-Fi-Mockup begründen können
- Einen Mid-Fi-Wireframe visuell polieren, ohne Hi-Fi zu bauen
Definition
Was ist ein Wireframe?
Ein Wireframe ist ein struktureller Grundriss eines Bildschirms. Er zeigt das Layout, die Inhaltshierarchie und die interaktiven Elemente einer Seite – ohne jedes visuelle Styling. Wireframes kommunizieren, was auf einem Bildschirm ist und wie es organisiert ist – nicht wie es aussieht.
Wireframes sind die wichtigste Brücke zwischen Informationsarchitektur und visuellem Design. Sie zwingen dich, strukturelle Entscheidungen zu treffen – wie viel Platz braucht jedes Element, was ist die Lesereihenfolge, was passiert, wenn keine Daten vorhanden sind – bevor du Zeit für Ästhetik aufwendest.
Stufe 1
Lo-Fi-Wireframes
Lo-Fi-Wireframes verwenden die einfachstmögliche Darstellung jedes Elements. Text wird als Linien dargestellt, Bilder als graue Boxen mit einem Label, Buttons als Rechtecke. Der Zweck ist Geschwindigkeit und Verwerfbarkeit.
Konsistente Notation
Verwende dieselben Symbole für jeden Elementtyp (immer eine graue Box für Bilder, immer Linien für Text). Inkonsistenz lenkt ab.
Anmerkungen hinzufügen
Kurze Notizen, die erklären, was jedes Element tut und warum es da ist. Anmerkungen sind oft wichtiger als das Wireframe selbst.
Mehrere Zustände zeigen
Leer, Laden, Fehler, Erfolg – auch auf Lo-Fi-Ebene. Ein Wireframe ohne Zustände ist unvollständig.
Flow, nicht Einzelbild
Designe nie isoliert. Wireframe den vollständigen Nutzerflow, nicht nur einzelne Bildschirme.
Lo-Fi Wireframe: E-Commerce Suchergebnisse
Keine Farbe, keine StylesFilter-Sidebar: kollabierbar auf Mobile
Produktkarte: Bild, Titel, Preis, CTA — in dieser Reihenfolge
Paginierung: statt Infinite Scroll für E-Commerce
Stufe 2
Mid-Fi-Wireframes
Mid-Fi-Wireframes sind ausgefeilter. Sie verwenden echte Inhaltsbeschriftungen, realistische Proportionen und zeigen das Layout präziser – aber immer noch ohne Markenfarben oder benutzerdefinierte Typografie. Alles bleibt in Grautönen.
Mid-Fi-Wireframes sind ideal für Stakeholder-Reviews. Sie sind spezifisch genug, um strukturelle Fragen zu beantworten – aber abstrakt genug, dass sich niemand auf Farbwahl fixiert.
Mid-Fi Wireframe: Gleiche Struktur, mehr Präzision
Grautöne, reale LabelsKategorien
Preis
24 Ergebnisse
Der entscheidende Moment
Wann zum Hi-Fi-Mockup wechseln?
Der typische Ablauf: Lo-Fi-Skizze → Stakeholder-Review → Überarbeitungen → Mid-Fi-Wireframe → Nutzertest → Überarbeitungen → Hi-Fi-Mockup → Entwickler-Übergabe.
Die entscheidende Frage
„Wissen wir genug über die Struktur, um sie gut aussehen zu lassen?"
Wenn du noch unsicher bist, ob das Layout funktioniert – bleib bei Wireframes. Wenn die Struktur validiert ist – wechsle zu Hi-Fi.
Wireframes sind Werkzeuge, keine Deliverables. Ihre Aufgabe ist es, strukturelle Entscheidungen zu dokumentieren und zu validieren – nicht zu beeindrucken. Zu früh Hi-Fi bedeutet: Zeit für Schönheit, bevor die Struktur stimmt.