„Struktur vor Design“ bedeutet: zuerst festlegen, welche Seiten eine Website braucht und welche Frage jede einzelne davon beantwortet – erst danach über Design, Farben und Bildsprache entscheiden. Der Ansatz liefert bessere Ergebnisse, weil er verhindert, dass Inhalte nachträglich in eine bereits gewählte Vorlage gepresst werden müssen: ein Muster, das sich in unserer eigenen Auswertung realer Handwerksbetrieb-Websites messbar auf Ladezeit und Seitenqualität auswirkt.
Der verbreitete Fehler: Design zuerst, Inhalte danach
Ein typisches Muster, das bei der Bewertung von Website-Angeboten regelmäßig auftaucht: Ein Dienstleister zeigt zuerst drei Design-Vorschläge mit Screenshots, bevor überhaupt geklärt ist, welche Leistungen, Standorte und Suchanfragen die Website abdecken soll. Wie sich ein seriöses Angebot stattdessen aufbaut, erklärt unser separater Ratgeber dazu. Das Problem an der Design-zuerst-Reihenfolge: Sobald ein Layout mit fester Anzahl an Blöcken und Spalten steht, werden Inhalte im Nachhinein so lange gekürzt oder aufgebläht, bis sie in das vorgegebene Raster passen – unabhängig davon, ob das der eigentlichen Botschaft dient. Ein Vorher-Nachher-Kontrast macht den Unterschied deutlich: Im Design-zuerst-Fall bekommt der Dachdeckerbetrieb drei fertige Vorlagen mit je drei bis vier Textblöcken vorgelegt – Dacheindeckung, Flachdach und Fassade müssen sich denselben Blockaufbau teilen, obwohl die Kundenfragen dahinter völlig unterschiedlich sind. Im Struktur-zuerst-Fall steht zuerst fest, dass Dacheindeckung eine ausführliche Seite mit Materialvergleich braucht, Flachdachabdichtung eine kürzere Seite mit Dringlichkeits-Hinweis und Fassade nur einen Abschnitt auf der Leistungsübersicht – erst danach wird für jede Seite ein passendes Layout gewählt. Wer diese Texte selbst entwirft oder professionell schreiben lässt, entscheidet dabei am besten pro Seite neu – unser Ratgeber zu Website-Texten zeigt, wie diese Aufgabenteilung in der Praxis aussieht.
Warum Struktur zuerst messbar bessere Ergebnisse liefert
Die Fachliteratur zur Informationsarchitektur trennt diese beiden Ebenen bewusst: Laut Nielsen Norman Group wird die Informationsarchitektur einer Website – welche Inhalte es gibt und wie sie zueinander in Beziehung stehen – in Tabellen und Diagrammen dokumentiert, nicht in Wireframes oder fertigen Layouts. Die Struktur bestimmt die Oberfläche, nicht umgekehrt. Wie stark sich eine vorlagengetriebene statt strukturgetriebene Herangehensweise technisch auswirkt, zeigt unsere eigene Ladezeit-Stichprobe realer Handwerksbetrieb-Websites im separaten Ratgeber zu Baukasten und individueller Website: Websites, bei denen sichtbar zuerst eine Vorlage gewählt und Inhalte anschließend eingepasst wurden, kamen auf Ladezeiten zwischen 5,4 und 12,6 Sekunden statt der von Google empfohlenen 2,5 Sekunden. Auch bei der reinen Seitenanzahl zeigt sich das gleiche Muster: In unserer separaten Auswertung zur Seitenanzahl hatte der Betrieb mit den mit Abstand meisten Unterseiten (250, größtenteils system-generiert über Kataloge und Konfiguratoren) weniger geschätzten organischen Traffic als drei von vier deutlich kleineren, gezielt strukturierten Websites. Beide Datenpunkte zeigen dasselbe Muster aus unterschiedlichen Blickwinkeln: Wird zuerst ein System oder eine Vorlage gewählt und die Struktur ergibt sich erst daraus, entstehen mehr Seiten und mehr technischer Ballast, ohne dass Sichtbarkeit oder Nutzererlebnis davon profitieren.
Warum das auch für Sichtbarkeit in KI-Antworten zählt
Eine klare Struktur wirkt sich nicht nur auf Ladezeit und Google-Rankings aus, sondern zunehmend auch darauf, ob eine Website in KI-generierten Antworten (etwa bei ChatGPT, Perplexity oder Google AI Overviews) überhaupt als Quelle zitiert wird. Diese Systeme extrahieren einzelne, in sich abgeschlossene Antworten aus einer Seite – eine Website, bei der jede Leistung eine eigene, klar abgegrenzte Seite mit einer eindeutigen Kernaussage hat, liefert dafür deutlich zitierfähigere Textabschnitte als eine Website, bei der mehrere Leistungen in einem gemeinsamen, design-getriebenen Textblock vermischt sind. Struktur zuerst ist damit auch eine Voraussetzung für gute GEO-Ergebnisse, nicht nur für klassisches SEO.
Die fünf Schritte einer struktur-ersten Planung
Ob jede Kernleistung eine eigene Seite bekommt, erklärt der Ratgeber Warum jede Leistung eine eigene Seite braucht. Am Beispiel einer Schreinerei mit den Kernleistungen Möbelbau, Küchen und Reparaturen lässt sich der Ablauf konkret nachvollziehen:
| Schritt | Ergebnis | Beispiel Schreinerei |
|---|---|---|
| 1. Ziele & Zielgruppen klären | Klarheit, wer die Website erreichen soll und wozu | Neukunden für Küchenbau in der Region, keine Fachhandel-Anfragen |
| 2. Seiten & Hierarchie (Sitemap) | Liste aller Seiten mit Beziehung zueinander | Start, Möbelbau, Küchen, Reparaturen, Referenzen, Über uns, Kontakt |
| 3. Inhalte pro Seite skizzieren | Grobtext/Stichpunkte je Seite vor jeder Gestaltung | Küchen-Seite: Ablauf, Materialien, 3 Referenzbilder, Preisspanne |
| 4. Wireframe erstellen | Layout ohne Farben/Bilder, nur Blöcke und Reihenfolge | Reihenfolge: Nutzenversprechen, Ablauf, Referenzen, Kontakt-Button |
| 5. Visuelles Design umsetzen | Farben, Typografie, Bildsprache auf Basis der Struktur | Look erst jetzt, passend zu bereits fixierten Inhalten |
Der entscheidende Unterschied zu einer Design-zuerst-Planung: Jeder der fünf Schritte baut auf dem vorherigen auf. Wird die Reihenfolge umgedreht, muss Schritt 5 nachträglich alle vier vorherigen Entscheidungen kompensieren – meist auf Kosten der Übersichtlichkeit oder der Ladezeit. Wichtig dabei: Die ersten vier Schritte lassen sich in einer einfachen Tabelle oder sogar auf Papier erledigen, bevor überhaupt ein Design-Tool geöffnet wird – das Fehlen genau dieser vier Schritte, nicht ein schwacher Designgeschmack, ist meist die eigentliche Ursache für eine Website, die sich am Ende falsch anfühlt. Zur frühen Planung gehört auch die Entscheidung für oder gegen einzelne externe Bausteine wie Google Fonts oder eingebettete Karten – wie diese Entscheidung direkt darüber mitentscheidet, ob später ein Cookie-Banner nötig wird, erklärt unser separater Ratgeber dazu.
Struktur-first vs. Design-first im Vergleich
Interaktiv: Ihr Planungs-Fortschritt
Haken Sie ab, was für Ihr eigenes Website-Projekt bereits geklärt ist:
Fazit: Struktur ist die Grundlage, Design die Umsetzung
„Struktur vor Design“ ist kein ästhetisches Prinzip, sondern eine Reihenfolge, die messbar bessere technische und inhaltliche Ergebnisse liefert: weniger unnötige Unterseiten, kürzere Ladezeiten und Inhalte, die tatsächlich zur Zielgruppe passen. Worauf ein seriöses Angebot für eine neue Website entsprechend achten sollte, zeigt unser Ratgeber zum Website-Angebot. Wie viele Unterseiten die eigene Sitemap realistisch braucht, erklärt unser Ratgeber zur Seitenanzahl. Woran sich eine Agentur erkennen lässt, die diese Reihenfolge auch tatsächlich einhält, zeigt unser Ratgeber zur Agenturauswahl.