Content first im Webdesign: Warum gute Websites mit Fragen statt Farben beginnen

Wenn eine neue Website geplant wird, dauert es meistens keine zehn Minuten, bis jemand über Farben spricht. Danach kommen Schriften, Bilder und die Frage, ob der große Slider auf der Startseite nicht doch ganz schick wäre.

Verständlich. Die neue Seite soll ja gut aussehen.

Nur rettet eine schöne Oberfläche keine unklare Botschaft. Wenn deine Besucher nicht verstehen, was du anbietest, für wen das gedacht ist und warum sie ausgerechnet bei dir anfragen sollen, hilft auch das sauberste Layout wenig.

Deshalb lohnt sich ein anderer Startpunkt: erst die Fragen deiner Besucher klären, dann gestalten. In der Fachsprache heißt das „Content first”. Klingt nach großer Strategie? Ist es nicht. Im Kern geht es nur darum, vor dem ersten Layout die richtigen Antworten auf den Tisch zu legen.

Das Wichtigste in Kürze

• Content first bedeutet, dass Ziel, Zielgruppe, Nutzerfragen und Handlungsziel vor dem visuellen Design geklärt werden.
• Das verhindert Platzhaltertexte, endlose Geschmacksdiskussionen und Seiten, die hübsch aussehen, aber niemanden führen.
• Sieben Leitfragen reichen aus, um aus einer vagen Website-Idee eine tragfähige Struktur zu machen.
• Ein konzentrierter Content-Workshop von 90 Minuten liefert für eine Leistungsseite oder eine kompakte Firmenwebsite meistens genug Material.
• Am Ende dieses Beitrags findest du eine Checkliste, die du vor jeder Design-Freigabe durchgehen kannst.

Was Content first im Webdesign wirklich bedeutet

Der Gedanke ist älter, als du vielleicht denkst. Webdesigner Jeffrey Zeldman hat ihn 2008 in einem einzigen Satz auf den Punkt gebracht: „Content precedes design. Design in the absence of content is not design, it’s decoration”. Also frei übersetzt: Design ohne Inhalt ist kein Design, sondern Dekoration.

Die Interaction Design Foundation beschreibt Content first genau so, als Ansatz, bei dem die Inhalte vor den visuellen Entscheidungen wie Layout, Typografie und Farben erarbeitet werden.

Was Content first nicht bedeutet: dass vor dem ersten Entwurf jede Unterseite fertig geschrieben sein muss. Das wäre bei größeren Projekten unrealistisch und würde dich eher ausbremsen.

Es bedeutet auch nicht, dass Design zweitrangig ist. Gutes Design macht Inhalte verständlicher, lenkt Aufmerksamkeit und hilft bei der Orientierung. Aber Design braucht etwas, das es ordnen kann.

Der sinnvollere Ablauf sieht so aus:

1. Ziel und Zielgruppe der Seite klären.
2. Die wichtigsten Fragen der Besucher sammeln.
3. Antworten, Belege und den nächsten Schritt festlegen.
4. Daraus die Seitenstruktur bauen.
5. Erst danach Typografie, Farben, Bilder und Details gestalten.

Der Unterschied wirkt klein, verändert aber das ganze Projekt. Statt über persönliche Vorlieben zu diskutieren, kannst du jede Entscheidung an einer einzigen Frage messen: Hilft dieses Element deinem Besucher dabei, die richtige Information zu finden oder den nächsten Schritt zu gehen?

Warum Design first so oft schiefgeht

Viele Projekte starten mit einem fertigen Theme, einem Figma-Layout oder einem Baukasten-Template. Dort steht dann „Wir schaffen innovative Lösungen” über drei Karten mit Blindtext.

Jetzt muss dein echter Inhalt in die vorhandenen Kästen passen. Und genau da fängt das Gefrickel an.

Eine wichtige Erklärung ist zu lang. Ein Leistungsbereich braucht vier statt drei Punkte. Die häufigste Kundenfrage passt in keinen der vorgesehenen Abschnitte. Also wird gekürzt, verschoben oder gestrichen, damit das Layout wieder ordentlich aussieht. Der Karren steht damit ziemlich deutlich vor dem Pferd.

Platzhalter erzeugen Platzhalter-Botschaften

Wenn du ein Design mit Blindtext freigibst, bewertest du vor allem die Optik. Später kommen die echten Inhalte, und plötzlich stimmt die Gewichtung nicht mehr. Aus einer kurzen Überschrift werden zwei Zeilen. Aus einer kleinen Infobox wird die wichtigste Erklärung der Seite. Entweder du baust das Layout um oder du stutzt den Inhalt künstlich zusammen.

