Inhalt und Design auf der Firmenwebsite aufeinander abstimmen

Inhalt und Design passen dann zusammen, wenn Texte und visuelles Layout einer Firmenwebsite gemeinsam auf ein Ziel hin geplant sind. In diesem Beitrag zeige ich die Methode, die ich seit 2012 in Kundenprojekten nutze: Content First, echte Texte statt Lorem Ipsum, Inhaltsvorlagen und ein gemeinsamer Arbeitsablauf für Designer und Texter.

Was bedeutet es, Inhalt und Design aufeinander abzustimmen?

Inhalt und Design abzustimmen heißt, Texte, Überschriften, Bilder und Layout rund um ein einziges Kommunikationsziel zu planen. Das Layout trägt die Botschaft, und die Botschaft passt in den Raum, den das Layout ihr gibt. Stimmt beides, finden Besucher schnell ihre Antwort und die Seite erreicht ihr Ziel.

Ein einfaches Beispiel: Der Designer zeichnet Leistungskarten mit Platz für drei Textzeilen. Dann liefert der Texter zwei Absätze pro Leistung. Am Ende stehen abgeschnittene Sätze oder gesprengte Boxen. Deshalb ist Abstimmung keine Geschmacksfrage, sondern eine gemeinsame Sprache zweier Disziplinen.

Zudem geht es nicht nur um Textlänge. Tonalität, Hierarchie, Bildauswahl und die Position des Call to Action gehören ebenso dazu. Zum Beispiel sendet ein seriöser Ton neben verspielten Illustrationen zwei widersprüchliche Signale. Anders gesagt: Es geht um die Übereinstimmung zwischen dem, was eine Website sagt, und dem, was sie zeigt.

Warum ist das Zusammenspiel von Inhalt und Design so wichtig?

Weil Besucher scannen statt lesen. Laut einer Auswertung der Nielsen Norman Group lesen Nutzer etwa 20 Prozent der Wörter auf einer durchschnittlichen Seite. Bei so wenig Lektüre entscheidet das Design, welche Wörter überhaupt ankommen. Also reicht der richtige Satz allein nicht. Er braucht auch den richtigen Platz und das richtige Gewicht.

Außerdem wirkt sich fehlende Abstimmung direkt auf Anfragen aus. Stellen Sie sich ein Angebotsformular ohne einen vertrauensbildenden Satz darüber vor. Oder Preisangaben, die in einer winzigen Fußnote verschwinden. In beiden Fällen zögert der Besucher. Diesen Zusammenhang beschreibe ich ausführlich im Beitrag über conversionorientiertes Webdesign.

Dann ist da noch die Suche. Google erklärt in der Search Central Dokumentation, dass es hilfreiche Inhalte für Menschen belohnen will. Versteckt das Layout diese Inhalte in Akkordeons oder erdrückt sie mit Dekoration, verliert der Leser. Kurz gesagt: Abstimmung bedeutet Lesbarkeit für Menschen und Suchmaschinen.

Woran erkennen Sie, dass Inhalt und Design nicht zusammenpassen?

Meist bemerken Sie das Problem erst nach dem Launch, wenn das Team echte Texte ins CMS einpflegt. Diese Anzeichen sehe ich in der Praxis am häufigsten:

• Überschriften sprengen ihren Platz und laufen über drei Zeilen.
• Kartenraster erwarten gleich lange Texte, doch die echten Beschreibungen schwanken stark.
• Ein riesiges Bild im Kopfbereich drückt die Kernbotschaft nach unten.
• Stockfotos haben nichts mit der beschriebenen Leistung zu tun.
• Jede Seite formuliert den Call to Action anders.
• Wichtige Informationen landen in einem PDF, weil sie nicht ins Layout passen.

All das hat dieselbe Ursache. Das Team hat das Design fertiggestellt, bevor es Inhalte gab, und die Inhalte danach hineingezwängt. Folglich glauben beide Seiten, ihren Job erledigt zu haben. Trotzdem ist die fertige Seite etwas, das niemand wirklich geplant hat. Wie solche Fehler Umsatz kosten, zeige ich im Artikel über UX Fehler, die Umsatz kosten.

Wie funktioniert der Ansatz Content First?

