Struktur und Wireframes
Warum: Inhalt kommt vor Design. Entscheide, was wohin gehört, bevor du entscheidest, wie es aussieht. Wireframes in schlichtem Grau laden zur Kritik der Struktur ein; sobald etwas fertig aussieht, kommentieren die Leute nur noch Farben. KI-Website-Builder, die gute Ergebnisse liefern (Relume, Google Stitch), gehen ebenfalls Sitemap → Wireframe → Style, aus demselben Grund.
Benötigt: 01-facts/facts.md, 01-facts/inventory.md (bei Neugestaltungen), 02-personas/personas.md, 03-brand/brand.md.
Erzeugt: 04-structure/sitemap.md (Seitenbaum, Navigation, URL-Regeln, Weiterleitungen, Nachrichtenreihenfolge), 04-structure/wireframes/r<runde>/*.html.
Dieser Schritt besteht aus zwei Teilen mit jeweils einer Überprüfung, da Struktur und Wireframes für eine Runde zu viel sind: Teil 1 legt den Seitenbaum fest, Teil 2 zeigt die Wireframes.
1. Seitenbaum
Beginne mit den Fragen der Personas, nicht mit der alten Website oder dem Organigramm. Jede Seite beantwortet eine Hauptfrage für eine Hauptpersona.
Füge in sitemap.md für jede Seite ein: URL, Titel, Hauptfrage, primäre Persona, primäre Aktion, Status (Launch / Später). Dann:
- Navigation: Elemente der obersten Ebene (zielen auf 5–7 ab), was in die Fußzeile kommt, ob ein Mega-Menü benötigt wird.
- URL-Regeln: Sprachpräfix, abschließender Schrägstrich oder nicht, Kleinbuchstaben, Wörter statt IDs.
- Weiterleitungen: Alte URL → neue URL für jede im Inventar markierte Seite.
- Startumfang (Launch Scope): Die kleinste Menge an Seiten, die die Fragen der primären Persona beantwortet. Leere Abschnitte („Blog – demnächst verfügbar“) bleiben draußen.
Halte es so klein, wie es das Angebot erlaubt. Jede Seite muss geschrieben, gestaltet und gepflegt werden.
Überprüfung, Teil 1 (review/04-structure-r1.html): Seitenbaum, Navigation, URL-Regeln, Weiterleitungen, Startumfang. Anhalten: Warte auf die Entscheidungen, bevor du Wireframes erstellst.
2. Nachrichtenreihenfolge pro Schlüsselseite
Schreibe sie in sitemap.md, einen Block pro Seite. Für die Startseite und jeden Seitentyp (Produkt, Preise, Über uns, Kontakt, Artikel, …): Liste die Abschnitte von oben nach unten auf. Für jeden Abschnitt: die Frage des Besuchers zu diesem Zeitpunkt, die Antwort in einer Zeile, der Beweis aus facts.md und was zum nächsten Abschnitt führt. Der erste Bildschirm gibt das Versprechen und die primäre Aktion an.
3. Wireframes
Erstelle ein HTML-Wireframe pro Schlüsselseitentyp, mobile first, auch bei Desktop-Breite überprüft. Zeige in der ersten Wireframe-Runde höchstens vier: die Startseite und die drei wichtigsten Seitentypen. Weitere Typen folgen in der nächsten Runde. Speichere jede Runde in einem eigenen Ordner (wireframes/r2/, …) und teile ein Stylesheet.
- Nur Grautöne, eine System-Schriftart, Kästen mit einem Kreuz für Bilder, keine Markenfarben, keine Symbolbibliotheken, keine Schatten.
- Echte Entwurfstexte aus
brand.mdundfacts.md, niemals Lorem Ipsum. Überschriften können noch grob sein; markiere sie mitdraft. - Echte Längen: Wenn eine Liste 12 Elemente haben wird, zeige 12.
- Beschrifte jeden Abschnitt mit der Frage, die er beantwortet, in kleiner grauer Schrift darüber.
- Rendere und betrachte jedes Wireframe bei 390 px und 1440 px, bevor du es zeigst.
Überprüfung, Teil 2
Zeige die Nachrichtenreihenfolge und die Wireframes als Screenshots nebeneinander (mobil und Desktop), jeweils verlinkt zur HTML-Datei. Typische Entscheidungen: Abschnittsreihenfolge pro Seite, fehlende oder redundante Seitentypen, was der erste Bildschirm enthalten muss.
Abgeschlossen, wenn Seitenbaum, Navigation, URL-Regeln, Weiterleitungen und die Abschnittsreihenfolge der Schlüsselseiten entschieden sind. Texte werden in Schritt 8 verfeinert; Layout-Details können sich in Schritt 9 ändern.