Wireframe
Bevor die erste Farbe gewählt, ein Text geschrieben oder eine Zeile Code getippt wird, entsteht bei einem professionellen Webdesign-Prozess immer ein Wireframe. Er sieht auf den ersten Blick unfertig aus, graue Kästen, Linien, Platzhalter. Genau das ist der Punkt.
Ein Wireframe ist der strukturelle Entwurf einer Website oder App. Er zeigt, wo welche Inhalte platziert werden, wie Nutzer durch die Seite navigieren und welche Elemente auf welcher Ebene wichtig sind. Design, Farben und Texte spielen noch keine Rolle. Der Fokus liegt ausschließlich auf Struktur und Funktion.
Der Begriff kommt aus dem Englischen und bedeutet wörtlich übersetzt Drahtgerüst. Das trifft es gut: So wie ein Gerüst das Skelett eines Gebäudes zeigt, bevor Fassade und Innenausbau entstehen, zeigt ein Wireframe das Skelett einer Website.
Was ein Wireframe enthält und was nicht
Ein Wireframe enthält die grundlegenden Bausteine einer Seite. Dazu gehören die Navigation, die Anordnung von Überschriften und Textblöcken, die Position von Buttons und Formularen sowie Platzhalter für Bilder. Inhalte wie echte Texte oder fertige Grafiken fehlen bewusst.
Was du in einem Wireframe nicht siehst: Farben, Schriften, Fotos, konkrete Formulierungen oder das fertige visuelle Design. All das kommt später.
Dieser Verzicht ist kein Mangel, sondern Methode. Wenn ein Wireframe zu früh zu „fertig“ aussieht, diskutieren Auftraggeber und Designer plötzlich über Farben und Bildauswahl, statt über die eigentlich wichtigen Fragen: Findet der Nutzer, was er sucht? Ist der gut platziert? Ist der Aufbau der logisch?
Low-Fidelity und High-Fidelity: Zwei Detailgrade
Wireframes gibt es in zwei Ausprägungen, die je nach Projektphase eingesetzt werden.
Low-Fidelity-Wireframes sind grobe Skizzen. Manchmal auf Papier, manchmal digital. Sie zeigen die grundsätzliche Seitenstruktur ohne jeden Anspruch auf Vollständigkeit. Hier geht es um schnelle Ideen, erste Konzepte und das grobe Layout. Ein Low-Fidelity-Wireframe kann in wenigen Minuten entstehen und ist ideal für die frühe Konzeptphase.
High-Fidelity-Wireframes sind detaillierter. Sie zeigen genaue Positionen, realistische Proportionen, echte Navigationspunkte und manchmal bereits Platzhaltertexte. Sie kommen dem fertigen Design näher, ohne es bereits zu sein. High-Fidelity-Wireframes sind oft die Grundlage für das eigentliche Design und werden mit dem Auftraggeber abgestimmt.
Wireframe, Mockup, Prototyp: Die drei Phasen
Diese drei Begriffe werden häufig durcheinandergebracht, beschreiben aber klar unterschiedliche Stufen im Designprozess.
Der Wireframe kommt zuerst. Er zeigt Struktur und Aufbau, keine Gestaltung. Schwarz, weiß, grau.
Das Mockup ist der nächste Schritt. Es basiert auf dem Wireframe, fügt aber Farben, Typografie und das visuelle Design hinzu. Ein Mockup sieht aus wie ein Screenshot der fertigen Website, ist aber noch nicht klickbar. Du kannst dir darunter eine hochwertige statische Darstellung vorstellen.
Der Prototyp geht noch einen Schritt weiter. Er ist interaktiv. Man kann klicken, scrollen und durch die Seite navigieren, auch wenn noch keine echte Funktionalität dahintersteckt. Prototypen werden genutzt, um Nutzerführung und Abläufe zu testen, bevor die Entwicklung beginnt.
Für die meisten Webdesign-Projekte im Mittelstand ist der Prototyp kein Standard. Wireframe und Mockup sind die entscheidenden Phasen, in denen Auftraggeber mitreden und Änderungen noch ohne großen Aufwand möglich sind.
Warum Wireframes Geld und Zeit sparen
Der größte Vorteil eines Wireframes ist, dass er Fehler früh sichtbar macht, also dann, wenn sie noch günstig zu korrigieren sind.
Eine falsch platzierte Navigation, ein unklarer Seitenaufbau oder eine fehlende Kontaktmöglichkeit auf einer wichtigen Seite: Im Wireframe kostet die Korrektur Minuten. In der fertigen, programmierten Website kostet dieselbe Änderung Stunden oder Tage.
Wireframes schaffen außerdem eine gemeinsame Gesprächsgrundlage. Auftraggeber und Designer können konkret über den Aufbau einer Seite sprechen, ohne dass beide dieselbe visuelle Vorstellung im Kopf haben müssen. „Der Button sollte weiter oben sein“ ist an einem Wireframe eine einfache Verschiebung. An einer fertig gestalteten Seite zieht dieselbe Änderung oft eine Kette weiterer Anpassungen nach sich.
Was du als Auftraggeber in einem Wireframe prüfen solltest
Wenn du im Rahmen eines Webdesign-Projekts einen Wireframe zur Freigabe bekommst, lohnt sich ein genauer Blick auf folgende Punkte.
Ist die wichtigste Information sichtbar, also sofort beim Öffnen der Seite, ohne scrollen zu müssen? Gibt es auf jeder relevanten Seite einen klaren nächsten Schritt für den Nutzer? Sind Kontaktmöglichkeiten gut erreichbar? Ist die Navigation intuitiv?
Was du an einem Wireframe bewusst nicht beurteilen solltest: Farben, Bilder, Texte. All das folgt in späteren Phasen. Wer im Wireframe auf optische Details eingeht, verpasst den eigentlichen Zweck dieser Phase.
Tools und Methoden
Professionelle Designer arbeiten heute meist mit digitalen Tools. Figma ist das am weitesten verbreitete Programm für Wireframes, Mockups und Prototypen in einem. Miro eignet sich gut für kollaboratives Wireframing im Team. Adobe XD und Sketch sind weitere verbreitete Optionen.
Für erste Konzeptideen oder interne Abstimmungen sind auch handgezeichnete Wireframes auf Papier vollkommen legitim. Der Detailgrad des Tools sollte zum Projektstadium passen: Je früher die Phase, desto einfacher das Werkzeug.
Wann auf einen Wireframe verzichtet werden kann
Nicht jedes Webdesign-Projekt braucht einen formalen Wireframe-Prozess. Bei sehr kleinen Projekten mit klarer Struktur, zum Beispiel einer einseitigen oder einer einfachen Visitenkarten-Website, kann ein erfahrenes Team direkt ins Design einsteigen, wenn die Anforderungen klar sind.
Bei komplexeren Projekten, mit mehreren Unterseiten, Formularen, Filterfunktionen oder individuellen Abläufen, ist ein Wireframe kein optionaler Schritt, sondern der Grundstein für ein funktionierendes Ergebnis.
Wireframes im PP-K-Prozess
Wer ein Webdesign-Projekt mit uns umsetzt, erhält vor Beginn der visuellen Gestaltung immer ein durchdachtes Konzept als Grundlage. Du siehst vorab genau, wie deine neue Seite aufgebaut sein wird und welche Inhalte wo platziert sind. Erst wenn du zufrieden bist und alles passt, beginnt die eigentliche Designarbeit.
Das verhindert teure Überraschungen und sorgt dafür, dass das Endergebnis nicht nur gut aussieht, sondern auch wirklich funktioniert. Mehr dazu findest du auf unserer Seite der .
