Wireframes: warum eine Website mit grauen Kästen beginnt

Das Erste, was Kunden von ihrer neuen Website sehen, überrascht sie oft: graue Kästen, durchgekreuzte Platzhalter, wo Bilder hinkommen, Linien, wo Text stehen wird. Keine Farben, keine Fotos, keine Schriften. Das ist Absicht.

Das sind Wireframes, der Grundriss einer Website. Sie klären, was wohin gehört, bevor jemand darüber spricht, wie es aussieht.

1. Wireframes: was sie sind

Ein Wireframe ist eine vereinfachte Skizze einer Seite. Er zeigt:

Welche Elemente eine Seite hat: Navigation, Überschrift, Text, Bilder, Buttons, Formulare.
Ihre Reihenfolge und Größe: was zuerst kommt, was am meisten Platz bekommt.
Wie Seiten zusammenhängen: wohin jeder Button und jeder Link führt.

Alles Visuelle lässt er bewusst weg. Ein Kasten mit Kreuz heißt „hier kommt ein Bild hin“. Ein paar Linien heißen „hier steht ein Absatz Text“.

2. Grau: warum noch keine Farben

Das Design wegzulassen, hält das Gespräch bei Inhalt und Struktur:

Ist alles da, was Besucher brauchen? Und gibt es etwas, das niemand braucht?
Stimmt die Reihenfolge? Kommt das Wichtigste zuerst?
Ist der Weg klar? Kommt ein Besucher vom Ankommen bis zum Ziel, etwa einer Anfrage, ohne sich zu verlaufen?

Sobald Farben und Fotos auftauchen, wandert die Diskussion ganz natürlich zum Geschmack: „Mir wäre ein anderes Blau lieber.“ Auch das sind wichtige Fragen, aber sie kommen später und funktionieren auf einer soliden Struktur besser.

3. Inhalt: die Struktur folgt ihm

Wireframes funktionieren am besten mit echten Inhalten oder zumindest realistischen. Eine Überschrift, die in der Skizze drei Wörter und in Wirklichkeit zwölf lang ist, verändert das Layout. Wer Inhalte zusammen mit den Wireframes plant, auch als grobe Entwürfe, baut das Design um das, was wirklich auf der Seite stehen wird.

4. Mobil: der kleinste Bildschirm zuerst

Die meisten Wireframes beginnen beim Handy. Ein schmaler Bildschirm zwingt zu Entscheidungen: Es gibt Platz für eine Spalte, also muss die Reihenfolge der Elemente klar sein. Die größeren Layouts für Tablet und Desktop wachsen dann aus dieser Reihenfolge, statt eine Desktop-Seite hinterher aufs Handy zu quetschen.

5. Detailgrad: von der Skizze zum Klickbaren

Wireframes gibt es in verschiedenen Detailstufen:

Grob (Low Fidelity): schnelle Skizzen, auf Papier oder als einfache Kästen, um Möglichkeiten auszuloten.
Mittel (Mid Fidelity): saubere graue Layouts mit echten Überschriften und der tatsächlichen Seitenstruktur.
Klickbare Prototypen: Wireframes, die in einem Design-Tool verknüpft sind, damit sich der Ablauf auf einem echten Handy ausprobieren lässt, bevor etwas gebaut wird.

Welche Stufe nötig ist, hängt vom Projekt ab. Eine einfache Landingpage kann von der Skizze direkt ins Design gehen; eine Web-App mit vielen Bildschirmen profitiert von einem klickbaren Prototyp.

6. Feedback: Änderungen, solange es Skizzen sind

Feedback zu Wireframes ist besonders wertvoll. In dieser Phase ändert das Verschieben eines Abschnitts, eine neue Seite oder eine andere Reihenfolge von Schritten eine Skizze. Dieselbe Änderung später betrifft auch das fertige Design und den Code. Deshalb bekommt dieser Schritt Zeit und Aufmerksamkeit, und es lohnt sich, alle einzubeziehen, die mitreden.

7. Design: von grau zu fertig

Steht die Struktur, gibt das Design ihr ein Gesicht: Farben, Typografie, Bilder, Icons, Abstände, Bewegung. Weil die Struktur geklärt ist, kann sich das Design auf Stimmung und Marke konzentrieren, und die fertigen Seiten behalten die Klarheit, die die Wireframes geschaffen haben.

Die Kurzfassung

Wireframes sind der Grundriss einer Website: was wohin gehört und wie Seiten zusammenhängen.
Grau mit Absicht: Das Gespräch bleibt bei Inhalt und Struktur.
Echte Inhalte prägen das Layout von Anfang an.
Mobil zuerst: Der schmalste Bildschirm bestimmt die Reihenfolge.
Detailgrad reicht von Skizzen bis zu klickbaren Prototypen.
Feedback ist am wertvollsten, solange es noch Kästen sind.

Wenn du eine Website oder App Schritt für Schritt planen willst, melde dich.