Content First heißt: Sie legen fest, was eine Seite sagen muss, bevor Sie entscheiden, wie sie aussieht. Die Reihenfolge lautet Ziel, Botschaft, Textentwurf, Struktur und erst dann visuelles Design. Der Designer startet also mit dem echten Gerüst der Seite statt mit einer leeren Fläche.

In der Praxis schreibe ich zunächst für jede Seite einen Zweck in einem Satz. Zum Beispiel: „Diese Seite führt den Werksleiter zum Angebotsformular.“ Danach sammeln wir die Fragen, mit denen Besucher auf diese Seite kommen. Anschließend machen wir daraus Überschriften. Erst dann beginnt das visuelle Design.

Dieser Ansatz schränkt Designer nicht ein. Stattdessen gibt er ihnen festen Boden. Sie müssen nicht mehr raten, welche Information zählt und welche nur ergänzt. Die Hierarchie steckt bereits im Inhalt. Besonders deutlich zeigt sich das beim Mobile First Design, denn auf dem schmalen Bildschirm entscheidet der Inhalt, was zuerst kommt.

Warum macht Lorem Ipsum bei Firmenwebsites Probleme?

Lorem Ipsum ist ein lateinisch anmutender Blindtext, der Platz füllt, solange echter Text fehlt. Für eine schnelle Skizze ist er also durchaus praktisch. Allerdings erzeugt er bei einer Firmenwebsite eine gefährliche Illusion. Blindtext hat immer saubere Längen, gleichmäßige Absätze und perfekte Zeilenumbrüche. Echte Inhalte verhalten sich nie so.

Nehmen Sie einen Hersteller, dessen Produkt „Hydraulisches Pressensystem aus Edelstahl“ heißt. Eine Karte mit zwei Wörtern Blindtext wirkt elegant. Dann kommt der echte Name, und die Karte bricht zusammen. Ebenso sprengen eine technische Datentabelle, eine lange Zertifikatsliste oder eine Übersetzung ins Englische schnell jedes Layout.

Wichtiger noch: Blindtext verlagert die Diskussion an die falsche Stelle. In der Abnahme sprechen alle über Farben und Schriften, denn es gibt nichts zu lesen. Folglich fragt niemand, ob die Botschaft überzeugt. Deshalb nutze ich Lorem Ipsum nur in frühen Skizzen. Kein Entwurf, der zur Kundenfreigabe geht, enthält ihn.

Wie starten Sie mit echten Inhalten im Design?

Am einfachsten starten Sie mit den Texten, die Sie schon haben. Perfekt müssen sie dabei nicht sein, denn es geht um Substanz. Alte Leistungsbeschreibungen, Absätze aus der Broschüre, Formulierungen Ihres Vertriebs und Fragen aus Kundenmails sind gutes Rohmaterial.

1. Übertragen Sie alle Seiten und Texte der aktuellen Website in eine Tabelle.
2. Markieren Sie jeden Eintrag mit behalten, neu schreiben oder löschen.
3. Schreiben Sie echte Entwürfe für die Startseite und die drei meistbesuchten Seiten.
4. Geben Sie dem Designer diese Entwürfe samt längstem und kürzestem Beispiel.
5. Gestalten Sie die Entwürfe mit diesen echten Texten und präsentieren Sie sie so.

Trennen Sie dabei Entwurf und Endfassung klar. Ein Entwurf braucht nur eine realistische Länge und das echte Thema. Stil und Rechtschreibung können später kommen. Somit trifft das Design früh auf die Realität. Um Textlängen schnell zu prüfen, können Sie meinen Wörterzähler nutzen.

Wie hilft eine Inhaltsinventur dem Designprozess?

Eine Inhaltsinventur ist eine Tabelle, die jede Seite, jede Komponente und jedes Dokument Ihrer Website auflistet. Ihr Wert für das Design ist einfach. Sie zeigt, wie viele Inhalte welcher Art Sie wirklich haben. Daher arbeitet der Designer mit der echten Bandbreite statt mit einer idealen Musterseite.

Typische Spalten sind URL, Seitentyp, Länge der Überschrift, Wortzahl, Anzahl der Bilder, Tabellen oder Dateien und eine verantwortliche Person. Das wirkt zunächst trocken, weil es nur Zahlen sind. Sobald Sie die Tabelle füllen, erkennen Sie jedoch Muster. Vielleicht enthält die Hälfte Ihrer Artikel Tabellen, oder Ihre Referenzen haben gar keine Bilder.

