Wireframe

Ein Wireframe ist ein schematischer Entwurf einer Webseite, der Aufbau, Inhaltsbereiche und Reihenfolge zeigt, aber noch keine endgültige Gestaltung. Statt Farben und Fotos gibt es einfache Kästen und Platzhalter. So klärst du früh, was auf eine Seite gehört, bevor Design und Programmierung Geld kosten.

Kurz zusammengefasst:

• Ein Wireframe klärt Struktur und Inhalt, nicht das Aussehen.
• Er ist schnell gezeichnet und leicht zu ändern.
• Späte Änderungen im fertigen Code kommen deutlich teurer.
• Vom Mockup und Prototyp unterscheidet er sich im Detailgrad.
• Er ersetzt weder Texte noch Design, bereitet beide aber vor.

Was ein Wireframe zeigt

Ein Wireframe beantwortet Fragen der Anordnung: Wo steht die Kernaussage? Welche Abschnitte folgen in welcher Reihenfolge? Wo sitzt der CTA, und was passiert im Header? Bewusst offen bleiben dagegen Schriften, Farben und Bildauswahl. Dadurch sprechen alle Beteiligten über den Aufbau und nicht über den Blauton.

Das Ergebnis kann eine Bleistiftskizze sein oder eine schlichte Datei am Rechner. Entscheidend ist, dass echte Inhalte mitgedacht sind. Wer nur leere Kästen zeichnet, merkt erst später, dass die Leistungsbeschreibung drei Absätze länger ist als geplant. Das gilt besonders für Mobile First: Auf dem Smartphone rutscht alles untereinander, deshalb lohnt es sich, die Reihenfolge dort zuerst festzulegen.

Wireframe, Mockup, Prototyp

Die drei Begriffe werden oft durcheinandergeworfen, unterscheiden sich aber darin, wie nah sie dem fertigen Ergebnis kommen.

Die Grenzen sind fließend. Die Nielsen Norman Group behandelt Wireframes als Beispiel für eine Darstellung mit niedrigem Detailgrad und betont: Auch einfache Entwürfe lassen sich bereits mit Nutzern testen.

Was das für deinen Betrieb bedeutet

Für den Handwerksbetrieb heißt das: Du musst keine Designsprache verstehen, um mitzureden. Auf einem Wireframe erkennst du sofort, ob deine wichtigste Leistung fehlt oder ob die Telefonnummer zu weit unten steht. Du prüfst also das, was du am besten beurteilen kannst, nämlich dein eigenes Geschäft.

Kaufmännisch ist es eine Frage der Kosten. Nach der Nielsen Norman Group ist ein Umbau nach der Umsetzung deutlich teurer, als einen Entwurf zu verwerfen, weil Code ersetzt und neu getestet werden muss. Gerade bei einem Relaunch oder einer neuen Landingpage senkt ein abgestimmter Entwurf daher das Risiko späterer Korrekturschleifen. Vergibst du das Projekt an eine Webdesign Agentur, frag vorab, ob und wann du den Aufbau vor dem Design freigibst.

Wie du damit arbeitest

Beginne mit einem Blatt Papier je Seitentyp, etwa Startseite, Leistungsseite und Kontakt. Schreibe oben die Frage hin, die der Besucher dort hat, und ordne darunter die Abschnitte an, die sie beantworten. Lege den Entwurf anschließend jemandem vor, der deinen Betrieb nicht kennt. Fragen, die dort auftauchen, sind günstig zu beantworten. Auch die spätere User Experience profitiert davon, dass Wege früh durchdacht werden.

Häufige Fragen

Braucht jede Website ein Wireframe?

Bei einem Onepager reicht oft eine Skizze. Je mehr Seiten und Beteiligte ein Projekt hat, desto mehr spart ein abgestimmter Entwurf an späteren Korrekturen.

Welches Werkzeug brauche ich dafür?

Für den Anfang genügen Papier und Stift. Digitale Werkzeuge helfen, wenn mehrere Personen am Entwurf arbeiten oder Fassungen abgelegt werden sollen.

Wer erstellt das Wireframe?

Meist die Person, die das Projekt konzipiert oder gestaltet. Dein Beitrag ist das Wissen über Kunden und Leistungen, denn das steht in keiner Designvorlage.

Warum sieht ein Wireframe so unfertig aus?

Das ist Absicht. Ein schlichter Entwurf zeigt allen, dass die Arbeit noch nicht abgeschlossen ist, und lädt dazu ein, den Aufbau zu hinterfragen statt die Farben.

Kann ich mit einem Wireframe schon die Kosten festlegen?

Der Umfang wird damit deutlich klarer, ein Preis ergibt sich daraus aber nicht von selbst. Dafür zählen auch Texte, Funktionen und technische Anforderungen.

Steht der Aufbau, bevor das Design beginnt?

Wenn bei dir ein neues Webprojekt ansteht, schauen wir uns gemeinsam den Aufbau deiner wichtigsten Seiten an.