Was macht Richtungen als Stilfliesen?
Warum: Ein Moodboard ist zu vage, um darauf aufzubauen, und eine vollständige Seitenmock-up ist zu wörtlich: Die Leute beginnen, über die Struktur zu diskutieren, die bereits in Schritt 4 festgelegt wurde. Stilfliesen (Samantha Warren) und Elementcollagen (Dan Mall) liegen dazwischen: Sie zeigen Farben, Schriftarten und Schnittstellenelemente ohne Seitenlayout, sodass die Diskussion beim Look-and-Feel bleibt. Mit KI kosten Varianten fast nichts, daher ist die Auswahl der Engpass. Dieser Schritt spreizt die Richtungen bewusst und gibt der Entscheidung einen Maßstab.
Benötigt: brand.md, taste-profile.md, anti-defaults.md, sitemap.md und ein Wireframe (für die Kopie), personas.md.
Erzeugt: 06-directions/tiles/r<round>/*.html, 06-directions/direction.md.
1. Achsen wählen
Nennen Sie zwei oder drei Achsen, entlang derer sich die Richtungen unterscheiden – abgeleitet aus offenen Punkten des Geschmacksprofils. Beispiele: ruhig ↔ auffällig, dicht ↔ luftig, warm ↔ kühl, redaktionell ↔ technisch, flach ↔ strukturiert. Platzieren Sie jede Richtung an einem anderen Punkt. Drei Richtungen, die sich nur in der Akzentfarbe unterscheiden, sind eine Richtung.
Wenn Stufe A des Moodboards separate Boards hervorgebracht hat, beginnen Sie von diesen.
2. Drei Fliesen bauen
Eine in sich geschlossene HTML-Datei pro Richtung. Jede Fliese zeigt:
- einen Namen und einen Satz zur Idee dahinter (aus der Marke, nicht aus einem Trend)
- Farbpalette mit Farbfeldern und Rollen (Hintergrund, Text, Akzent, Aktion) sowie Kontrastverhältnis von Text und Buttons (WCAG AA: 4,5:1 für Text)
- Schriftarten: Auszeichnungs- und Brotschrift mit einigen Größen, echte Überschrift und Absatz aus den Kopieentwürfen
- Schnittstellenelemente: primärer und sekundärer Button, Link, Eingabefeld, Navigationsleiste, eine Karte
- ein Heldenfragment (kein vollständiger Heldenbereich) und ein weiteres charakteristisches Element: ein Zitat, eine Zahl, eine Liste, eine Preiszeile
- Bildmaterial: Stilbeispiele oder eine Beschreibung der Foto-, Illustrations- oder Bildschirmbehandlung
- ein Detail, das nur diese Marke hätte (eine Form aus dem Logo, ein Begriff aus dem Fachgebiet, eine Maßeinheit)
Regeln:
- Lesen Sie zuerst
anti-defaults.md. Schriftarten nur aus Quellen mit nutzbarer Lizenz (Google Fonts, OFL, die lizenzierten Schriftarten des Kunden); Lizenz und Dateigröße notieren. - Echte Kopie aus dem Projekt, niemals Lorem Ipsum. Beispiel-Schnittstellentext verwendet nur Fakten aus
facts.md: keine erfundenen Funktionen, Angebote, Verfügbarkeiten oder Zahlen. - Kein vollständiges Seitenlayout, kein vollständiger Navigationsbaum, kein Footer.
- Jede Fliese bei 390 px und 1440 px rendern und vor dem Zeigen betrachten.
3. Bewerten
Auf der Überprüfungsseite die drei Fliesen nebeneinander (oder auf Mobilgeräten nacheinander) zeigen. Für jede Fliese:
- Worttest: eine Frage pro Fliese. Die Person (und wenn möglich Kollegen) wählen drei Wörter (Checkboxen,
data-max="3") aus einer Liste, die die Markenattribute und ihre Gegenpole mischt. Zählen, welche Seite gewinnt. - Element für Element: eine Frage pro Element (Farbe, Schrift, Buttons, Bildmaterial, Detail): aus welcher Fliese soll es stammen, A, B, C oder keine, mit einem Begründungsfeld. Das hält den Bogen bei etwa acht Fragen.
- Optionaler Fünf-Sekunden-Test: einer Person außerhalb des Projekts eine Fliese fünf Sekunden lang zeigen und fragen: „Was für ein Unternehmen ist das? Welche drei Wörter fallen Ihnen ein?“
4. Zusammenführen
Aus den Bewertungen direction.md schreiben: die gewählten Elemente pro Kategorie, was von welcher Fliese stammt und warum, und was für Schritt 7 offen bleibt. Bei einer umfangreichen Zusammenführung eine kombinierte Fliese bauen und in Runde 2 erneut zeigen. Nicht mehr als drei Runden durchführen; wenn es nicht konvergiert, liegt das Problem meist bei den Markenattributen – dann zurück zu Schritt 3.
Erledigt, wenn direction.md bestätigt ist und der Worttest für die kombinierte Richtung auf die Markenattribute zeigt.