Der größte Fehler beim Websitebau? Mit dem Design anzufangen. Ich hab’s oft genug gemacht, bis ich irgendwann dachte: Stopp, das ist doch verrückt. Warum hübsch malen, wenn man noch gar nicht weiß, was erzählt werden soll?

Was Content.First überhaupt bedeutet

Content.First ist keine hippe Agenturfloskel, sondern eine ziemlich logische Haltung: Erst kommt der Inhalt, dann kommt die Form. Du schreibst also erst, was du sagen willst, und baust darauf den Rest auf. Klingt simpel, verändert aber alles.

Ich erinnere mich an ein Projekt, bei dem das Design schon fix war, bevor ein einziger Satz stand. Drei Wochen später haben wir Schriften, Abstände und Elemente nachgezogen, weil der Text einfach nicht reinpassen wollte. Reine Zeitverschwendung. Seitdem geht’s bei mir nur noch Content.First. Und nein, das hat nichts mit Kreativblockade zu tun, sondern mit strategischer Klarheit.

Warum der Inhalt zuerst kommen sollte

Ein gutes Design lebt von einer klaren Botschaft. Wenn du zuerst den Text hast, weißt du genau, wohin der Blick des Lesers gehen soll. Keine wilden Farb- und Button-Diskussionen, bevor die Story steht. Du sparst dir endlose Feedbackschleifen, weil Inhalt und Struktur Hand in Hand gehen. Lies dazu auch Design Systeme ohne Drama: Wie du mit Elementors globalen Einstellungen den Grundstein legst, um zu verstehen, wie Designsysteme diese Klarheit unterstützen können.

Und ganz ehrlich: Der Leser interessiert sich nicht für dein Designsystem, sondern dafür, ob du sein Problem löst. Wenn dein Text das schafft, ist alles gewonnen. Dann darf das Design glänzen, aber eben in der richtigen Reihenfolge.

Wie du mit dem Content.First.Workflow startest

Zuerst definierst du deine Zielseiten. Nicht 50 auf einmal, sondern die wichtigsten drei bis fünf. Jede Seite braucht einen Zweck. Beispiel: Startseite informiert, Leistungsseite verkauft, Kontaktseite konvertiert.

Danach strukturierst du die Inhalte. Ich nenne das gern das „Gerüst“. Kein Schnickschnack, einfach Überschriften und kurze Stichpunkte pro Abschnitt. So erkennst du sofort, wo du Lücken hast.

Dann kommt der Text. Und zwar richtig. Du schreibst Fließtexte, Zwischenüberschriften und Calls-to-Action so, als wäre die Seite online. Kein Platzhalter-„Lorem Ipsum“-Quatsch. Wenn du’s nicht sagen kannst, hat’s keinen Platz.

Schritt 1: Die Inhaltsstruktur bauen

Ich starte jeden Content.First-Job mit einer simplen Inhaltsstruktur. Ein Whiteboard, Notion oder ein leeres Google-Doc reicht. Wichtig ist, dass du den roten Faden erkennst. Jede Unterseite hat ein Ziel, und jeder Abschnitt erfüllt eine Aufgabe.

Beispiel einer typischen Struktur:

• Überschrift: Das Versprechen oder der Nutzen
• Intro: Warum der Leser bleiben sollte
• Abschnitt 1: Problem definieren
• Abschnitt 2: Lösung anbieten
• Abschnitt 3: Beweise liefern (Kundenstimmen, Daten, Storys)
• CTA: Der logische nächste Schritt

Klingt simpel, doch genau das macht’s effektiv. Der Trick liegt in der Klarheit. Jede Zeile muss sagen, warum sie da ist. Wenn du etwas schreibst, das keinen Zweck erfüllt, streich es. Ohne Rücksicht auf die Mühe, die du reingesteckt hast.

Schritt 2: Textentwicklung mit Fokus auf Klarheit

Jetzt kommt der Teil, den viele überspringen, weil sie zu schnell ins Visuelle wollen. Hier brauchst du Disziplin. Schreib alles runter. Ungefiltert, rough. Erst beim zweiten Durchgang feilst du an Haltung, Rhythmus und Stimme.

Texte sind keine Deko, sie sind das Grundgerüst. Und sie brauchen Emotionen. Du schreibst nicht für Suchmaschinen, sondern für Menschen mit echten Fragen. Wenn du das nicht triffst, hilft dir kein SEO-Zauber.

Ein Tipp aus meiner Praxis: Lass jemand völlig Außenstehenden deinen Entwurf lesen. Wenn er nicht sofort versteht, worum’s geht, liegt das Problem nicht beim Leser, sondern bei dir. Das ist hart, aber hilft enorm.

Schritt 3: Übergang zum Wireframe

Erst wenn die Texte fertig sind, geht’s an die visuelle Planung. Nicht vorher. Du nimmst die finalen Texte und ordnest sie in Wireframes – also einfache Skizzen, die zeigen, wie der Nutzer durch die Seite geführt wird. Ergänzend kann dir der Artikel Warum ohne eine saubere Discovery Phase jedes Projekt ins Schlingern gerät helfen, um die richtige Grundlage für diesen Schritt zu legen.

Das Coole daran: Weil der Text schon steht, weißt du genau, wie viel Platz du brauchst. Kein Raten, kein Herumschieben. Du legst Buttons genau dort, wo der CTA im Text Sinn macht. Das Design dient dem Inhalt, nicht umgekehrt.