Solche Erkenntnisse werden direkt zu Designentscheidungen. Viele Tabellen heißen, dass der Designer von Anfang an eine scrollbare mobile Tabelle plant. Fehlende Bilder heißen, dass Referenzkarten auch ohne Foto funktionieren müssen. Außerdem verhindert die Inventur Inhaltsverluste beim Relaunch; mehr dazu im Beitrag SEO beim Website Relaunch schützen.

Was ist eine Inhaltsvorlage und wie erstellen Sie sie?

Eine Inhaltsvorlage ist ein strukturiertes Dokument, das die Abschnitte eines Seitentyps festlegt. Dazu nennt sie Zweck und ungefähre Länge jedes Abschnitts. Sie ist also das inhaltliche Gegenstück zur Komponentenbibliothek im Design. Der Texter füllt klare Felder, statt vor einer leeren Seite zu sitzen.

Eine Vorlage für eine Leistungsseite könnte so aussehen: ein Nutzenversprechen in einem Satz, eine kurze Beschreibung, drei bis fünf Vorteile, Prozessschritte, häufige Fragen und ein Call to Action. Neben jedem Feld stehen eine Zeichenspanne und ein Beispiel. Somit schauen Texter und Designer auf denselben Rahmen.

Ich empfehle, Vorlagen gemeinsam mit dem Designer zu erstellen. Denn jedes Feld der Vorlage sollte einer Komponente im Design entsprechen. Sagt der Texter „Prozessschritte“, denkt der Designer bereits an die nummerierte Schrittkomponente. Steht diese Zuordnung, geht das Anlegen neuer Seiten schneller und die Website bleibt beim Wachsen einheitlich. Die Suchseite der Struktur behandle ich im Beitrag SEO Texte schreiben.

Wie unterscheiden sich Inhaltsvorlagen je nach Seitentyp?

Jeder Seitentyp beantwortet eine andere Frage, deshalb unterscheiden sich auch die Vorlagen. Die folgende Tabelle fasst die Aufteilung zusammen, die ich in Firmenprojekten nutze. Verstehen Sie sie als Startpunkt aus der Praxis, nicht als Garantie. Passen Sie sie also an Ihre Marke an.

Am nützlichsten ist die Spalte mit dem Designrisiko. In Designreviews dient sie Ihnen als Checkliste. So erkennen Sie den wahrscheinlichsten Fehler je Seitentyp schon im Voraus.

Wie arbeiten Designer und Texter am besten zusammen?

Designer und Texter arbeiten am besten parallel statt nacheinander. Im klassischen Ablauf schreibt der Texter alles fertig und übergibt es. Dann versucht der Designer, die Texte hineinzuquetschen. In einem guten Ablauf sitzen beide von Beginn an in denselben Terminen und schauen auf dasselbe Dokument.

Diesen Ablauf empfehle ich:

1. Texter und Designer nehmen gemeinsam am Kickoff teil.
2. Der Texter entwirft Seitenziele und Inhaltsvorlagen; der Designer kommentiert.
3. Danach skizziert der Designer grobe Wireframes mit echten Überschriften.
4. Auf dieser Basis schreibt der Texter erste Entwürfe.
5. Beide prüfen gemeinsam und korrigieren überlaufende oder leere Bereiche.
6. Zum Schluss setzt der Designer die freigegebenen Texte im finalen Layout um.

Schritt fünf ist der wichtigste. In der gemeinsamen Prüfung sagt der Texter vielleicht, dass eine Überschrift nicht kürzer geht, weil Kunden genau diese Formulierung suchen. Der Designer entgegnet, dass ein Absatz mobil drei Bildschirme Scrollen bedeutet. Also lösen Sie den Konflikt am Tisch statt auf der Live Website. Mit Figma klappt diese Prüfung direkt in der Datei; den Ablauf beschreibe ich in Webdesign mit Figma Schritt für Schritt.

Wie platzieren Sie Inhalte im Wireframe?

Ein Wireframe ist das Gerüst einer Seite, das nur die Struktur zeigt, ohne Farben und Bilder. Für die Abstimmung ist das der günstigste Moment. Einen Abschnitt verschieben oder löschen dauert hier Minuten. Im fertigen Design dauert es Stunden, im Code sogar Tage.

