# Design Directions

> Taxonomie der gängigen Webdesign-Richtungen (Editorial, Corporate, Premium/Luxury, Bold Branding, Minimalismus, Tech, Storytelling, Conversion, Content-First, Brand-First) mit Merkmalen und passenden Branchen/Zielen — um bewusst EINE Richtung zu wählen statt beim Default-Template zu landen. Nutzen bei Designrichtungs-Entscheidungen (Phase 5 in web-design-workflow). NICHT für die konkrete ästhetische Ausführung — dafür frontend-design.

- Skill: `casoon/design-directions` (Agent Skill)
- Install (CLI): `npx skillmds@latest add casoon/design-directions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/casoon/design-directions/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: casoon (https://skillmd.com/u/casoon)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/casoon/design-directions

---


# Design-Richtungen

Bewusst **eine** Richtung wählen — passend zu Marke, Zielgruppe und Ziel (aus den Strategie-Phasen). Nicht aus Reflex beim Default landen.

| Richtung | Merkmale | Passend für |
|---|---|---|
| **Editorial** | große Typografie, viel Weißraum, Magazin, Textfokus | Blogs, Agenturen, Architektur |
| **Corporate** | klar, seriös, Raster, viel Struktur | Industrie, Steuerberater, Software, Kanzleien |
| **Premium / Luxury** | wenige Farben, viel Weißraum, große Bilder, wenig Text, Marke im Vordergrund | Luxus, hochpreisige Produkte |
| **Bold Branding** | riesige Überschriften, starke Farben, mutige Typo, Animationen | Startups, junge Marken |
| **Minimalismus** | wenige Elemente, große Abstände, klare Navigation (Apple-Stil) | produktzentrierte Marken |
| **Tech** | Dark Mode, Glows, Gradienten, Grid, Animationen | SaaS, AI, Cloud |
| **Editorial + Storytelling** | große Bildflächen, Scroll-Effekte, Kapitel, Timeline | Case Studies, Marken-Narrativ |
| **Conversion** | Landingpage, klare CTAs, Vertrauen, Social Proof, A/B-Test | Leadgen, Produktverkauf |
| **Content-First** | SEO, lange Texte, viele Zwischenüberschriften, Infoboxen, FAQ, Tabellen | Magazine, Ratgeber |
| **Brand-First** | Logo, Schrift, Farben, Emotion, wenig Inhalt, viel Wiedererkennung | Image, Markenauftritt |

## Auswählen
Die Richtung folgt aus der Strategie, nicht aus Geschmack:
- **Ziel** entscheidet stark: Leadgen/Verkauf → Conversion; SEO/Ratgeber → Content-First; Image → Premium/Brand-First; Vertrauen/B2B → Corporate.
- **Marke**: Premium vs. günstig, innovativ vs. konservativ, emotional vs. sachlich → Premium/Bold vs. Corporate/Minimal.
- **Contentmenge**: viel Text → Editorial/Content-First; wenig Text, starke Bilder → Premium/Brand-First.
- **Zielgruppe/Gerät**: mobil-lastig + schnelle Entscheidung → Conversion/Minimal.

Richtungen lassen sich mischen (z. B. Editorial-Corporate), aber mit **einer** klaren Leitrichtung — sonst wird es beliebig.

## Gotchas
- **Reflex-Defaults meiden:** Tech-SaaS-Dark, cream/beige-Editorial und der zentrierte Conversion-Hero sind die aktuellen AI-Defaults — nur wählen, wenn die Strategie es *fordert*, nicht als Rückfall. Siehe die Absolute-Bans in [[frontend-design]].
- Die Richtung ist eine **Entscheidung mit Begründung**, kein Etikett — festhalten, *warum* sie zu Marke/Ziel passt.
- Teil des Prozesses in [[web-design-workflow]] (Phase 5); die Ausführung übernehmen [[frontend-design]] + [[ui-design]].