Eine Webseite entsteht selten direkt in voller Farbe. Bevor jemand Schriften aussucht und Fotos einbaut, klärt ein einfacher Entwurf erst einmal die Struktur: Was steht wo, in welcher Reihenfolge, mit welchem Gewicht. Dieser Entwurf heißt Wireframe, sein farbiges Gegenstück Mockup.
Beide Begriffe tauchen in fast jedem Webdesign-Angebot auf. Du musst dafür nicht zeichnen oder gestalten können. Du musst nur lesen, was Dir vorgelegt wird, und an den richtigen Stellen Ja oder Stopp sagen. Genau dabei hilft Dir dieser Beitrag.
Was ein Wireframe ist
Ein Wireframe ist die nüchterne Skizze Deiner Seite. Es besteht aus grauen Kästen, Linien und Platzhaltern. Keine Farbe, keine echten Bilder, oft nur „Lorem ipsum" als Blindtext. Auf den ersten Blick wirkt das unfertig, und genau das ist der Sinn.
Der Wireframe beantwortet eine einzige Frage: Wo liegt was? Steht das Kontaktformular oben oder ganz unten, sitzt das Logo links oder mittig, kommt der große Begrüßungsbereich vor oder nach den Leistungen. Diese Anordnung legt fest, wie ein Besucher durch Deine Seite geführt wird.
Weil Farbe und Bild fehlen, lenkt nichts ab. Du diskutierst über die Reihenfolge der Inhalte, nicht über den Blauton. Ein grauer Kasten lässt sich in zwei Minuten verschieben. Genau das macht den Wireframe so wertvoll: Er ist schnell geändert, solange noch nichts ausgestaltet wurde.
Was ein Mockup zeigt
Das Mockup setzt auf dem Wireframe auf und macht aus den grauen Kästen ein fertiges Bild Deiner Seite. Jetzt kommen die Markenfarben dazu, die ausgewählte Schrift, echte Fotos und die finalen Texte. Du siehst, wie die Startseite später wirklich aussehen wird, bevor sie technisch gebaut ist.
Ein Mockup ist noch nicht klickbar. Es ist ein detailgenaues Standbild, vergleichbar mit dem Foto eines Möbelstücks im Katalog, bevor es bei Dir im Wohnzimmer steht. Du beurteilst Wirkung und Stimmung, nicht die Funktion.
An diesem Punkt fällt die Entscheidung über den Look. Passt der Stil zur Marke, wirkt die Seite hochwertig oder beliebig, fühlt sich das Ganze nach Dir an. Welcher Gestaltungsstil dabei zu Deinem Projekt passt, hängt von Zielgruppe und Branche ab, dazu lohnt ein Blick darauf, welcher Gestaltungsstil zu Deinem Projekt passt.
Warum diese Vorstufe Geld spart
Eine Änderung kostet umso mehr, je später sie kommt. Im Wireframe verschiebst Du einen Block mit einem Mausklick. Im fertig programmierten Zustand bedeutet dieselbe Änderung neue Gestaltung, neue Anpassung im Code und einen weiteren Test-Durchlauf.
Die Vorstufe macht Missverständnisse früh sichtbar. Vielleicht hattest Du den Online-Shop zentral erwartet, der Entwurf rückt ihn aber in eine Ecke. Solange das ein grauer Kasten ist, kostet die Korrektur fast nichts. Am fast fertigen Produkt wird daraus ein teurer Umbau.
Wireframe und Mockup sind eine Phase im größeren Ablauf, wie eine Webseite Schritt für Schritt entsteht. Wer diese Phase ernst nimmt, zahlt am Ende weniger, weil später kaum noch etwas umgeworfen wird.
Worauf Du beim Freigeben achtest
Du musst keinen Entwurf gestalten, aber Du gibst ihn frei. Diese Freigabe ist wichtiger, als sie aussieht, denn was Du hier durchwinkst, wird gebaut. Ein paar Prüfpunkte helfen Dir, gezielt hinzuschauen.
- Reihenfolge: Stehen die wichtigsten Inhalte oben, wo sie ohne Scrollen sichtbar sind?
- Klares Ziel: Ist erkennbar, was ein Besucher tun soll, etwa anrufen, kaufen oder ein Formular ausfüllen?
- Vollständigkeit: Fehlt ein Bereich, den Du brauchst, etwa Öffnungszeiten, Anfahrt oder Referenzen?
- Verständlichkeit: Wirst Du in zehn Sekunden klug daraus, oder musst Du suchen?
Diese Kästen sind die gleichen Bausteine, die jede Seite gliedern, also Bausteine wie Header, Hero und Footer. Wenn Du sie im Entwurf wiedererkennst, fällt Dir die Freigabe leichter. Notiere Deine Anmerkungen am besten direkt am Entwurf, bevor die Gestaltung beginnt.
Fazit
Wireframe und Mockup sind der Bauplan Deiner Webseite. Der Wireframe klärt die Struktur in grauen Kästen, das Mockup zeigt das fertige Aussehen, und beide gibst Du frei, bevor teuer gebaut wird.
Nimm Dir für diese Vorstufe Zeit und stelle Deine Fragen, solange noch alles leicht zu ändern ist. Dann steht am Ende eine Seite, die zu Dir passt, statt einer, die nachträglich zurechtgebogen werden muss.