Setzen Sie statt Blindtext echte Überschriften und kurze Beschreibungen in realistischer Länge ein. Ist ein Absatz noch nicht fertig, schreiben Sie zumindest den ersten Satz. Dann ergänzen Sie eine Notiz zur Länge, etwa „Prozessbeschreibung, 60 Wörter“. So weiß der Designer, wie viel jede Box tragen muss.

Zudem hilft es, die Priorität der Inhalte im Wireframe zu nummerieren. Neben jeden Abschnitt schreiben Sie eine Reihenfolge wie „1: Nutzenversprechen, 2: Belege, 3: Leistungen“. Diese Reihenfolge behalten Sie beim mobilen Layout bei. Vor allem auf Seiten für Entscheider bestimmt der erste Bildschirm, ob Ihr Ziel aufgeht. Wie Sie dieses Ziel festlegen, lesen Sie im Beitrag Conversion Ziele festlegen.

Wie testen Sie lange und kurze Texte?

Sie testen jedes Design nicht nur mit idealen Texten, sondern mit den kürzesten und längsten echten Beispielen. Ich nenne das Grenzfalltest. Ein Überschriftenfeld muss mit zwei Wörtern genauso funktionieren wie mit zwölf.

Konkret baue ich für jede Komponente drei Varianten: typisch, am kürzesten und am längsten. Auf einer Teamkarte steht dann etwa „Spezialist“ neben „Leiter Qualitätssicherung und Prozessentwicklung“. Bleiben die Karten bündig? Wirken die Zeilenhöhen ausgewogen? Die Antwort sehen Sie dann sofort auf dem Bildschirm.

• Testen Sie Überschriften mit dem längsten echten Produktnamen.
• Prüfen Sie Beschreibungen mit einem Satz und mit fünf Sätzen.
• Übersetzen Sie bei mehrsprachigen Seiten in die längste Sprache und prüfen Sie erneut.
• Schauen Sie, wie eine Karte ohne Bild aussieht.
• Vergrößern Sie die Schrift im Browser und suchen Sie nach Überläufen.

Bei mehrsprachigen Projekten ist dieser Test noch wichtiger, denn deutsche Texte fallen oft länger aus als englische. Mehr dazu finden Sie im Beitrag über mehrsprachige Websites und SEO.

Wie unterstützen Typografie und Weißraum den Inhalt?

Typografie gibt dem Inhalt eine Stimme auf dem Bildschirm. Der Unterschied in Größe und Gewicht zwischen Überschrift, Zwischenüberschrift, Fließtext und Hinweis zeigt, was wichtig ist. Auf einer gescannten Seite hilft diese Hierarchie, die richtigen 20 Prozent zu lesen.

Auf Firmenwebsites korrigiere ich am häufigsten zu kleine Fließtexte und zu lange Zeilen. Eine sehr breite Textspalte ermüdet, denn das Auge verliert beim Sprung zum nächsten Zeilenanfang den Halt. Deshalb halte ich die Textspalte auch auf großen Bildschirmen lesbar schmal.

Weißraum ist ebenfalls ein inhaltliches Werkzeug. Genug Abstand zwischen Absätzen lässt jeden Gedanken atmen. Allerdings löscht gleicher Abstand überall die Hierarchie aus; halten Sie Zusammengehöriges nah und Getrenntes fern. Das W3C verlangt im Kriterium zu Textabständen, dass Inhalte erhalten bleiben, wenn Nutzer Zeilen und Absatzabstände vergrößern. Ein Layout mit dieser Flexibilität verträgt auch echte Texte besser. Prüfen Sie Ihre Texte gern mit meinem Tool Lesbarkeit prüfen.

Wie sollten Bilder und Texte zusammenwirken?

Ein Bild sollte belegen oder erklären, was der Text sagt. Der größte Fehler auf Firmenwebsites sind Stockfotos von lächelnden Menschen im Meeting. Solche Fotos sagen dem Leser daher nichts. Oft senken sie sogar das Vertrauen, weil der Leser sie schon auf hundert anderen Seiten gesehen hat.