Feedback wird zur Geschmacksfrage

Ohne klares Ziel diskutiert eine Runde über Blau, Grün, Rundungen und Bildstile. Das ist nicht komplett unwichtig, aber es ist schwer objektiv zu entscheiden.

Sobald feststeht, welche Person in welcher Situation welche Antwort braucht, wird Feedback konkreter. Dann geht es nicht mehr darum, ob jemand einen Button schön findet, sondern darum, ob er verständlich ist und an der richtigen Stelle auftaucht.

Die mobile Ansicht wird zum Resteverwerter

Auf einem großen Bildschirm lässt sich fast jeder Inhalt irgendwie verteilen. Auf dem Smartphone ist der Platz knapp. Dort zeigt sich sofort, ob deine Seite eine klare Reihenfolge hat.

Genau das war schon der Kern von Luke Wroblewskis Mobile-First-Prinzip: Weil der Bildschirm so wenig Platz lässt, musst du zuerst klären, welcher Inhalt für deine Nutzer am wichtigsten ist. Inhalt vor Navigation, Priorität vor Dekoration. Wenn deine wichtigste Aussage erst nach einem großen Bild, drei Logos und einer allgemeinen Begrüßung kommt, hat das Design deine Prioritäten verschluckt.

Die sieben Fragen vor dem ersten Wireframe

Du brauchst kein 60-seitiges Strategiepapier. Sieben gute Fragen reichen meistens, um aus einer vagen Idee eine brauchbare Struktur zu machen.

Für wen ist diese Seite wirklich gedacht?

„Für alle” ist keine Zielgruppe. Deine Website darf mehrere Zielgruppen haben, aber nicht jede einzelne Seite muss gleichzeitig mit allen sprechen.

Eine Leistungsseite braucht eine klare Hauptperson. Ist es die Geschäftsführerin eines kleinen Betriebs? Ein Patient mit akuten Beschwerden? Ein Einkäufer, der einen neuen Dienstleister prüft? Je genauer du die Person beschreibst, desto leichter werden Text und Aufbau.

In welcher Situation kommt diese Person auf die Seite?

Menschen besuchen Websites selten ohne Anlass. Meist haben sie ein Problem, vergleichen Angebote, suchen eine Telefonnummer oder wollen prüfen, ob sie dir vertrauen können.

Diese Situation verändert die ganze Seite. Wer akut Hilfe braucht, sucht andere Informationen als jemand, der sich in Ruhe informiert. Wer einen Industriezulieferer prüft, will andere Belege sehen als jemand, der einen Tisch reservieren möchte.

Was muss nach wenigen Sekunden klar sein?

Der erste Bildschirm muss nicht dein komplettes Angebot erklären. Drei Dinge sollten aber sofort sitzen: Was bietest du an, für wen ist es gedacht und was ist der nächste sinnvolle Schritt?

„Willkommen auf unserer Website” beantwortet keine dieser Fragen. „Ganzheitliche Lösungen für Ihren Erfolg” übrigens auch nicht. Solche Sätze klingen glatt und sagen fast nichts.

Welche Zweifel bremsen eine Anfrage?

Vor jeder Anfrage läuft im Kopf deines Besuchers eine kleine Liste ab. Passt das Angebot zu meinem Problem? Was kostet es ungefähr? Wie läuft die Zusammenarbeit? Muss ich mich sofort festlegen? Hat der Anbieter so etwas schon mal gemacht?

Eine gute Website wartet nicht, bis diese Zweifel im Telefonat auftauchen. Sie beantwortet die wichtigsten Einwände vorher. Ruhig, klar und ohne Verkaufstricks.

Welche Belege schaffen in deiner Branche Vertrauen?

Vertrauen sieht nicht überall gleich aus. Ein Softwareanbieter überzeugt mit Demo, Dokumentation und bekannten Integrationen. Bei einer Kanzlei zählen Spezialisierung, verständliche Rechtsgebiete und klare Ansprechpartner. Bei einer Praxis sind Team, Räume, Behandlungsschwerpunkte und ein einfacher Terminweg entscheidend.

Die Frage lautet also nicht: Welche Trust-Elemente sind gerade modern? Sondern: Was hilft genau dieser Zielgruppe bei ihrer Entscheidung?

