Was sind Wireframes?

Wer zum ersten Mal ein Website- oder App-Projekt begleitet, stolpert früh über einen Begriff: Wireframe. Gemeint ist ein bewusst unfertig gehaltener Entwurf – das Skelett der Seite, bevor Farben, Bilder und Schriften ins Spiel kommen. Warum dieser scheinbar unfertige Schritt Geld spart und wie Sie ihn in einem Angebot richtig einordnen, erklärt dieser Artikel.

Eine Definition: der Bauplan vor dem Einzug

Ein Wireframe zeigt die Struktur einer Seite: Welche Bereiche gibt es, wo stehen sie, welches Element hat welche Aufgabe – und was passiert, wenn jemand darauf klickt. Bewusst fehlen dabei Farben, Bilder und Typografie. Der Vergleich liegt nahe: Ein Architekt plant zuerst den Grundriss und fragt nicht als Erstes, welche Tapete ins Wohnzimmer kommt.

Genau diese Reihenfolge schützt vor teuren Fehlern. Über einen Grundriss lässt sich in Minuten streiten und ihn in Minuten ändern – über eine fertig tapezierte Wand nicht mehr.

Was ein Wireframe zeigt – und was nicht

Ein Wireframe beantwortet Strukturfragen:

• Welche Inhalte stehen auf der Seite, in welcher Reihenfolge?
• Wo sitzt die Navigation, wo der Inhalt, wo die Handlungsaufforderung?
• Welche Varianten gibt es für kleine Bildschirme?
• Wie hängen die Seiten untereinander zusammen?

Bewusst unbeantwortet bleiben alle Gestaltungsfragen: Welche Farben, Schriften, Bildwelten und Abstände später zum Einsatz kommen, ist hier noch kein Thema. Das ist kein Mangel, sondern der Zweck der Übung – denn Strukturfragen und Gestaltungsfragen gleichzeitig zu klären überfordert jede Besprechung.

Der Nutzen: frühe Entscheidungen, günstige Korrekturen

Der eigentliche Wert von Wireframes liegt in der Verschiebung von Entscheidungen nach vorn. Drei Effekte:

• Korrekturen kosten fast nichts. Ein Element im Wireframe zu verschieben, ist eine Bewegung im Entwurfsprogramm. Dasselbe in einer fertig gestalteten und programmierten Seite zu ändern, bedeutet Designarbeit und Code-Anpassung – ein Vielfaches des Aufwands.
• Alle diskutieren über dasselbe. Solide Struktur-Entwürfe verhindern das klassische Missverständnis: Der Auftraggeber stellt sich unter „Übersicht" etwas anderes vor als die Umsetzer. Der Wireframe macht sichtbar, was gemeint ist.
• Inhalte werden früh geplant. Wer einen Wireframe füllt, merkt sofort, welche Texte und Bilder fehlen – bevor die fertige Seite auf Inhalte wartet.

Projekte, die diesen Schritt überspringen, verlagern die Strukturdebatte in die Gestaltungsphase – den teuersten Moment, um sie zu führen.

Von grob bis detailreich: die Abstufungen

Wireframes gibt es in verschiedenen Ausbaustufen – je nach Projektphase:

• Grobe Skizzen: mit Stift auf Papier oder dem Whiteboard, in Minuten erstellt. Ideal, um Ideen im Gespräch zu sortieren.
• Digitale Struktur-Entwürfe: sauberere Darstellungen mit echten Textbausteinen und Größenverhältnissen. Die übliche Arbeitsgrundlage für Abstimmungen.
• Detailreiche Klickmodelle: Entwürfe, die Verhalten und Übergänge bereits simulieren – der Übergang zum klickbaren Prototyp, wie ihn unser Beitrag zur Funktionsweise von Prototypen beschreibt.

Welche Stufe sinnvoll ist, hängt vom Risiko ab: Eine einfache Startseite braucht keine detailreiche Simulation; ein mehrstufiger Bestellprozess schon.

Wireframes im Projektangebot richtig einordnen

Wenn Ihr Angebot einen Entwurfs-Schritt enthält, ist das kein Aufpreis-Trick, sondern ein Qualitätsmerkmal: Es bedeutet, dass Struktur und Ablauf vor der Gestaltung geklärt werden – die günstigste Stelle für Korrekturen. Fehlt der Schritt bei einem umfangreichen Vorhaben komplett, sollten Sie nachfragen, wann und wo über Strukturfragen entschieden wird.

Umgekehrt gilt: Erwarten Sie von einem Wireframe kein fertiges Erscheinungsbild. Wer den Struktur-Entwurf mit den Augen des fertigen Designs beurteilt, verwechselt Bauplan und eingerichtete Wohnung. Die Gestaltung folgt im nächsten Schritt – auf Grundlage der abgestimmten Struktur. Wie dieser Schritt in ein vollständiges Gestaltungskonzept eingebettet ist, beschreibt unser Überblick zum UI/UX-Design.

Häufige Fragen

Warum nicht gleich gestalten?

Weil Gestaltung Strukturfragen nicht beantwortet, sondern verdeckt. Über Farben lässt sich endlos diskutieren – während die eigentliche Frage noch offen ist, ob die Seite richtig aufgebaut ist. Erst Struktur, dann Gestaltung – diese Reihenfolge spart in fast jedem Projekt Zeit und Geld.

Kann ich Wireframes selbst skizzieren?

Durchaus – Papier und Stift reichen. Wichtig ist nur, dass die Skizze mit den Umsetzern abgestimmt wird, bevor gestaltet oder programmiert wird. Die Qualität der Skizze ist zweitrangig; entscheidend ist, dass alle dasselbe darunter verstehen.

Was kostet dieser Schritt?

Abhängig vom Umfang der Seiten: Für eine Handvoll Seiten ist es ein überschaubarer Anteil des Gesamtprojekts – und in seriösen Angeboten als eigener Posten sichtbar. Entscheidend ist die Einordnung: Dieser Schritt verhindert Korrekturen, die später ein Vielfaches kosten würden.

Was kommt nach dem Wireframe?

Je nach Projekt zwei Dinge: die visuelle Gestaltung auf Basis der abgestimmten Struktur und – bei komplexeren Abläufen – ein klickbares Modell, das Verhalten und Übergänge prüfbar macht. Danach folgt die Umsetzung. Unser Beitrag über Prototypen beschreibt den Zwischenschritt im Detail.