Stattdessen stelle ich bei jedem Bild eine Frage: Welchen Satz im Text stützt es? Geht es um Fertigungskapazität, zeigen Sie Ihre echte Halle. Beim Thema Ablauf wirkt ein einfaches Flussdiagramm besser. Geht es um Ergebnisse, überzeugt ein anonymisierter Berichtsausschnitt mehr. Ein Abschnitt ohne Bild ist besser als einer mit beliebigem Bild.

Außerdem verbinden Sie Bild und Text über den Alternativtext. Guter Alt Text sagt, was das Bild zeigt und warum es dort steht. Achten Sie zudem auf die Dateigröße, denn schwere Bilder bremsen die Seite, bevor der Text erscheint. Mit meinem Tool Bild verkleinern reduzieren Sie Dateien schnell.

Welche Rolle spielt die Markenidentität für Inhalt und Design?

Die Markenidentität ist der gemeinsame Bezugspunkt für Inhalt und Design. Logo, Farben und Schriften sind die Regeln des Designs. Tonalität, Wortwahl und Priorität der Botschaften sind die Regeln des Inhalts. Beschreibt kein gemeinsames Dokument beides, bauen die Teams am Ende zwei verschiedene Marken.

Denken Sie etwa an eine Marke, die technisch, ruhig und verlässlich wirkt. Nutzt das Design kühle Töne und klare Linien, sollte auch der Text auf Superlative verzichten und stattdessen Fakten und Abläufe erklären. Andererseits erstickt eine warme, persönliche Tonalität in einer kalten, formellen Oberfläche.

Mein Rat: Ergänzen Sie Ihr Markenhandbuch um ein Kapitel zum Inhalt. Dort stehen Tonalität, bevorzugte und verbotene Formulierungen, Stil der Überschriften und Muster für Handlungsaufforderungen. Dann folgen neue Designer und Texter denselben Regeln. Wer ein gedrucktes Erscheinungsbild ins Web bringt, findet Hinweise im Beitrag Corporate Design digital umsetzen. Meine Arbeit dazu beschreibe ich unter Markenidentität.

Wie hält Ihr CMS die Abstimmung dauerhaft?

Eine Website, die zum Launch stimmig wirkt, kann nach sechs Monaten auseinanderdriften. Die Lösung: Bilden Sie Ihre Inhaltsvorlagen im CMS ab. Statt eines großen Textfelds legen Sie für jeden Abschnitt der Vorlage ein eigenes Feld an.

Eine Leistungsseite hätte dann etwa Felder für Nutzenversprechen, Vorteile, Prozessschritte und FAQ. Jedes Feld bekommt eine Zeichengrenze und einen kurzen Hilfetext. Folglich können Redakteure die geplante Struktur kaum versehentlich sprengen. Trotzdem empfehle ich weiche Grenzen, die warnen, statt harter Sperren.

Dieser Aufbau hat einen weiteren Vorteil, denn strukturierte Daten lassen sich leichter ausspielen. Liegen die FAQ in einem eigenen Feld, ist das passende Markup schnell ergänzt; mehr dazu im Beitrag über Schema Markup. Zusammengefasst macht ein gut aufgebautes CMS aus einem einmaligen Erfolg eine dauerhafte Gewohnheit.

Wie steuern Sie Textkorrekturen, ohne das Design zu zerstören?

Korrekturschleifen gibt es in jedem Projekt. Entscheidend ist, dass sie das Layout nicht still beschädigen. Deshalb prüfen Sie jede Korrektur auch im Designentwurf, nicht nur in der Textdatei. Ändert der Texter eine Überschrift, sollte er die Komponente sehen, in der sie steht.

Meine Methode ist einfach. Wir kopieren Texte nicht von Hand in die Designdatei, sondern ziehen sie aus einem gemeinsamen Inhaltsdokument. Ändert der Texter dort etwas, aktualisiert der Designer den Entwurf noch am selben Tag. Dann prüfen beide kurz gemeinsam. Damit endet die ewige Frage, welche Fassung gilt.

Zudem rate ich, die Zahl der Korrekturrunden vorab zu begrenzen, zum Beispiel auf zwei Textrunden und eine gemeinsame Designrunde. Endlose Schleifen ermüden beide Seiten und bringen eher Frust als Abstimmung. Legen Sie außerdem schriftlich fest, wer pro Runde das letzte Wort hat. Meist ist das zudem die Marketingleitung.

