Ein Wireframe ist ein schematischer Entwurf, der Aufbau und Struktur einer Webseite oder App zeigt. Die Elemente erscheinen als einfache Boxen und Linien, ohne Farben, Bilder oder endgültige Schrift.
Wireframes dienen dazu, Inhalte, Navigation und Funktionen früh abzustimmen, bevor Gestaltung und Programmierung beginnen. In dieser Phase sind Entwürfe schnell erstellt und leicht zu ändern.
Ein Wireframe beantwortet, wo etwas steht und was es tut, nicht, wie es später aussieht.
Ohne Wireframe wird über Farben und Bilder diskutiert, bevor klar ist, welche Inhalte wohin gehören. Der Entwurf lenkt den Blick auf das Wesentliche. Das bringt mehrere Vorteile:
Am Anfang stehen Inhalte und Ziele der Seite: Was soll der Besucher finden, und was soll er tun? Daraus entsteht ein Raster aus Blöcken wie Kopfbereich, Navigation, Textflächen und Buttons, zunächst oft als Skizze auf Papier oder im Grafikprogramm.
Wireframes gibt es in verschiedenen Detailgraden. Low-Fidelity-Entwürfe bestehen nur aus Boxen und Linien und eignen sich für die frühe Ideensuche. Bei mittlerem Detailgrad kommen Navigationsbezeichnungen und eine klare Hierarchie hinzu. High-Fidelity-Wireframes enthalten genaue Maße und Anmerkungen und dienen als Vorlage für die Entwicklung.
Für die Startseite eines Handwerksbetriebs zeigt der Wireframe oben Logo und Navigation. Darunter folgt ein großer Bereich mit Überschrift, kurzem Text und einem Button zur Anfrage. Weiter unten stehen drei Kacheln für Leistungen, Referenzen und Kontakt, am Ende der Fußbereich.
Ein Bildplatzhalter ist ein Rechteck mit Kreuz, ein Text ein paar graue Zeilen. So lässt sich bereits prüfen, ob der Button im sichtbaren Bereich liegt und die Reihenfolge der Inhalte stimmt, ohne dass ein einziges Foto vorliegt.
In Webprojekten steht der Wireframe nach Briefing und Anforderungen und vor dem Design. Er hilft, die Usability früh zu prüfen: Findet man die wichtigste Handlung? Ist die Navigation verständlich? Für Webseiten, die auf allen Geräten funktionieren sollen, entstehen oft getrennte Entwürfe für Smartphone und Desktop, wie bei responsive Layouts üblich.
Es gibt statische Wireframes für einzelne Seitenvorlagen und dynamische, bei denen mehrere Seiten verknüpft sind. Letztere nähern sich bereits dem Prototyp an. Ein Wireframe eignet sich auch als Anlage zu einem Pflichtenheft.
Die drei Begriffe werden oft vermischt, beschreiben aber unterschiedliche Entwurfsstufen:
Ein interaktives Beispiel-Wireframe, umgesetzt mit Contao, finden Sie hier: Beispiel-Wireframe (interaktiv)
Ein schematischer Entwurf, der Aufbau und Struktur einer Seite ohne Gestaltung zeigt.
Das Wireframe zeigt Struktur ohne Gestaltung, das Mockup das visuelle Design mit Farben, Schrift und Bildern.
Ein sehr einfacher Entwurf mit Boxen und Linien. Er eignet sich für die frühe Ideensuche.
Bei jedem Projekt, bei dem Aufbau und Navigation geklärt werden müssen, bevor das Design entsteht. Bei einfachen Seiten genügt oft eine Skizze.
Ein Wireframe klärt Struktur und Funktion, bevor Gestaltung und Technik Geld kosten. Wer ihn früh einsetzt, spart Korrekturschleifen und schafft eine Diskussionsgrundlage für alle Beteiligten.
Expertengeprüft von Robert Hartl zuletzt am 13.10.2026.
Dieser Beitrag (Was ist ein Wireframe? ᐅ Definition, Bedeutung) wurde redaktionell erstellt und vor Veröffentlichung fachlich geprüft. Inhalte wurden bei Bedarf korrigiert, ergänzt und aktualisiert. Bei der Erstellung einzelner Formulierungen kann KI-Unterstützung zum Einsatz gekommen sein. Die inhaltliche Verantwortung liegt bei den genannten Personen.
Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an YouTube übermittelt werden und Sie die Datenschutzerklärung akzeptieren.