Ich nutze dafür Figma oder Miro, aber Stift und Papier tun’s genauso. Je weniger du dich vom Technischen ablenken lässt, desto besser.

Schritt 4: Storytelling in Struktur und Design

Ein Websitebesucher liest nicht linear, er scannt. Deshalb brauchst du eine klare Dramaturgie. Die Startseite ist dein Elevator Pitch, jede Unterseite führt tiefer in die Geschichte. Zu viel Info? Verfliegt. Zu wenig? Verwirrt.

Mein Trick: Stell dir deine Website wie eine Serie vor. Jede Seite ist eine Episode, jede Überschrift ein Cliffhanger. So bleibt der Leser dran. Du führst ihn von der Neugier zur Handlung, ganz ohne Zwang.

Tools, die dir helfen

Du musst kein Profi-Designer sein. Wirklich nicht. Wichtig ist, dass du Werkzeuge nutzt, die Content- und Designarbeit verbinden.

• Notion oder Google Docs für die Texte und Struktur
• Miro oder FigJam für Flowcharts und Wireframes
• Figma für die visuelle Umsetzung
• neu-protec für praxisnahe Beispiele und inspirierende Anwendungsfälle von Content-getriebenen Projekten

Am Ende sind Tools nur so gut, wie dein Prozess. Wenn du zuerst schreibst, wird jedes Tool plötzlich klarer, weil du weißt, was du suchst.

Was du vom Content.First.Workflow erwarten darfst

Du wirst direkter, präziser und mutiger. Kein Hin und Her zwischen Designer, Texter und SEO-Schrauber. Alles baut aufeinander auf. Wenn du’s einmal gemacht hast, willst du nicht mehr zurück zur planlosen Pixelmalerei.

Ich verspreche dir: Webseiten, die so entstehen, wirken natürlicher und zielgerichteter. Nutzer finden sich schneller zurecht. Und du sparst Wochen an Abstimmungschaos.

Erste Umsetzung: Ein Beispiel

Ein Kunde wollte eine komplexe Dienstleistungsseite. Früher hätte ich ein Design gebaut, Texte danach rein, fertig. Stattdessen habe ich diesmal alle Inhalte zuerst geordnet. Dann Text geschrieben, Ton abgestimmt, Call-to-Action positioniert. Erst danach Wireframes.

Ergebnis: Keine Diskussion über Textlängen, keine Feinschlifforgie. Der Designer hatte sofort die richtige Vorlage. Der Kunde war schneller happy, die Seite konvertiert besser. Content.First eben. Im Anschluss sorgte Wie gutes Motion Design dein Webdesign lebendig macht für zusätzliche Inspiration, um das fertige Design noch lebendiger zu gestalten.

Fehler, die du vermeiden solltest

• Design zuerst denken – lässt dich in Layout-Zwängen ersticken.
• Mit Platzhaltern schreiben – ist wie Kochen ohne Zutatenliste.
• Zu spät Feedback holen – killt deine Energie, wenn du schon zu tief drin bist.
• Texte auf Design pressen – zerstört Lesefluss und Glaubwürdigkeit.

Wenn du diese vier Fehler im Griff hast, bist du schon meilenweit voraus.

Das Zusammenspiel aus Text und Wireframe

Ein Wireframe ist kein Kunstwerk, sondern eine Landkarte. Du legst Textblöcke dorthin, wo sie logisch hingehören. Nicht aus dem Bauch, sondern aus dem Inhalt heraus. So entsteht Struktur, die wirklich funktioniert.

Ein Tipp, den ich liebe: Lies deine Seite laut vor, während du den Wireframe anschaust. Klingt absurd, hilft aber extrem. Du merkst sofort, wenn ein Absatz deplatziert ist, wenn der Leser unnötig springt oder wenn ein Call zu früh kommt.

Was du brauchst, um Content.First umzusetzen

• Ein offenes Team, das bereit ist, alte Gewohnheiten zu hinterfragen.
• Die Geduld, erst richtig zu schreiben, bevor du schön gestaltest.
• Klare Kommunikation zwischen Content, Design und Entwicklung.
• Den Mut, früh „Nein“ zu sagen, wenn der Prozess verwässert wird.

Ich hab gelernt: Content.First funktioniert nur, wenn alle Beteiligten daran glauben. Einer allein kann’s nicht retten. Aber sobald alle den Sinn sehen, läuft’s wie von selbst.

Wie du deinen Workflow dokumentierst

Schreib mit, was funktioniert. Jede Erfahrung, jeder Stolperstein. So baust du dein eigenes Regelwerk – kein starres, sondern ein atmendes System. Mit der Zeit erkennst du Muster, weißt schneller, wer was wann braucht. Das spart Nerven und macht dich als Projektleiter unschlagbar. Als Inspiration kann hier auch der Artikel Ich tue nur so als würde ich was können – der ehrliche Kampf mit dem Hochstapler-Syndrom helfen, um Zweifel im kreativen Prozess gelassener zu sehen.

Abschlussgedanke

Wenn du Websites wirklich nutzen willst, um Menschen zu erreichen, fang mit den Worten an. Design ist das Kleid, Inhalt ist die Persönlichkeit. Und Persönlichkeit gewinnt immer. Also: Schreib zuerst, zeichne danach.

Probier’s aus. Dein künftiges Ich wird dir danken.