Was soll der Besucher als Nächstes tun?

Jede wichtige Seite braucht ein Handlungsziel. Anfrage, Anruf, Termin, Download oder der Wechsel auf eine Detailseite.

Mehr Auswahl ist dabei nicht automatisch besser. Wenn fünf Buttons gleich laut um Aufmerksamkeit kämpfen, ist keiner davon wirklich wichtig. Leg einen Hauptweg fest und biete Alternativen nur dort an, wo sie tatsächlich gebraucht werden.

Was kann weg?

Diese Frage ist oft die stärkste. Muss die Firmengeschichte wirklich in den ersten Bildschirm? Braucht die Startseite alle Leistungen bis ins letzte Detail? Hilft das Stockfoto mit dem Händedruck irgendjemandem bei der Entscheidung?

Content first heißt nicht nur, die richtigen Inhalte zu finden. Es heißt auch, Ballast konsequent rauszuwerfen.

Dieselbe Struktur passt nicht zu jeder Branche

Ein Template kann technisch sauber sein und trotzdem in die falsche Reihenfolge zwingen. Deine Nutzer kommen je nach Branche mit anderen Fragen, Risiken und Erwartungen.

Die Tabelle zeigt auch, warum reine Branchenoptik zu kurz greift. Eine Zahnarztpraxis braucht nicht einfach helle Farben und lächelnde Menschen, sondern eine Informationsstruktur, die Unsicherheit abbaut und den Weg zum Termin leicht macht. Wie sich solche Nutzerfragen in einer einzelnen Branche in Seitenstruktur und Inhalte übersetzen lassen, habe ich am Beispiel Webdesign für Zahnärzte ausführlicher aufgeschrieben.

So wird aus Antworten eine Seitenstruktur

Wenn die sieben Fragen beantwortet sind, ist der Sprung zum Wireframe klein. Die Inhalte geben die Reihenfolge fast von selbst vor.

Einstieg: Angebot, Zielgruppe, Handlung

Der erste Abschnitt braucht eine klare Überschrift, einen kurzen erklärenden Satz und einen Haupt-Button. Ein Bild darf dazu, wenn es wirklich etwas zeigt: dein Team, dein Produkt, deine Arbeit oder das Ergebnis. Ein dekoratives Bild ersetzt keine klare Aussage.

Orientierung: Leistungen in der Sprache deiner Kunden

Danach sollte dein Besucher erkennen, welches Angebot zu seiner Situation passt. Das kann über Leistungsbereiche, typische Probleme oder verschiedene Einstiege laufen.

Entscheidend ist die Sprache. Interne Abteilungsnamen helfen selten, die Begriffe deiner Kunden fast immer. Das ist keine Geschmacksfrage, sondern eine der klassischen Usability-Regeln: Die zweite Nielsen-Heuristik „Match Between System and the Real World” verlangt genau das, nämlich die Sprache der Nutzer statt interner Fachbegriffe und Informationen in einer natürlichen, logischen Reihenfolge.

Vertrauen: Belege statt Behauptungen

„Wir sind kompetent, zuverlässig und kundenorientiert” kann jeder schreiben. Stärker sind konkrete Belege: echte Projekte, nachvollziehbare Qualifikationen, Kundenstimmen, Arbeitsproben, klare Prozesse, ein benannter Ansprechpartner.

Deine Website muss nicht behaupten, dass du gut bist. Besser, sie zeigt es.

Einwände: Fragen dort beantworten, wo sie entstehen

Viele Seiten schieben alle Fragen in einen riesigen FAQ-Block ans Ende. Bequem, aber nicht immer sinnvoll.

Wenn der Preisrahmen direkt nach der Leistungsbeschreibung wichtig wird, gehört die Erklärung dorthin. Wenn Datenschutz die Terminbuchung betrifft, steht der Hinweis am Formular. Gute Inhalte folgen dem Gedankengang deines Besuchers.

Abschluss: Den nächsten Schritt leicht machen

Am Ende muss klar sein, wie es weitergeht und was danach passiert. Ein guter Button sagt nicht nur „Absenden”, sondern beschreibt die Handlung: „Erstgespräch anfragen”, „Termin auswählen”, „Angebot erhalten”.

Je größer die Entscheidung, desto wichtiger ist eine kurze Erklärung dazu. Wer weiß, dass auf die Anfrage erst ein unverbindliches Gespräch folgt, klickt mit einem ganz anderen Gefühl als bei einem anonymen „Jetzt starten”.

