Content-First Design ist ein Gestaltungsansatz, bei dem Inhalte – Texte, Informationshierarchien und Datenstrukturen – vor oder parallel zu visuellen Layouts entwickelt werden, statt nachträglich in fertige Designs eingesetzt zu werden.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX Writing & Content Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Content-Driven Design, Text-First Design, Strukturiertes Inhaltsdesign
Was ist Content-First Design?
In der klassischen Designpraxis werden Wireframes und visuelle Layouts oft mit Platzhaltertext (Lorem ipsum) erstellt. Texte werden erst am Ende eingefügt – meist unter Zeitdruck und ohne ausreichende UX-Writing-Expertise. Das Ergebnis: Texte, die nicht ins Layout passen, wichtige Inhalte, die abgeschnitten werden, und Nutzerführung, die am Text scheitert.
Content-First Design dreht diesen Prozess um: Die eigentlichen Inhalte werden früh entwickelt und definieren die Struktur, nicht umgekehrt. Der Ansatz geht zurück auf frühe Überlegungen in der Content-Strategie (Halvorson, 2009) und hat durch Sarah Richards' Arbeit bei GDS und Karen McGrane's Konzept des „Structured Content" im responsiven Webdesign breite Aufmerksamkeit erlangt.
Erklärung
Warum Lorem ipsum schadet
Lorem ipsum ist in der Designpraxis so weit verbreitet, dass seine Nachteile oft übersehen werden:
1. Falsche Proportionen: Texte in Designsprachen sind selten so lang wie reale Texte. Ein UI, das mit Kurztexten schön aussieht, kollabiert, wenn ein Hilfetext plötzlich drei Sätze lang ist.
2. Inhalt formt Struktur: Welche Informationen auf einem Screen angezeigt werden und in welcher Reihenfolge, sind keine visuellen Entscheidungen – sie sind Inhalts-Entscheidungen. Wer das Visuelle zuerst gestaltet, trifft diese Entscheidungen implizit und falsch.
3. Spätere Text-Anpassungen kosten mehr: Wenn Texte erst nach dem Design-Sign-off entwickelt werden, führen notwendige Korrekturen zu Design-Revisionen – ein Aufwand, der vermeidbar wäre.
4. Wichtigkeit von Texten wird unterschätzt: Lorem ipsum signalisiert implizit: „Texte sind Füllung." Real-Text in Wireframes signalisiert: „Texte sind Design."
Content-First in der Praxis
Schritt 1: Content Inventory & Audit Welche Inhalte hat das Produkt bereits? Welche werden benötigt? Diese Bestandsaufnahme ist der Startpunkt (vgl. Content Design Prozess).
Schritt 2: Content Modeling Welche Arten von Inhalten gibt es? Welche Struktur haben sie? Ein Content-Modell definiert z. B.: ein Produkt-Item hat einen Titel (max. 60 Zeichen), eine Kurzbeschreibung (max. 120 Zeichen) und eine Kategorie. Diese Struktur informiert das Design-System.
Schritt 3: Real-Text-Wireframes Wireframes werden von Anfang an mit echten oder realistischen Texten erstellt – nicht mit Lorem ipsum. UX Writer und Designer arbeiten in dieser Phase gemeinsam in Figma oder ähnlichen Tools.
Schritt 4: Content-Hierarchie prüfen Welche Information ist die wichtigste? Welche ist sekundär? Diese Hierarchie muss im Layout sichtbar sein. Wenn ein visuelles Design die wichtigste Information optisch zurückstellt, ist das ein Inhaltsproblem, das visuell adressiert werden muss.
Schritt 5: Testen mit echtem Text Usability-Tests mit echtem Text statt Platzhalter liefern deutlich realistischere Erkenntnisse über Nutzerverhalten.
Content-First vs. Mobile-First
Content-First und Mobile-First sind komplementäre Ansätze:
- Mobile-First: Für den kleinsten Screen designen, dann erweitern
- Content-First: Mit dem wichtigsten Inhalt beginnen, dann gestalten
Beide fordern, von Einschränkungen auszugehen. Mobile-First zwingt zur Priorisierung durch begrenzten Platz; Content-First zwingt zur Priorisierung durch Inhaltsfokus.
Structured Content und COPE
Das Prinzip „COPE" (Create Once, Publish Everywhere) von Karen McGrane besagt, dass Inhalte so strukturiert sein sollten, dass sie auf verschiedenen Kanälen und Geräten verwendbar sind – ohne für jeden Kanal neu geschrieben werden zu müssen. Das erfordert modulare, kanalunabhängige Inhaltsstrukturen.
Content-First Design ist die Designimplementierung dieses Prinzips: Wenn die Inhaltsstruktur zuerst definiert wird, können Layouts für verschiedene Ausgabeformate flexibel entwickelt werden.
Beispiele
Klassisches Problem ohne Content-First: Ein Designteam erstellt einen Onboarding-Screen mit drei kurzen Bullet-Points (Lorem ipsum). Die UX Writerin füllt ihn später aus – der längste Punkt hat 45 Wörter. Das Layout bricht auf kleinen Screens. Redesign nötig.
Mit Content-First: Die UX Writerin schreibt die drei Onboarding-Punkte zuerst (30 Zeichen max.). Der Designer baut das Layout um diese konkreten Inhalte herum auf. Kein Nacharbeiten nötig.
Content-Modell für eine App-Benachrichtigung: ``` Notification:
- Titel: max. 40 Zeichen
- Body: max. 90 Zeichen
- CTA-Label: max. 15 Zeichen
```
Dieses Modell informiert sowohl das Design (wie viel Platz einplanen) als auch das Writing (wie knapp formulieren).
In der Praxis
Widerstände überwinden
Content-First stößt oft auf Widerstand, weil es von etablierten Prozessen abweicht:
„Wir können nicht warten, bis Texte fertig sind." Content-First bedeutet nicht, das gesamte Schreiben vor dem Designen fertigzustellen. Es bedeutet, Real-Text früh einzubeziehen – auch in Form von Entwurfstexten, die sich noch ändern können.
„Das verlangsamt uns." Kurzfristig kann der Prozess langsamer sein. Langfristig spart er Design-Revisionen und Content-Überarbeitungen in der Entwicklungsphase – erheblich teurer.
Für wen ist Content-First besonders relevant?
- Produkte mit viel Text (Dashboards, Settings, Onboarding-Flows)
- Mehrsprachige Produkte, bei denen Texte in verschiedenen Längen auftreten
- Responsive Designs, bei denen Text-Overflow ein echtes Problem ist
- Produkte mit komplexen Informationsarchitekturen
Vergleich & Abgrenzung
Content-First vs. Design-First: Design-First erstellt visuelle Layouts mit Platzhaltern. Content-First beginnt mit echten Inhalten. In vielen Teams ist ein hybrider Ansatz realistisch: Grobe Layoutstruktur + echte Texte früh, verfeinerte visuelle Gestaltung später.
Content-First vs. [Content Design Prozess](/wiki/mediendesign-digitale-medien/ux-writing/content-design-prozess/): Der Content Design Prozess ist der methodische Rahmen; Content-First ist ein spezifisches Prinzip innerhalb dieses Rahmens – die Forderung, Inhalte früh einzubeziehen.
Content-First vs. Mobile-First: Nicht konkurrierend, sondern komplementär. Mobile-First ist ein Layout-Prinzip; Content-First ist ein Inhaltsprinzip.
Häufige Fragen (FAQ)
Bedeutet Content-First, dass Texte nie mehr überarbeitet werden? Nein. Texte entwickeln sich im Prozess weiter. Content-First bedeutet lediglich, dass echte Texte früh einbezogen werden, nicht dass sie von Beginn an final sein müssen.
Wie überzeuge ich mein Designteam von Content-First? Mit konkreten Beispielen aus dem eigenen Produkt: Wo sind durch Lorem-ipsum-Designs Probleme entstanden? Zeige, was ein Real-Text-Wireframe anders zeigt.
Was ist mit Produkten, bei denen der Inhalt nutzergeneriert ist? Auch dort gibt es redaktionelle Strukturen (Labels, Platzhalter, Fehlertexte, Systemzustände) – diese werden Content-First entwickelt. Die nutzergenetierten Inhalte selbst werden durch Content-Modelle strukturiert (max. Längen, Felder etc.).
Brauche ich einen UX Writer für Content-First? Nein, aber es hilft erheblich. Content-First kann auch von Designern praktiziert werden, die Texte ernst nehmen – der Ansatz ist kein exklusives Writing-Thema.
Verwandte Einträge
- Content Design Prozess
- Content Pattern Library
- Plain Language: Verständlich schreiben
- UX-Style-Guide
- Leerer Zustand (Empty State)
Weiterführend
- Halvorson, Kristina: „The Discipline of Content Strategy", A List Apart, 2008
- McGrane, Karen: Content Strategy for Mobile, A Book Apart, 2012
- Richards, Sarah: Content Design, Content Design London, 2017
- Coyne, Kara Pernice: „Content-First Design", Nielsen Norman Group, 2021
