Website neu bauen
Sitemap vor Design: Warum Wireframes vor Photoshop kommen müssen
Was drin steht
- Wer Design vor Sitemap macht, baut ein schönes Haus auf Sand. Sitemap ist das Fundament — Design ist die Fassade.
- Eine Sitemap im KMU-Web hat zwei Funktionen: Sie macht Phasen-Logik sichtbar (Customer Journey) und sie zwingt zur Priorisierung (was kommt aufs Top-Niveau, was wandert tiefer).
- Wireframe-Phase vor Design-Phase spart in der Regel zwei Korrektur-Runden — und damit Wochen Projekt-Laufzeit. Der Kunde sieht früh, wie es funktioniert, bevor er über Farben und Bilder spricht.
- Ein Wireframe ist kein hässliches Design. Ein Wireframe ist ein bewusst reduziertes Strukturwerkzeug. Es zeigt Anordnung und Funktion, nicht Optik.
- Wer den Sitemap+Wireframe-Schritt überspringt, landet fast immer im „wir hätten doch besser …“ — und das passiert dann in einer Phase, in der jede Änderung teuer wird.
Der häufigste Fehler im Website-Projekt: Es wird zu früh über Optik gesprochen. Der Kunde will eine Vorschau, der Designer will Anfangs-Material zeigen, alle wollen Fortschritt sehen. Photoshop oder Figma startet — und vier Wochen später hat man drei wunderschöne Entwürfe, aber niemand weiß, ob die Struktur überhaupt verkaufstauglich ist. Das ist der Moment, in dem Projekte kippen.
Was eine Sitemap ist
Eine Sitemap ist eine Liste aller Seiten deiner Website mit ihrer hierarchischen Ordnung. Hauptnavigation oben, Untergruppen drunter, Fußzeile separat. Eine gute Sitemap zeigt auf einen Blick:
- Was sind die Top-Level-Bereiche (in der Hauptnavigation)?
- Welche Seiten gehören in welchen Bereich?
- Wo gibt es Quer-Verbindungen (z.B. von einem Trigger-Artikel zur Audit-Seite)?
- Welche Seiten leben unsichtbar (Impressum, Datenschutz, AGB)?
Eine schlechte Sitemap ist eine Wunsch-Liste ohne Hierarchie. Eine gute Sitemap ist eine Entscheidung, was zentral ist und was peripher.
Sitemap als Customer-Journey-Probe
Die einfachste Test für eine Sitemap: Folge ihrer Logik mit deiner Haupt-Persona im Kopf. Wo landet Martin (54, Inhaber-Steuerberater mit BFSG-Brief), wenn er von Google auf deine Site kommt? Über welche drei Seiten geht er, bevor er auf „Termin buchen“ klickt? Findet er das Audit-Werkzeug ohne zu suchen?
Wenn die Sitemap diesen Pfad nicht hergibt — wenn Martin dreimal zurückklicken muss, um zur richtigen Seite zu kommen — ist die Sitemap nicht fertig. Optik kann das nicht reparieren. Struktur ist die Reparatur.
Was ein Wireframe ist
Ein Wireframe ist die Skizze einer Seite: Wo sitzt das Logo, wo der Hero, wo der Call-to-Action, wo die FAQ-Sektion. Ohne Farben, ohne Fotos, ohne fertige Typografie. Nur graue Kästen mit Platzhalter-Text — manchmal mit Bleistift auf Papier, manchmal in einem Wireframe-Werkzeug.
Der Sinn: Du diskutierst mit dem Kunden über Anordnung und Funktion, nicht über Optik. Sobald Farben und Fotos drin sind, geht das Gespräch in eine andere Richtung („das Blau gefällt mir nicht“, „das Foto wirkt etwas alt“). Das ist legitim — aber es gehört in eine spätere Phase. Vorher musst du Anordnung und Funktion geklärt haben.
Wireframe-Disziplin: Bewusst reduziert
Es gibt zwei Versuchungen beim Wireframe:
- Zu viel: Schon Logo-Variante, Schriften, Lieblings-Foto reinhängen. Damit verlierst du den Sinn — der Kunde sieht Optik, nicht Funktion.
- Zu wenig: Nur drei Kästen ohne Inhalt. Damit kann niemand etwas anfangen — der Kunde versteht nicht, was dort später kommt.
Der Mittelweg: Graue Kästen mit echten Platzhalter-Texten (nicht „Lorem ipsum“, sondern echte Hero-Zeilen, echte FAQ-Fragen, echte Call-to-Actions). So sieht der Kunde, was die Seite kann — ohne von Optik abgelenkt zu sein.
Die zwei Korrektur-Runden, die du sparst
Wer Sitemap und Wireframe überspringt, durchläuft typischerweise diese Sequenz:
- Designer liefert drei Entwürfe der Startseite
- Kunde wählt Entwurf B
- Bei der Umsetzung merkt man: Die Hauptnavigation hat zu wenige Punkte, die FAQ-Sektion fehlt, die Audit-Verlinkung sitzt falsch
- Korrektur-Runde 1: Startseite wird umstrukturiert, neuer Entwurf
- Bei den Unterseiten merkt man: Die Struktur passt nicht zur Startseiten-Logik
- Korrektur-Runde 2: Sitemap wird nachträglich umgebaut
- Projekt zieht sich um drei bis vier Wochen
Wer Sitemap und Wireframe vorher macht, klärt diese beiden Korrektur-Runden vor der Design-Phase — in einem Bruchteil der Zeit. Wireframe-Iterationen kosten halbe Tage, Design-Iterationen kosten Wochen.
Der Konsens-Punkt
Sitemap und Wireframe sind nicht nur Designer-Werkzeuge — sie sind Konsens-Werkzeuge. Wenn der Kunde die Sitemap unterschreibt und das Wireframe akzeptiert, hat er sich auf Struktur und Funktion festgelegt. Ab da diskutiert er nur noch Optik. Das macht die Design-Phase deutlich friedlicher und schneller.
Ohne Konsens-Punkt vor der Design-Phase kommen Strukturfragen in jeder Design-Runde wieder hoch („sollten wir nicht doch eher …“). Das ist anstrengend und teuer.
Wann darf die Reihenfolge anders sein
Eine Ausnahme: Wenn die Marke noch nicht steht — wenn Logo, Farben, Schriften gerade erst entwickelt werden — kann ein erstes Moodboard mit Look-and-Feel sinnvoll sein, bevor die Sitemap final ist. Aber das Moodboard ist Brand-Arbeit, nicht Site-Design. Es geht um Stimmung und Farbwelt, nicht um konkrete Seiten-Entwürfe.
Sobald Brand steht: Sitemap und Wireframe zuerst, Design danach. Die Reihenfolge ist nicht Dogma — sie ist erprobte Effizienz.
Was Hannes daraus macht
Jedes unserer Website-Projekte beginnt mit zwei Sitzungen: einer Sitemap-Sitzung (Struktur, Hauptnavigation, Querverbindungen) und einer Wireframe-Sitzung (Anordnung pro Seitentyp). Diese zwei Sitzungen kosten zusammen etwa einen halben Projekttag und werden vom Kunden formal abgenommen. Erst dann beginnt die Design-Phase. Diese Reihenfolge spart in jeder Projekt-Bilanz zwei Korrektur-Runden — und damit Wochen Laufzeit. Wer eine Site bei uns bauen lässt, durchläuft diese Sequenz, ob er sie will oder nicht.
Wenn du an einer eigenen Website-Planung sitzt und unsicher bist, ob deine Sitemap schon trägt, ist der einfachste Test: Setz dich mit deiner Haupt-Persona in den Kopf, klick die Sitemap von oben nach unten durch — und merk, wo sie stolpert. Wenn du dreimal in einer Sitemap-Reise stolperst, ist die Sitemap noch nicht fertig.
Häufige Fragen
Können wir die Sitemap einfach vom alten Site übernehmen?
Wie viele Punkte sollte die Hauptnavigation maximal haben?
Müssen Wireframes aufwendig erstellt werden?
Was, wenn der Kunde unbedingt schon Design sehen will?
Wie lange dauert die Sitemap+Wireframe-Phase?
Was ist mit Mobile vs. Desktop — brauchen wir zwei Wireframes pro Seite?
Das regeln wir — so sieht das bei uns aus.
Unsicher, wo deine Seite steht? Frag Hannes — er schaut sie sich an und sagt dir ehrlich, was zu holen ist.