Nebenbei zahlt diese Arbeit auf zwei Dinge ein, die viel zu oft als Extra-Aufgaben behandelt werden. Google verlangt in seinen Richtlinien hilfreiche, verlässliche und menschenzentrierte Inhalte, also Inhalte, die für echte Leser geschrieben sind (im Original „people-first content”). Und die Schreibtipps der W3C Web Accessibility Initiative empfehlen kurze, klare Sätze, verständliche Begriffe und aussagekräftige Titel, bei denen das Wichtige vorn steht. Wer Inhalte vor dem Layout sortiert, erledigt beides fast automatisch mit.

Ein Content-Workshop in 90 Minuten

UX-Discovery- und Content-Workshops vor dem Wireframing sind in der Praxis nichts Exotisches, sondern gehören bei vielen Agenturen zum Standardablauf. Für eine einzelne Leistungsseite oder eine kompakte Firmenwebsite reicht oft ein konzentrierter Termin. Das Ziel ist nicht der perfekte Text, sondern das richtige Rohmaterial.

Minute 0 bis 15: Ziel festlegen

Formuliere einen einzigen Satz: „Diese Seite soll …”

Zum Beispiel: „Diese Seite soll neuen Patienten zeigen, ob die Praxis zu ihrem Anliegen passt, und ihnen den Weg zur Terminbuchung erklären.”

Wenn in diesem Satz drei oder vier gleich wichtige Ziele stehen, ist das ein Warnsignal. Dann brauchst du vermutlich mehrere Seiten oder eine klarere Priorität.

Minute 15 bis 30: Zielgruppe und Situation beschreiben

Keine erfundene Persona mit Lieblingskaffee und Automarke. Beschreib lieber die echte Situation: Was ist gerade passiert? Was sucht die Person? Was weiß sie schon? Wovor hat sie Respekt? Welche Entscheidung will sie treffen?

Das bringt für deine Website mehr als jede hübsch gestaltete Persona-Karte.

Minute 30 bis 50: Fragen sammeln

Sammle alle Fragen, die vor einer Anfrage auftauchen. Gute Quellen sind Telefonate, E-Mails, Suchanfragen, Support-Nachrichten und Rückfragen zu Angeboten.

Sortiere noch nicht. Erst sammeln. Danach markierst du die Fragen, die besonders oft kommen oder eine Entscheidung blockieren.

Minute 50 bis 65: Belege zusammentragen

Welche Aussagen kannst du wirklich belegen? Leg Referenzen, Bilder, Zertifikate, Prozessschritte, Ansprechpartner und vorhandene Kundenstimmen auf den Tisch.

Wenn ein wichtiges Versprechen keinen Beleg hat, formulierst du es entweder vorsichtiger oder machst es später nachweisbar.

Minute 65 bis 80: Reihenfolge bauen

Schreib jede wichtige Aussage auf eine Karte oder einen digitalen Zettel und ordne sie aus Sicht des Besuchers: Was muss ich zuerst verstehen? Was will ich danach wissen? Welcher Zweifel kommt als Nächstes? Wann bin ich bereit für den nächsten Schritt?

Das ist im Grunde schon dein erster Wireframe, nur ohne Ablenkung durch Farben und Bilder.

Minute 80 bis 90: Lücken und Zuständigkeiten klären

Zum Schluss wird es praktisch. Wer liefert welche Information? Welche Fotos fehlen? Welche Aussage muss fachlich geprüft werden? Wer gibt die Texte frei?

So entsteht kein weiteres Konzeptpapier, das in einem Ordner verschwindet, sondern eine klare Aufgabenliste mit Namen dahinter.

Die häufigsten Content-first-Fehler

Auch ein guter Content-first-Prozess kann unnötig schwerfällig werden. Diese Fehler sorgen am schnellsten dafür.

Der Text soll sofort perfekt sein

Am Anfang reichen Rohfassungen, Stichpunkte und ehrliche Antworten. Wer schon im Workshop an jeder Formulierung feilt, verliert den Blick für die Struktur. Erst Klarheit, dann Stil.

Das Unternehmen spricht nur über sich

„Wir wurden gegründet”, „Wir stehen für”, „Wir bieten”. Solche Informationen haben ihren Platz. Aber deine Besucher wollen zuerst wissen, ob ihr eigenes Problem verstanden wird.