Wie wirken sich KI Texte auf die Abstimmung aus?

KI Werkzeuge beschleunigen Entwürfe. Allerdings lösen sie das Abstimmungsproblem nicht von selbst. Im Gegenteil, sie bringen ein neues Risiko: Ein Werkzeug, das Ihr Layout nicht kennt, liefert für jeden Abschnitt ähnliche Länge und ähnlichen Ton. Das Ergebnis ist so ordentlich wie Lorem Ipsum und genauso blass.

Nutzen Sie solche Werkzeuge, dann machen Sie die Inhaltsvorlage zum Teil Ihrer Eingabe. Nennen Sie Zweck, Zeichenspanne und Markenton für jeden Abschnitt. Danach muss jemand, der die Firma kennt, den Text überarbeiten. Echte Beispiele, Zahlen und Branchensprache kommen nur von dieser Person.

Beachten Sie auch, dass Googles Leitlinien darauf achten, ob Inhalte Menschen helfen, und weniger darauf, wie sie entstanden sind. Die Frage lautet also nicht, ob Sie KI nutzen. Sie lautet, ob der fertige Text die Frage des Lesers wirklich beantwortet. Somit ist KI ein guter Helfer, ersetzt aber weder Vorlage noch menschliche Redaktion.

Welche Fehler bringen Inhalt und Design aus dem Gleichgewicht?

Die meisten Fehler, die ich über die Jahre gesehen habe, betreffen den Prozess und nicht die Technik. Diese kommen am häufigsten vor:

• Der Kunde gibt das Design frei, und erst danach fragt jemand nach Texten.
• Texte stehen im Projektplan als Aufgabe für die letzte Woche.
• Der Texter hat keinen Zugriff auf die Designdatei.
• Jede Seite entsteht einzeln, ohne gemeinsame Vorlagen.
• Bilder wählt jemand nur nach Optik aus, ohne Bezug zum Text.
• Nach dem Launch fühlt sich niemand für die Inhaltsregeln verantwortlich.

Die meisten dieser Fehler lassen sich schon im Angebot vermeiden. Ein Webdesign Angebot sollte klären, wer Inhalte liefert, wie viele Textkorrekturen enthalten sind und ob Sie Inhaltsvorlagen erhalten. Sonst hält jede Seite die Texte für die Aufgabe der anderen. Weitere Fragen finden Sie in meiner Checkliste zur Beauftragung von UI und UX Design.

Welche Schritte führen zu einer stimmigen Firmenwebsite?

Fassen wir alles in einem kurzen Fahrplan zusammen. Diese Reihenfolge funktioniert für kleine Firmenwebsites ebenso wie für Projekte mit Hunderten Seiten. Nur die Tiefe jedes Schritts ändert sich.

1. Schreiben Sie für jede Seite Ziel und Zielgruppe in einem Satz auf.
2. Erstellen Sie eine Inhaltsinventur und definieren Sie Seitentypen.
3. Legen Sie für jeden Seitentyp eine Inhaltsvorlage an.
4. Zeichnen Sie Wireframes mit echten Überschriften und realistischen Längen.
5. Belasten Sie Komponenten mit Grenzfalltests.
6. Stellen Sie das visuelle Design mit freigegebenen Entwürfen fertig.
7. Übertragen Sie die Vorlagen in CMS Felder.
8. Verbessern Sie nach dem Launch anhand von Daten und Nutzertests.

Dieser Prozess wirkt zunächst länger. Nach meiner Erfahrung verkürzt er die Gesamtzeit aber meist, weil er Korrekturrunden spart. Denn die teuerste Änderung ist, ein bereits programmiertes Design wieder aufzubrechen, weil die Inhalte zu spät kamen. Wenn Sie Ihre Website so aufbauen möchten, folgt mein Webdesign genau diesem Ablauf. Schreiben Sie mir gern über die Kontaktseite.

Schließlich gilt: Die Abstimmung von Inhalt und Design ist nie eine einmalige Aufgabe. Jede neue Seite, jede Kampagne und jedes neue Produkt stärkt sie oder nutzt sie ab. Halten Sie die Regeln schriftlich fest, dann trägt der Prozess die Abstimmung und nicht einzelne Personen.