Was ist ein Wireframe?
Stell dir vor, du baust ein Haus. Bevor irgendjemand über Wandfarbe oder Vorhänge redet, zeichnet der Architekt einen Grundriss. Wo ist die Küche, wo das Bad, wo geht die Treppe hoch? Genau das ist ein Wireframe — nur fürs Web. Er zeigt die Anordnung von Inhalten, Buttons, Bildbereichen und Texten, ohne dass auch nur ein Pixel finales Design enthält.
Wireframes sehen meistens aus wie schwarz-weiße Kästchenzeichnungen. Bilder werden durch ein Rechteck mit Kreuz markiert, Texte durch graue Linien angedeutet, Buttons als simple Rahmen. Das ist Absicht: Wer einen Wireframe ansieht, soll sich auf Struktur, Reihenfolge und Hierarchie konzentrieren — nicht auf "die Farbe gefällt mir nicht".
Wireframes gehören in die frühe Phase eines UX-Prozesses. Sie sind das günstigste Werkzeug, um eine Idee zu testen. Eine Skizze ändern dauert fünf Minuten. Ein fertiges Design ändern dauert Stunden. Code ändern dauert Tage.
Low-Fi vs. High-Fi Wireframes
Nicht jeder Wireframe sieht gleich aus. Je nach Phase und Zielgruppe wählt man eine andere Detailstufe.
| Typ | Detailgrad | Wofür gut |
|---|---|---|
| Low-Fi | Reine Kästchen, Platzhaltertexte, Schwarz-Weiß | Schnelle Ideen-Tests, Brainstorming, Konzeptklärung |
| Mid-Fi | Echte Texte, grobe Hierarchien, klarer Aufbau | Abstimmung mit Kunden, erste Klick-Tests |
| High-Fi | Realistische Inhalte, Spacings, manchmal Graustufen | Übergang zum Mockup, letzte Strukturchecks |
Low-Fi-Wireframes kannst du auf einer Serviette zeichnen — und das ist nicht ironisch gemeint. Viele große Produkte sind genau so entstanden. High-Fi-Wireframes laufen meistens in einem Tool wie Figma oder Balsamiq.
Wie funktioniert die Arbeit mit Wireframes?
Ein typischer Wireframe-Prozess läuft in drei Schritten ab:
- Inhalte sammeln. Was muss auf die Seite? Welche Sektionen, welche Texte, welche Calls-to-Action? Ohne Inhalt keine Struktur.
- Reihenfolge festlegen. Was sieht der Besucher zuerst? Was kommt darunter? Welche Reihenfolge führt am ehesten zur Aktion?
- Skizzieren. Erst grob, dann verfeinern. Mit Stift, mit Tool, egal — Hauptsache schnell.
In dieser Phase wird viel gestritten und viel gestrichen. Genau deswegen sind Wireframes so wertvoll. Wer in der Skizze merkt, dass die Preisliste vor den Vorteilen steht und das Quatsch ist, spart sich später eine Komplett-Überarbeitung.
Ein enger verwandter Begriff ist der Userflow: das Diagramm, das zeigt, welche Schritte ein Besucher von seinem Einstieg bis zu einer Aktion (z.B. Kontaktformular abschicken) zurücklegt. Wireframes zeigen einzelne Seiten, Userflows zeigen den Weg zwischen ihnen. In der Praxis arbeitet man oft parallel — erst den Flow skizzieren, dann die einzelnen Stationen als Wireframes ausarbeiten. Ohne Flow baust du schöne Einzelseiten, die zusammen keinen Weg ergeben.
Warum sind Wireframes für deine Website wichtig?
Wireframes zwingen dich, früh über Inhalte und Struktur nachzudenken — bevor irgendjemand über das Logo streitet. Ohne diesen Schritt entsteht oft das, was wir bei Übernahmen ständig sehen: hübsche Seiten, die niemandem helfen. Schöne Hero-Bilder ohne Aussage. Buttons, die ins Leere führen. Sektionen, die keiner braucht.
Mit einem Wireframe stellst du sicher, dass deine Hero Section das Richtige zeigt, dass die Navigation Sinn ergibt und dass jeder Bereich einer Aufgabe folgt. Erst wenn das steht, wird gestaltet.
Beispiel: Ein Steuerberater will seine Website neu bauen lassen. Im Wireframe-Workshop wird klar, dass das wichtigste Element nicht das Team-Foto ist, sondern eine eindeutige Liste, für welche Branchen und Unternehmensgrößen die Kanzlei arbeitet. Hätte man direkt mit dem visuellen Design angefangen, wäre das untergegangen — und mit ihm die meisten Anfragen.
Tools für Wireframes
Du brauchst kein teures Programm, um Wireframes zu bauen. Diese sind verbreitet und gut:
- Stift und Papier — für die ersten Ideen ungeschlagen schnell.
- Figma — der Standard für Webdesigner, mit Wireframe-Bibliotheken.
- Balsamiq — bewusst skizzig, hält die Diskussion auf Struktur-Ebene.
- Whimsical — schlank, schnell, gut für Konzept-Workshops.
- Miro — wenn mehrere Leute gleichzeitig brainstormen sollen.
Welches Tool du wählst, ist zweitrangig. Wichtig ist, dass du es überhaupt machst.
Häufige Fehler bei Wireframes
Zu früh schön machen wollen. Wer im Wireframe schon Farben und Bilder einbaut, redet automatisch nicht mehr über Struktur — sondern über Geschmack.
Ohne echte Inhalte arbeiten. "Lorem ipsum" sieht harmlos aus, verschleiert aber die Wahrheit: dass die Headline zu lang ist, die Beschreibung fehlt oder das Angebot unklar bleibt. Echte Texte rein, auch wenn sie roh sind.
Den Wireframe als finales Layout verstehen. Ein Wireframe ist eine Diskussionsgrundlage, kein Vertrag. Was in der Mockup-Phase besser funktioniert, wird angepasst.
Mobile vergessen. Wenn die Hälfte deiner Besucher vom Handy kommt, sollte mindestens eine mobile Wireframe-Variante existieren.