Ein einfacher Test: Markier in deinem Entwurf alle Sätze mit „wir” und alle Sätze, die von einem konkreten Kundenproblem handeln. Wenn fast nur dein Unternehmen vorkommt, fehlt die andere Hälfte des Gesprächs.

Jede Abteilung bekommt einen Platz auf der Startseite

Interne Gleichberechtigung ist kein Navigationsprinzip. Eine Startseite ist kein Organigramm. Sie muss Besuchern helfen, nicht jede Abteilung zufriedenstellen.

Der Button kommt erst am Ende dazu

Wenn du das Handlungsziel erst nach dem Design festlegst, wirkt der Button wie ein Aufkleber. Denk den nächsten Schritt von Anfang an mit, dann passen Argumentation, Reihenfolge und Formular zusammen.

Inhalte werden nach dem Layout gekürzt

Natürlich müssen Texte redigiert werden. Aber eine wichtige Antwort zu streichen, weil die Karte im Design zu klein ist, löst das falsche Problem. Dann bewegt sich das Layout, nicht die Nutzerfrage.

Checkliste vor dem ersten Design

Bevor du Wireframes oder Layouts freigibst, solltest du diese Punkte beantworten können:

• Die Hauptzielgruppe der Seite ist klar.
• Die konkrete Besuchssituation ist beschrieben.
• Angebot und Nutzen lassen sich in wenigen Sätzen erklären.
• Die wichtigsten Fragen und Einwände sind gesammelt.
• Für zentrale Aussagen gibt es echte Belege.
• Ein primäres Handlungsziel steht fest.
• Die Inhalte sind aus Sicht des Besuchers sortiert.
• Fehlende Texte, Bilder und Freigaben haben einen Verantwortlichen.
• Unnötige Abschnitte wurden bewusst gestrichen.
• Die mobile Reihenfolge funktioniert auch ohne dekorative Elemente.

Wenn mehrere Punkte offen sind, ist das kein Drama. Es ist nur zu früh für ein finales Design.

Fazit: Erst Klarheit, dann Schönheit

Eine gute Website braucht beides, starke Inhalte und gutes Design. Die Reihenfolge entscheidet aber darüber, ob am Ende eine verständliche Seite entsteht oder eine schicke Oberfläche mit zurechtgestutzten Texten.

Content first bringt die Fragen deiner Besucher an den Anfang des Projekts. Abstimmungen werden dadurch sachlicher, Strukturen klarer und Layouts belastbarer. Das Design muss dann keine fehlende Strategie mehr kaschieren, sondern kann endlich das tun, wofür es da ist: Inhalte ordnen, Orientierung schaffen und den nächsten Schritt leicht machen.

Die gute Nachricht: Dafür brauchst du kein monatelanges Konzept. Fang mit den sieben Fragen an. Wenn die Antworten stehen, wird auch das Design deutlich einfacher.

Häufige Fragen zu Content first im Webdesign

Müssen alle Texte fertig sein, bevor das Design beginnt?

Nein. Die zentralen Aussagen, Fragen, Belege und Handlungsziele sollten feststehen. Feinschliff und Detailtexte dürfen parallel zum Wireframe entstehen.

Funktioniert Content first auch bei einem Relaunch?

Gerade dort. Bestehende Inhalte sind wertvolles Material, aber übernimm sie nicht blind. Prüf jede Seite danach, welche Nutzerfrage sie beantwortet und welches Ziel sie verfolgt.

Wer sollte an einem Content-Workshop teilnehmen?

Mindestens eine Person mit direktem Kundenkontakt, eine Person mit Entscheidungskompetenz und jemand, der die Website fachlich oder redaktionell umsetzt. Zu große Runden machen den Termin langsam.

Ist Content first nur etwas für große Websites?

Nein. Je kleiner die Seite, desto wichtiger ist die klare Priorität. Eine kompakte Firmenwebsite hat kaum Platz für Umwege und Allgemeinplätze.

Wann darf das visuelle Design starten?

Sobald Zielgruppe, Seitenziel, Kernaussagen, Belege und die grobe Reihenfolge stehen. Dann kann das Design auf echten Inhalten aufbauen, ohne auf den letzten Satz zu warten.

Quellen

• Jeffrey Zeldman: Content precedes design
• Interaction Design Foundation: Content First
• Nielsen Norman Group: Match Between the System and the Real World
• Luke Wroblewski: Mobile First
• Google Search Central: Creating helpful, reliable, people-first content
• W3C Web Accessibility Initiative: Writing for Web Accessibility