Mit der Content-Out-Methode planst du zuerst die Inhalte einer Website – erst danach geht es um Design und Technik.
Der Vorteil?
Du umgehst das Risiko von unzureichender, inhaltlicher Qualität und technischen Mängeln. Denn genau das ist oft die Folge der Design-Out-Methode, bei der das Visuelle Vorrang hat.
Die Konzeptionstechnik Content Outline unterstützt dich dabei, schneller und strukturierter Inhalte zu erstellen, die überzeugen.
In diesem Artikel erfährst du, wo du startest und wie du Content und Design zusammenbringst.
Inhaltsverzeichnis
- Was ist ein Content Out(line)?
- Definition von Content Outline
- Ziele und Vorteile vom Content Outline
- Wie erstellt man ein Content Outline?
- Beispiele für Content Outlines
- Welche Rolle spielen SEO und Keywords im Content Outline?
- Storytelling in der Content Outline mit Storyframes
- Henne oder Ei – was kam zuerst?
Was ist ein Content Out(line)?
Alternative Vorgehensweise bei Website-Konzepten
Bei der Methode Content-Out werden im ersten Schritt die Inhalte eines Projektes (wie einer Website, eines Blogs oder einer App) geplant. Erst danach folgen die Disziplinen Design und Technik. Der Content hat somit höchste Priorität und gibt den Ton an.
Im Gegensatz dazu:
die Design-Out-Methode
Hier startest du mit dem Design des Webprojekts und widmest dich inhaltlichen und technischen Aspekten erst später. Der Inhalt muss sich also dem Layout fügen. Schnell entstehen dadurch Mängel bei Inhalt, Informationsarchitektur und Barrierefreiheit.
| Design-Out | Content-Out |
|---|---|
| Design hat Vorrang vor Technik und Inhalt | Inhalt hat Vorrang vor Technik und Design |
| + kreative Freiheit – oft inhaltliche und technische Mängel beim Endergebnis | + Fokus auf gute Inhalte – Kreativität durch Inhalt limitiert |
Definition von Content Outline
So viel zu Content-Out – aber was genau ist jetzt ein Content OutLINE? Den englischen Begriff könnte man mit „inhaltlicher Übersicht“ oder „Inhaltskonzeption“ übersetzen. Gemeint ist ein Dokument mit einem ersten Überblick, Struktur und Strategie der Inhalte. Es wird vor der eigentlichen inhaltlichen Arbeit erstellt.
Ein Content Outline enthält u. a. folgende Elemente:
- Thema (oft nur ein Oberbegriff oder Schlagwort)
- Struktur mit Überschriften bzw. Unterthemen
- Erste Stichworte zu den einzelnen Punkten
- ggf. Keywords für SEO
- ggf. ein Storyframe
Ziele und Vorteile vom Content Outline
Oberstes Ziel von einem Content-Outline ist es, den inhaltlichen Kern, relevante Unterthemen und eine logische Struktur für eine Website bzw. App zu erarbeiten. Damit willst du herausfinden, welche Inhalte auf keinen Fall fehlen dürfen und wie du sie bedienerfreundlich gliedern kannst. Die ideale Grundlage für die Einhaltung von Zielvorgaben und hoher Qualität auf Content-Ebene.
Darüber hinaus bringt die Skizzierung dieses inhaltlichen Konzepts weitere Vorteile:
- Effizienz durch gute Planung – fern von designerischen Grenzen
- Userfreundlichkeit & Barrierefreiheit dank logischer, inhaltlicher Strukturen (s. auch Content Design)
- Agilität, da die Outline als Basis für den Workflow aller Beteiligten von Designteam bis Redaktion dienen kann
- Zeitersparnis durch Vorarbeit z. B. für die Content Creation und SEO
- und damit auch Kostenersparnis
- Gehaltvollere Ergebnisse, da der Inhalt (und nicht das Design) höchste Priorität hat
Wie erstellt man ein Content Outline?
Um eine wirklich aussagekräftige und übersichtliche Content Outline zu erstellen, helfen dir folgende Schritte.
- Zielsetzung festlegen: Was ist das Ziel bzw. die Absicht der Website?
- Zielgruppe identifizieren: Für wen ist die Website gedacht? Und welche Wünsche, Bedürfnisse und Ziele hat diese Gruppe?
- Alleinstellungsmerkmal ausmachen: Welchen Mehrwert soll die Website gegenüber anderen haben? Was ist der Unique Selling Point des Onlineauftritts?
- Hauptseiten definieren: Welche Unterseiten bilden den essentiellen Kern?
- Unterseiten strukturieren: Welche Gliederung, Abschnitte und Unterthemen soll es auf den jeweiligen Webseiten geben?
- Arbeitstitel formulieren und erste Inhalte skizzieren.
- Dabei kann auch SEO und Storyframing ins Spiel kommen.
Beispiele für Content Outlines
Im folgenden zwei (fiktive) Beispiele für Content Outlines bei Websites:
Landingpage für ein Coaching-Angebot
Title and Meta Description
- Title:
„Entdecke Dein Potential: Individuelles Coaching für persönlichen und beruflichen Erfolg“ - Meta Description:
„Steigere Deine Karriere und persönliche Entwicklung mit unserem maßgeschneiderten Coaching-Programm. Erfahre mehr über unsere individuellen Ansätze und Erfolgsgeschichten.“
Inhalte
Überschrift und Einführung
- Überschrift:
Klare und ansprechende Überschrift, die das Coaching-Angebot zusammenfasst, z.B. „Entfalte Dein volles Potential mit unserem individuellen Coaching-Programm“. - Einführung:
Kurzer Absatz, der die Hauptvorteile des Coachings hervorhebt, z.B. persönliche Entwicklung, Karriereförderung. - Key Takeaways:
Verständnis der individuellen Vorteile des Coachings.
Über den Coach
- Bild und Kurzbiografie:
Ein sympathisches Foto des Coaches mit einer kurzen Beschreibung seiner Qualifikationen und Erfahrungen. - Philosophie und Ansatz:
Ein Abschnitt, der die Coaching-Philosophie und den individuellen Ansatz erläutert. - Key Takeaways:
Einblick in die Qualifikation und Philosophie des Coaches. - Bild: Porträt des Coaches.
- Facts and Statistics:
Qualifikationen und Erfahrung des Coaches.
Coaching-Programme
- Programmübersicht:
Eine Liste der angebotenen Programme mit kurzen Beschreibungen. - Details zu jedem Programm:
Detaillierte Informationen zu Inhalten, Dauer und Zielen jedes Programms. - Key Takeaway:
Klare Vorstellung der verschiedenen Coaching-Programme. - Bild:
Infografiken zu den Coaching-Methoden und/oder Fotos von Coaching-Sessions. - Facts and Statistics:
Erfolgsquote der Coaching-Programme.
Testimonials und Erfolgsgeschichten
- Kundenfeedback:
Zitate von früheren Teilnehmern, die die Wirksamkeit des Coachings belegen. - Erfolgsgeschichten:
Kurze Fallstudien oder Erfolgsgeschichten, die zeigen, wie das Coaching anderen geholfen hat. - Key Takeaway:
Inspiration durch Erfolgsgeschichten früherer Teilnehmer. - Bild:
Testimonial-Porträts. - Facts and Statistics:
Statistiken zur Verbesserung der Karriere nach Teilnahme.
Call-to-Action
- Anmeldeformular:
Ein einfaches Formular zur Anmeldung oder Anfrage für ein kostenloses Vorgespräch. - Kontaktinformationen:
Klare Angabe von Kontaktmöglichkeiten für weitere Fragen.
Und das zweite Beispiel:
Startseite einer klassischen Corporate Website
Title and Meta Description
- Title:
„Innovative Lösungen für Ihr Business – [Unternehmensname]“ - Meta Description:
„Entdecken Sie [Unternehmensname], den Experten für [Branchenlösungen]. Erfahren Sie mehr über unsere Dienstleistungen, Projekte und Kundenbewertungen.“
Inhalte
Unternehmensüberblick
- Slogan und Mission:
Ein prägnanter Slogan, der die Mission und Werte des Unternehmens widerspiegelt. - Kurze Unternehmensvorstellung:
Ein Abschnitt, der das Unternehmen, seine Geschichte und seine Kernkompetenzen vorstellt. - Key Takeaway:
Überblick über das Unternehmen und seine Kernkompetenzen. - Bild: Unternehmenslogo und -bilder.
- Facts and Statistics: Unternehmensgeschichte und Meilensteine.
Dienstleistungen oder Produkte
- Übersicht der Angebote:
Klare Auflistung der Hauptdienstleistungen oder -produkte. - Detailinformationen:
Kurze Beschreibungen mit Links zu weiterführenden Seiten für jedes Angebot. - Key Takeaway:
Verständnis der angebotenen Dienstleistungen oder Produkte. - Bild: Bilder der Dienstleistungen oder Produkte.
Fallstudien und Referenzen
- Ausgewählte Projekte:
Kurze Darstellung bedeutender Projekte oder Fallstudien. - Kundenstimmen:
Testimonials zufriedener Kunden, die die Qualität und Zuverlässigkeit des Unternehmens unterstreichen. - Key Takeaway:
Einblick in erfolgreiche Projekte und Kundenfeedback. - Bild: Fotos von realisierten Projekten.
- Facts and Statistics: Statistiken zu Kundenzufriedenheit und Projekterfolgen.
News und Insights
- Aktuelle Nachrichten:
Kurze Infos zu aktuellen Entwicklungen, Events oder Veröffentlichungen. - Blog-Beiträge:
Auszüge aus den neuesten Blog-Beiträgen mit Links zu vollständigen Artikeln. - Key Takeaway:
Aktuelle Informationen und Expertenmeinungen. - Bild: Kunden-Testimonial-Bilder.
- Facts and Statistics: Zahlen und Fakten, die die Branchenkompetenz unterstreichen.
Kontakt und Call-to-Action
- Kontaktinformationen:
Klare und sichtbare Angabe von Kontaktmöglichkeiten. - Anfrageformular:
Ein einfaches Formular für Anfragen oder zur Kontaktaufnahme. - Newsletter-Anmeldung:
Option zur Anmeldung für Unternehmens-Updates oder Newsletter. - Key Takeaway:
Einfache und direkte Kontaktmöglichkeiten.
Welche Rolle spielen SEO und Keywords im Content Outline?
Für die Auffindbarkeit bei Suchmaschinen spielen Keywords immer noch eine große Rolle. Daher ist es ratsam eine erste Keyword-Analyse bereits in den Content-Outline-Prozess zu integrieren.
Dafür recherchierst du Suchbegriffe die sowohl relevant sind als auch Suchvolumen haben.
Tipp:
Für die Recherche solltest du ein Keyword-Tool nutzen z. B. den Keywordplaner von Google Ads, Ubersuggest von Neil Patel oder KWfinder von Mangools.
Im Idealfall erarbeitest du so eine gut gefüllte Liste mit Schlagwörtern und Phrasen die das gesamte Thema der Website mit all seinen Aspekten abdecken.
Denn was bei Google und Co. gesucht wird, bildet relevante Unterthemen und mögliche Fragestellungen der Zielgruppe zu dem Thema ab. Damit ist die Liste eine tolle Unterstützung bei der Festlegung von Unterthemen.
Storytelling in der Content Outline mit Storyframes
So wie das Wireframe ein Template für das Design liefert, erstellt das Storyframe eine Vorlage für die Texterstellung. Denn Storyframing konzentriert sich auf die Entwicklung von Inhalten und Geschichten als Grundlage für das Design, noch bevor die eigentliche visuelle Gestaltung beginnt.
Storyframes sind ein innovatives Werkzeug im Designprozess, das besonders nützlich für die Gestaltung von Webseiten wie Landing Pages, Homepages oder langen, scrollbaren Seiten ist. Diese Seiten haben oft das Ziel, eine einheitliche, zusammenhängende Geschichte zu erzählen.
Der Begriff „Storyframe“ ist eine Mischung aus Storytelling und Wireframe. Statt direkt mit dem Zeichnen von Wireframes oder dem Gestalten von Layouts zu beginnen, startest Du den Designprozess in einem Texteditor. Die Idee ist, dass Du die Struktur und den Inhalt einer Webseite zunächst wie ein Drehbuch oder eine Geschichte schreibst.
Ziel von Storyframes ist es, die (wiederholte) Nutzung und Interaktion des Users mit der Website zu pushen. Es werden unterschiedliche Techniken wie z. B. das Konzept der User Story oder die Customer Journey genutzt, um Ziele und Bedürfnisse potentieller Website-Besucher zu verstehen und darauf einzugehen.
Dabei liegt der Fokus jedoch nicht nur auf dem User. Unter der Frage „Was wollen wir, was der Nutzer tun soll?“ wird die Schnittmenge zwischen den Zielen des Website-Betreibers und den Zielen der Website-Besucher erarbeitet.
Die Grundlage: Texteditoren als Werkzeug
Die Einfachheit von Texteditoren wie Google Docs, Microsoft Word oder Apple TextEdit macht sie zu idealen Werkzeugen für diese Aufgabe.
In einem Texteditor kannst Du Dich auf das Wesentliche konzentrieren, ohne von visuellen Elementen abgelenkt zu werden. Dieser Ansatz hilft Dir, die Kernbotschaft und die Struktur der Webseite klar zu definieren, bevor Du Dich mit Designfragen beschäftigst.
Schritt-für-Schritt-Anleitung zur Erstellung eines Storyframes
- Brainstorming und Erstentwurf:
Beginne mit einem Brainstorming und schreibe alles auf, was Du über das Produkt oder Thema sagen möchtest. Jeder Absatz repräsentiert ein Modul der Webseite, jeder Satz ein Element, das später in das Design integriert wird. Stelle Dir vor, wie Du das Thema einem Freund in einem Gespräch oder einer E-Mail erklären würdest. - Kürzen und Fokussieren:
Als nächstes kürzt Du die Geschichte. Hierbei entfernst Du unnötige Informationen und konzentrierst Dich auf das, was die Nutzer wirklich über das Produkt oder die Dienstleistung wissen müssen. Bedenke dabei den Kontext und das Vorwissen der Nutzer. - Experimentieren mit verschiedenen Geschichten:
Erstelle verschiedene Versionen Deiner Geschichte, indem Du die Reihenfolge der Absätze und Sätze veränderst. So kannst Du verschiedene Erzählstrukturen ausprobieren und herausfinden, welche am natürlichsten und ansprechendsten wirkt. - Feedback einholen:
Zeige Deine Storyframes verschiedenen Teams, um Feedback zu erhalten. Stelle sicher, dass ihnen klar ist, dass es sich um vorläufige Inhalte handelt, die die Struktur der Seite veranschaulichen.
Vorteile der Storyframe-Technik
- Zeitersparnis:
Durch die frühzeitige Festlegung von Strategie, Fluss und Narrativ sparst Du später im Designprozess Zeit. - Stakeholder-Alignment:
Indem Du die Geschichte frühzeitig festlegst und abgleichst, stellst Du sicher, dass alle Beteiligten auf das gleiche Ziel hinarbeiten. - Klare Botschaft:
Ein gut geschriebener Storyframe hilft, die Kernbotschaft der Webseite klar und deutlich zu vermitteln.
Diese Schritte helfen, die Benutzererfahrung durch sorgfältig konstruierte Geschichten, die Verhaltensziele ansprechen und die Benutzerinteraktion mit Produkten oder Dienstleistungen verbessern, effektiv zu gestalten.
Storyframes sind ein effektives Werkzeug im Designprozess, das hilft, die Geschichte hinter einer Webseite klar zu definieren, bevor Du Dich mit visuellen Aspekten beschäftigst.
Diese Methode spart nicht nur Zeit, sondern sorgt auch dafür, dass die endgültige Webseite eine klare und ansprechende Botschaft vermittelt. Durch den Fokus auf die Erzählung und den Inhalt, bevor Du Dich mit Designfragen beschäftigst, stellst Du sicher, dass Deine Webseite nicht nur optisch ansprechend, sondern auch inhaltlich überzeugend ist.
Du willst mehr über Content und Contenterstellung wissen?
Dann solltest du die folgenden Artikel ebenfalls lesen:
Visual Content – Wie du mit visuellen Inhalten Aufmerksamkeit generierst
Content Creation – Das musst du bei der Inhaltserstellung beachten
Content Design – Nutzerbedürfnisse & Unternehmensziele vereinen
Content vs. Design – Was nun „first“?
Informationsarchitektur: So strukturierst du die Inhalte deiner Website
Henne oder Ei – was kam zuerst?
…ich weiß es nicht, aber sicher ist: Inhalt zuerst lohnt sich!
Denn der Ansatz des Content Outline sichert die Einhaltung inhaltlicher Ziele, verbessert die Qualität auf Content-Ebene und erhöht die Effektivität des gesamten Prozess. Denn die Content Outline ist nicht nur Orientierungshilfe für die Redaktion, sondern auch Fundament für das spätere Wireframing und Prototyping.
Und die wichtigsten Fragen zum Thema Content Outline noch einmal zusammengefasst:
1. Was ist ein Content Outline?
Ein Content Outline ist ein Dokument, das als inhaltliche Übersicht oder Inhaltskonzeption dient. Es bietet einen ersten Überblick, Struktur und Strategie der Inhalte für Webprojekte wie Websites, Blogs oder Apps und wird vor der eigentlichen inhaltlichen Arbeit erstellt.
2. Warum sollte man mit einem Content Outline starten?
Der Start mit einem Content Outline hilft, die inhaltliche Qualität und technische Umsetzung eines Webprojekts zu sichern. Es stellt sicher, dass der Inhalt im Vordergrund steht und nicht durch Designentscheidungen beeinträchtigt wird.
3. Was sind die Unterschiede zwischen der Content-Out- und der Design-Out-Methode?
Bei der Content-Out-Methode hat der Inhalt Vorrang vor Design und Technik, wodurch ein Fokus auf gute Inhalte gelegt wird. Die Design-Out-Methode beginnt hingegen mit dem Design, wodurch der Inhalt oft an das Layout angepasst werden muss, was zu Mängeln führen kann.
4. Welche Elemente enthält ein Content Outline?
Ein Content Outline enthält das Thema, eine Struktur mit Überschriften/Unterthemen, erste Stichworte zu den einzelnen Punkten, ggf. Keywords für SEO und manchmal einen Storyframe.
5. Welche Vorteile bietet ein Content Outline?
Ein Content Outline bringt Effizienz in die Planung, verbessert die Userfreundlichkeit und Barrierefreiheit, ermöglicht Agilität im Workflow, spart Zeit und Kosten und sorgt für gehaltvollere Ergebnisse, da der Inhalt Priorität hat.
6. Wie erstellt man ein Content Outline?
Ein Content Outline erstellst Du durch Festlegung von Zielsetzung und Zielgruppe, Identifizierung des Alleinstellungsmerkmals, Definition von Haupt- und Unterseiten, Formulierung von Arbeitstiteln und ersten Inhalten. SEO und Storyframing können hierbei eine Rolle spielen.
7. Wie beeinflussen SEO und Keywords das Content Outline?
SEO und Keywords sind wichtig für die Auffindbarkeit in Suchmaschinen. Eine Keyword-Analyse hilft, relevante Themen und Unterthemen zu identifizieren, die die Zielgruppe interessieren könnten, und unterstützt damit die inhaltliche Gestaltung.
8. Was sind Storyframes und wie werden sie im Content Outline verwendet?
Storyframes sind wie Drehbücher für Webseiten, die die Struktur und den Inhalt vor dem eigentlichen Designprozess definieren. Sie konzentrieren sich auf die Erzählung und unterstützen die Erstellung von Inhalten, die die Benutzerinteraktion verbessern.
9. Welche Schritte sind bei der Erstellung eines Storyframes wichtig?
Bei der Erstellung eines Storyframes sind Brainstorming und Erstentwurf, das Kürzen und Fokussieren der Inhalte, das Experimentieren mit verschiedenen Geschichten und das Einholen von Feedback wesentlich.
10. Warum ist es vorteilhaft, mit dem Content zu beginnen, anstatt mit dem Design?
Das Beginnen mit dem Content stellt sicher, dass die Inhalte nicht durch das Design eingeschränkt werden. Dies führt zu einer besseren inhaltlichen Qualität, erhöhter Effektivität des Designprozesses und unterstützt die Einhaltung von Content-Zielen.
