Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

»Content Out« – Websites ausgehend von den Inhalten planen

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.

Beispiel einer Content Outline mit anschließender Überführung in stilisierte Design-Pattern

»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

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:

  1. Zielgruppe identifizieren: Überlegt, wer eure Website besuchen wird. Handelt es sich um Kunstliebhaber, Schulklassen oder Touristen? Welche Informationen suchen sie auf eurer Website?
  2. Hauptseiten definieren: Bestimmt, welche Hauptseiten eure Website besitzen sollte, zum Beispiel: Startseite, Ausstellungen, Veranstaltungen, Sammlungen, Über das Museum, Kontakt.
  3. 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.
  4. 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

  1. Startseite
    • Begrüßung und Museumseinführung
    • Direkt-Links zu aktuellen Ausstellungen und Veranstaltungen
    • Öffnungszeiten und Eintrittspreise
  2. Ausstellungen
    • Aktuelle Ausstellung mit Bildern und Beschreibungen
    • Archiv vergangener Ausstellungen
    • Informationen zur geplanten Ausstellung
  3. Veranstaltungen
    • Liste der kommenden Veranstaltungen und Workshops
    • Anmeldungs- und Ticketinformationen
  4. Sammlungen
    • Überblick über die Museumssammlungen
    • Highlight-Objekte und ihre Geschichte
    • Informationen zur Sammlungsverwaltung und -pflege
  5. Über das Museum
    • Geschichte des Museums
    • Unsere Mission und Werte
  6. 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

Benutzerbild

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.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Anspruchsvolle Projekte mit kulturbanause

Wir lieben es gewachsene Strukturen aufzuräumen und perfekt im Content Management abzubilden. Strukturell komplexe Projekte realisieren wir regelmäßig und sehr gerne.

Konzeptionelles Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →