Was ist ein Wireframe?
Bevor ein Haus gebaut wird, gibt es einen Grundriss. Keine Tapete, keine Fliesen, nur Wände, Türen und die Frage: Wo ist die Küche? Ein Wireframe ist genau das für deine Website.
Es zeigt mit Kästen, Linien und Platzhaltern, was auf einer Seite steht und in welcher Reihenfolge: Kopf mit Menü, Bildfläche, Überschrift, Textblöcke, Knopf, Fußzeile. Die Interaction Design Foundation beschreibt Wireframes als einfache visuelle Darstellung, die Struktur und Layout einer Seite skizziert. Balsamiq nennt sie das Skelett eines digitalen Projekts.
Was fehlt, fehlt mit Absicht: Farben, Schriften, echte Fotos. Sobald Farbe im Spiel ist, diskutiert jeder über Blau oder Grün. Beim Wireframe redet ihr über die wichtigere Frage: Findet der Besucher, was er sucht?
Was in ein Wireframe gehört
- Aufbau: welche Bereiche es gibt und wie groß sie ungefähr sind
- Rangfolge: was zuerst ins Auge fallen soll, was weiter unten steht
- Navigation: Menü, Links, wohin ein Klick führt
- Inhaltsarten: Text, Bild, Formular, Video, Knopf — als Platzhalter
Low-Fidelity oder High-Fidelity?
„Fidelity“ heißt Detailtreue. Wireframes gibt es grob und fein, Figma unterscheidet drei Stufen:
Stufe
So sieht es aus
Low
Bleistift oder graue Kästen, Platzhaltertext, in Minuten gezeichnet
Mid
sauber am Rechner, mit Anmerkungen und ersten echten Inhalten
High
echte Texte, genaue Abstände und Größen, kurz vor dem Design
Für die meisten KMU-Websites reicht Low oder Mid. Je früher das Wireframe, desto gröber darf es sein — dann ändert es sich auch leichter. Interaktiv ist ein Wireframe übrigens nicht: Sobald man sich durchklicken kann, sprechen die meisten schon von einem Prototyp.
Wireframe, Mockup, Prototyp: der Unterschied
Die drei Begriffe werden ständig durcheinandergeworfen. Die Reihenfolge, wie Balsamiq sie beschreibt, hilft beim Merken:
- Wireframe: der Aufbau. Was steht wo?
- Mockup: das Aussehen. Farben, Schriften, Marke, Bilder — statisch, wie ein Foto der fertigen Seite.
- Prototyp: die Bedienung. Man kann klicken und testen, ob der Ablauf funktioniert.
Und das Moodboard? Das ist fast das Gegenstück: Es zeigt Stimmung und Stil ganz ohne Aufbau. Das Wireframe zeigt den Aufbau ganz ohne Stil. In der Praxis verschwimmen die Grenzen — ein sehr detailliertes Wireframe sieht schon fast wie ein Mockup aus. Wichtig ist nicht das Etikett, sondern dass ihr wisst, worüber ihr gerade redet.
Warum sich das lohnt
Der Hauptgrund ist Geld. Eine Kiste auf Papier zu verschieben kostet Sekunden. Dieselbe Änderung an einer programmierten Seite kostet Stunden. Jakob Nielsen schätzte 2003, dass eine Änderung vor dem Programmieren rund 100-mal billiger ist als danach — ausdrücklich eine Erfahrungsschätzung, keine Messung. Die Richtung kennt aber jeder, der schon mal ein fertiges Menü umbauen musste.
Der zweite Grund: Grobe Entwürfe taugen schon zum Testen. Das zeigen ältere Studien zu einfachen Papier-Prototypen, die sich auf Wireframes übertragen lassen.
Studie 1 · Lesegerät
Papier gegen Rechner-Prototyp
34 zu 32
Probleme gefunden
38 % zu 34 %
je Testperson
Kein messbarer Unterschied zwischen fein und grob
Virzi, Sokolov und Karis (CHI 1996), je zehn Testpersonen, zuerst der Rechner-Prototyp, dann der Papierentwurf.
Studie 2 · Sprachmenü
Telefonmenü fein und grob getestet
19 zu 20
Probleme gefunden
40 % zu 46 %
je Testperson
Der grobe Entwurf lag sogar leicht vorn
Gleiche Studie, zweites Experiment. Fazit der Autoren: Grobe Prototypen helfen im ganzen Entwicklungsprozess.
Die Stichproben sind klein und die Studien alt. Ein Überblick von MeasuringU über elf Studien von 1990 bis 2013 kommt aber zum selben Schluss: Die Detailtreue spielt für das Finden von Bedienproblemen eine kleinere Rolle als gedacht. Für Aussagen über Optik und Zeitbedarf taugen grobe Entwürfe dagegen weniger.
Häufige Fehler
Fehler 1 · Zu früh gestalten
Farbe, Logo, schöne Bilder — und schon redet niemand mehr über den Aufbau. Bleib im Wireframe bei Grau. Gestaltung kommt danach.
Fehler 2 · Nur Lorem ipsum
Blindtext ist bequem, aber trügerisch. Ob deine Überschrift drei oder dreizehn Wörter hat, verändert das Layout. Schreib wenigstens die wichtigsten Überschriften und Knopftexte echt hinein.
Fehler 3 · Einzelseiten ohne Weg
Fünf hübsche Wireframes, aber keiner weiß, wie man von der Startseite zur Anfrage kommt. Zeichne die Pfeile mit ein. Die Nielsen Norman Group nennt das Wireflow: Wireframes plus vereinfachter Ablauf.
Fehler 4 · Erst am fertigen Design fragen
Das Wireframe ist der billigste Moment für Feedback — von Kunden, Kollegen, echten Nutzern. Wer es nur abheftet, verschenkt seinen größten Vorteil.
Womit du Wireframes baust
- Papier und Bleistift: unschlagbar für die ersten zehn Minuten
- Balsamiq: bewusst skizzenhaft, damit niemand das Ergebnis für fertig hält
- Figma: Standard für Design-Teams, mit Vorlagen für Wireframes und dem Weg weiter zu Mockup und Prototyp
- Miro und Whimsical: gut, wenn mehrere Leute gleichzeitig auf einem Board arbeiten
Häufige Fragen
Brauche ich für eine kleine Website überhaupt ein Wireframe?
Ja, aber es darf klein sein. Schon eine Skizze der Startseite und der wichtigsten Unterseite auf Papier klärt, was hinein soll. Das spart später Abstimmungsrunden mit Agentur oder Designer.
Wer erstellt das Wireframe?
Meist der Designer oder die Agentur. Es lohnt sich aber, selbst eine grobe Skizze mitzubringen. Du kennst deine Kunden und ihre Fragen am besten — und eine Skizze zeigt schneller als jede Mail, was dir wichtig ist.
Kann ich mit einem Wireframe schon testen?
Ja. Leg es fünf Leuten vor und frag: Wo würdest du klicken, um ein Angebot anzufragen? Studien zu groben Entwürfen fanden ähnlich viele Bedienprobleme wie mit ausgefeilten Versionen.
Was ist der Unterschied zwischen Wireframe und Mockup?
Das Wireframe zeigt den Aufbau einer Seite, das Mockup ihr Aussehen. Erst klärst du, was wo steht, dann, in welchen Farben und Schriften.
