Wireframe für die Premium-Mittelstands-Site: Skizze schlägt fertiges Design

Wireframes werden im Mittelstand oft als „Vorstufe für die richtigen Sachen“ gesehen. Ein notwendiges Übel, bevor das richtige Design beginnt. Schade — denn der Wireframe ist die wichtigste Stelle, an der die Premium-Wirkung entsteht. Nicht später beim Design. Hier, in der grauen Skizze.

Premium-Wirkung entsteht in der Struktur, nicht in der Optik

Eine Site wirkt nicht teuer, weil sie schöne Schriften hat. Sie wirkt teuer, weil sie eine klare Botschaft hat — und Raum darum, damit die Botschaft atmen kann. Das ist Struktur-Entscheidung, nicht Design-Entscheidung. Genau deswegen lebt Premium-Wirkung im Wireframe.

Drei Strukturen, die immer Premium-Wirkung erzeugen — unabhängig von Farbe und Schrift:

• Großer Weißraum: 30–40 % der sichtbaren Fläche bleibt leer. Nichts. Auch keine Hintergrund-Muster. Premium-Sites haben weniger pro Schirm, nicht mehr.
• Eine Hauptbotschaft pro Seite: Eine Seite, ein Versprechen. Wer fünf Botschaften gleichzeitig sendet, sendet keine — alle löschen sich gegenseitig aus.
• Klare Hierarchie: Welches Element ist Stufe 1 (Hero-Botschaft), welches Stufe 2 (Unterstützung), welches Stufe 3 (Detail)? Wenn alles gleich groß ist, ist nichts wichtig.

Der Verdichtungs-Test

Schau dir deinen aktuellen Wireframe-Entwurf an. Frag dich: Wenn ich die Hälfte aller Elemente streiche — geht etwas Wesentliches verloren? In den meisten Fällen lautet die Antwort: nein. Du hast unbewusst Elemente reingebaut, die niemand vermissen würde.

Premium-Wirkung entsteht durch Verzicht. Welche Sektion erzählt was Wichtiges? Welche ist „nice to have“? Streichen, was nicht trägt. Das ist anstrengend, weil jede Sektion nach Existenz-Berechtigung kämpft — aber genau dieser Kampf macht den Unterschied.

Vier Seitentypen reichen

Viele Mittelstands-Projekte erfinden zehn unterschiedliche Seitentypen — Startseite, Über-uns, Leistungen, Referenzen, Blog, Kontakt, Karriere, FAQ, Glossar, Impressum. Für die meisten KMU reichen vier Typen:

1. Hub-Seite

Die zentrale Sammel-Seite für eine Themen-Welt. Beispiele: Startseite, Themen-Übersicht im Ratgeber, eine Cluster-Seite. Sie hat eine klare Hierarchie und verlinkt in mehrere Unterbereiche. Wireframe: großer Hero, drei bis fünf Cluster-Kacheln, kein langer Text-Strom.

2. Produkt-Landingpage

Eine Seite pro Produkt oder Leistung, mit klarem Versprechen, drei bis fünf Sektionen, einem dominanten Call-to-Action. Beispiele: /website, /webshop, /onepager. Wireframe: Hero mit Hauptversprechen, Schmerz-Sektion, Mechanik-Sektion, Festpreis-Hinweis, Mini-Story-Sektion, FAQ-Block, Closing-CTA.

3. Berater-Artikel

Ein Wissens-Artikel im Ratgeber oder Blog. Standardisierte Struktur: TL;DR-Box oben, klare H2-Sektionen, „Was wir bei uns daraus machen“-Box vor FAQ, FAQ-Block, Übergabe-Block mit drei Links. Wireframe ist immer gleich — der Schreib-Stil macht den Unterschied.

4. Audit-Seite (Werkzeug-Seite)

Eine Seite, auf der etwas Interaktives passiert. Beispiele: URL-Audit, Termin-Buchung, Kontaktformular. Wireframe: minimal-prominentes Eingabefeld, kurze Erklärung darunter, ein klares CTA-Element. Nichts ablenkendes.

Was nicht funktioniert

Drei Wireframe-Muster, die im Mittelstand immer wieder auftauchen — und die wir konsequent ablehnen:

• Slider im Hero: Mehrere wechselnde Botschaften. Sieht dynamisch aus, ist aber faktisch eine Vermeidung von Entscheidung. Jeder Slide wird kürzer gelesen als der davor, bis niemand mehr liest.
• Vier Spalten mit Icons: „Unsere Werte“ oder „Was uns auszeichnet“ mit vier Icon-Kacheln. Wirkt füllig, sagt nichts. Streichen.
• Hintergrund-Video: Stockvideo läuft im Hero. Ablenkung ohne Mehrwert, mobile-Performance-Killer, und sieht in zwei Jahren altbacken aus.

Mobile-First im Wireframe

60–80 % deiner Besucher kommen mobil. Der Wireframe sollte also zuerst mobil gedacht sein. Das zwingt zur Disziplin: Auf einem Mobile-Bildschirm hat ein Hero etwa 600 Pixel Höhe — was passt da hin? Headline, Untertitel, ein CTA. Mehr nicht.

Aus dieser Mobile-Disziplin entsteht die Premium-Struktur fast automatisch. Wer zu viel rein will, merkt sofort, dass es nicht passt. Beim Desktop kann man später mehr nebeneinander zeigen — aber die Kern-Struktur muss mobil tragen.

Wireframe-Werkzeuge: einfach reicht

Es gibt aufwendige Wireframe-Werkzeuge mit Bibliotheken, Kollaboration, Versionierung. Für die meisten KMU-Projekte überdimensioniert. Was reicht:

• Papier und Bleistift, fotografiert
• Ein einfaches Vektor-Werkzeug mit grauen Kästen
• HTML-Skelette mit Tailwind oder einem simplen Style — wenn der Designer das schnell baut, kann man direkt im Browser klicken

Hauptsache: keine Farben, keine Bilder, keine fertige Typografie. Reinste Funktions-Skizze.

Wireframe-Abnahme als formaler Punkt

Wenn der Wireframe steht, ist es wichtig, ihn formal abnehmen zu lassen. Nicht im informellen „passt schon“-Modus, sondern explizit: Der Kunde sagt, dass Struktur und Funktion so passen — und dass die Design-Phase auf dieser Basis startet. Damit kommt das Strukturthema in der Design-Phase nicht wieder hoch. Diese kleine formale Geste spart in fast jedem Projekt eine Korrektur-Runde.

Was Hannes daraus macht

Wir bauen unsere Wireframes in einem schlichten Tool, das aussieht wie eine Skizze — bewusst, damit der Kunde nicht in den Design-Modus rutscht. Die Wireframe-Abnahme ist ein eigener Termin mit Protokoll. Erst wenn der unterschrieben ist, beginnt Design. Diese Trennung wirkt formell, aber sie ist die schmerzfreiste Variante — für beide Seiten. Wir haben dadurch in den letzten zwölf Monaten zwei Projekte unter Zeitvorgabe geliefert, die ohne diese Trennung in Korrektur-Schleifen gelandet wären.

Wenn du an einer Wireframe-Phase sitzt und unsicher bist, ob deine Skizze schon trägt, ist der einfachste Test: Druck den Wireframe in Graustufen aus, leg ihn drei Tage zur Seite, lies ihn dann frisch. Ob du nach drei Tagen noch verstehst, was die Seite tut — das ist die ehrliche Probe.