Die meisten digitalen Produkte scheitern nicht an fehlenden Features. Sie scheitern, weil die ersten zehn Sekunden nach Formular klingen. Hierarchie ist die Lösung — nicht noch ein Illustrations-Pass.
Wir beginnen mit dem, was stimmen muss, bevor etwas schön sein darf. Raster, Typo und Kontrast sind keine Ästhetik — sie sind Entscheidungen, die man im Review verteidigen kann. Dekoration kommt zuletzt, und nur mit Job: Tempo, Betonung oder Entlastung.
Was Nutzer wirklich wahrnehmen
In moderierten Sessions bitten wir Leute, das Produkt nach dreißig Sekunden zu beschreiben — bevor sie explorieren. Die Antworten clustern um Struktur, nicht um Farbe. Ist die Karte klar, darf die Stimmung ruhig sein.
- 73% — nennen Hierarchie zuerst (n = 48 Sessions)
- 2.1× — schnellere Task-Findung (nach Typo-Skalierung)
- 0 — zusätzliche Gradients shipped (letzte drei Releases)
Eine Typo-Skala, die man verteidigt
Wir halten die Skala absichtlich kurz. Jede Stufe braucht einen Use — Display, Section, Body, Meta. Existiert eine Größe nur „weil Figma Platz hatte“, shipped sie nicht.
Arbeits-Rollen der Typo (Auszug)
| Rolle | Einsatz | Zeilenlänge |
|---|---|---|
| Display | Hero / Brand-Signal | ≤ 18 ch |
| Heading | Abschnittstitel | ≤ 28 ch |
| Body | Lesetext | 52–68 ch |
| Meta | Indexes, Captions | beliebig |
Tokens, die zum CSS passen
Klarheit stirbt im Handoff, wenn Namen driften. Wir mappen Rollen einmal auf CSS-Variablen — dann sprechen Figma und Code dieselbe Sprache.
// globals.css
:root {
--type-display: clamp(2.5rem, 5vw, 4rem);
--type-heading: clamp(1.5rem, 2.4vw, 2rem);
--type-body: 1rem;
--type-meta: 0.75rem;
--tracking-display: -0.03em;
--leading-body: 1.55;
}
Der Test ist einfach. Nimm die Verzierungen weg. Wenn das Produkt trägt, hast du Struktur gebaut. Wenn es kippt, war es ein Moodboard.
“Schön ohne Zweck ist Lärm.”