»Content Out« – Websites ausgehend von den Inhalten planen
Von Jonas Beim »Content Out«-Ansatz plant ihr die inhaltliche Struktur einer Website mit Hilfe einer sog. Content-Outline. Das beschleunigt den Workflow und hilft dabei gut strukturierte, inhaltlich überzeugende und erfolgreiche Projekte zu realisieren.
Was ist Content Out?
Im Kontext der Website-Konzeption ist »Content Out« eine Methode, bei der die Inhalte geplant werden, bevor das Design oder die technischen Aspekte einer Website berücksichtigt werden. Diese Methode betont die Bedeutung von qualitativ hochwertigem und relevantem Inhalt und setzt ihn an die erste Stelle. Erst wenn der inhaltliche Aufbau – unabhängig von einem bestimmten Gerätetyp – festgelegt ist, wird mit dem Layout begonnen. Die strukturierten Inhalte werden dann mit mit geeigneten Design-Pattern bestmöglich auf allen Geräten zu präsentiert.
»Content Out« ist ein Gegenentwurf zum Ansatz »Design Out«, bei dem die visuellen Präsentation zuerst festgelegt wird und der Inhalt erst später erzeugt wird, um ins Design zu passen. Dies ermöglicht zwar früh eine kreative Gestaltung, führt allerdings häufig dazu, dass Projekte inhaltlich nicht überzeugen oder sogar Fehler hinsichtlich SEO, Barrierefreiheit oder Informationsarchitektur enthalten sind. Es besteht die Gefahr, dass die für den Erfolg wichtigen – nicht sichtbaren – Aspekte einer Website vernachlässigt werden, weil das visuelle Design zu sehr im Vordergrund steht.
Content-Outlines
Eine Content-Outline hilft euch dabei, Inhalte zu planen und sicherzustellen, dass die Website logisch aufgebaut und gut strukturiert ist. Die Outline beschreibt in Textform, welche Seiten und Abschnitte die Website haben wird und welche Informationen auf jeder Seite enthalten sein sollen. So kann mit geringem Aufwand sichergestellt werden, dass die geplanten User Stories durchlaufen werden und somit die inhaltlichen Wünsche der Zielgruppe erfüllt werden.
Gründe, mit einer Content-Outline zu arbeiten
- Struktur: Die Outline gibt eine klare Struktur für eure Website vor, was es Personen, die die Seite besuchen leichter macht, sich zurechtzufinden. Durch die lineare Struktur, werden die Inhalte automatisch mobile First geplant.
- Effizienz: Die Outline spart Zeit, weil die Inhalte geplant werden können, ohne dass ihr durch visuelle Überlegungen ausgebremst werdet. Darüber hinaus sind keine Kenntnisse in Design-Tools notwendig.
- Suchmaschinenoptimierung (SEO): Eine gut durchdachte Content-Outline hilft auch dabei, eine Website für Suchmaschinen zu optimieren. Relevante Keywords, Themen und Strukturelemente können früh mitgedacht werden.
- Barrierefreiheit: Wichtige Qualitätskriterien für barrierefreie Website sind logische Strukturen und klar abgegrenzte inhaltliche Bereiche (sog. Landmarks). Die Outline legt genau diese Struktur fest.
- Agiler Workflow: Sobald der inhaltliche Aufbau festgelegt wurde, können Design, Redaktion und Entwicklung parallel arbeiten: Designer layouten die Struktur, die Redaktion schreibt Inhalte und in der Entwicklung wird der HTML-Grundaufbau oder bereits die CMS-Struktur festgelegt. Die Gewerke müssen nicht aufeinander warten.
Als nachteilig wird häufig die abstrakte Anmutung empfunden: Eine Content-Outline ist naturgemäß textlastig, was dazu führt, dass es Kunden und Personen in Agenturen i.d.R. schwerer fällt, sich damit zu beschäftigen. Zu gerne würden man »direkt etwas sehen«. Hilfreich ist ein Style Tile in Ergänzung zur Outline.
Content-Outlines erstellen
Die folgenden Schritte helfen dabei, eine Content-Outline zu erstellen. Als Beispiel verwenden wir die Website eines Museums:
- Zielgruppe identifizieren: Überlegt, wer eure Website besuchen wird. Handelt es sich um Kunstliebhaber, Schulklassen oder Touristen? Welche Informationen suchen sie auf eurer Website?
- Hauptseiten definieren: Bestimmt, welche Hauptseiten eure Website besitzen sollte, zum Beispiel: Startseite, Ausstellungen, Veranstaltungen, Sammlungen, Über das Museum, Kontakt.
- Unterseiten festlegen: Für jede Hauptseite legt ihr fest, welche Unterseiten oder Abschnitte es geben soll. Unter »Ausstellungen« könnten Unterseiten wie »Aktuelle Ausstellung« und »Vergangene Ausstellungen« erstellt werden.
- Inhalte skizzieren: Überlegt, welche Informationen auf jeder einzelnen Seite stehen sollen. Auf der »Über das Museum«-Seite könnten Informationen zur Geschichte des Museums und zum Bildungsauftrag stehen.
Beispiel: Content-Outline für die Website eines Museums
- Startseite
- Begrüßung und Museumseinführung
- Direkt-Links zu aktuellen Ausstellungen und Veranstaltungen
- Öffnungszeiten und Eintrittspreise
- Ausstellungen
- Aktuelle Ausstellung mit Bildern und Beschreibungen
- Archiv vergangener Ausstellungen
- Informationen zur geplanten Ausstellung
- Veranstaltungen
- Liste der kommenden Veranstaltungen und Workshops
- Anmeldungs- und Ticketinformationen
- Sammlungen
- Überblick über die Museumssammlungen
- Highlight-Objekte und ihre Geschichte
- Informationen zur Sammlungsverwaltung und -pflege
- Über das Museum
- Geschichte des Museums
- Unsere Mission und Werte
- Kontakt
- Kontaktformular
- Standort und Anfahrtsbeschreibung
- Soziale Medien und Telefonnummer
Die optimale Grundlage für Content und Design
Die Content-Outline dient Orientierungshilfe für die Text- und Bild-Redaktion. Sie hilft dabei, die Inhalte effektiv zu erstellen und sicherzustellen, dass sie den festgelegten Zielen der Website entsprechen.
Die Outline dient auch als Grundlage für das Wireframing und Prototyping. Hierbei werden grobe Skizzen oder grobe Prototypen erstellt, um die Platzierung von Inhalten, die Navigation und die allgemeine Struktur der Website zu visualisieren. Dies hilft, das Layout und die Benutzerfreundlichkeit zu planen, bevor das eigentliche visuelle Design entwickelt wird.
Basierend auf den Wireframes beginnt dann die visuelle Gestaltung der Website in Form konkreter Layouts oder High Fidelity Prototypen. Dies umfasst die Wahl von Farbschemata, Schriftarten, Bildern und anderen visuellen Elementen, die das Erscheinungsbild der Website bestimmen.
Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
