Dynamische Inhalte / Beiträge

Intro & Leitfaden

Bevor die Inhaltsmodule angelegt werden, wird mit den Struktur-Modulen der Rahmen festgelegt. Ein konsistentes Layout bildet das Fundament für Vertrauen.

Die 3 goldenen Regeln:

• Hierarchie wahren: Beginne jede neue Seite zwingend mit dem Global Header und schließe sie (nach den Inhaltsmodulen) immer mit dem Footer ab. Das gibt dem Nutzer Sicherheit.
• Mut zur Lücke (Whitespace): Nutze die Abstandshalter großzügig. Inhalte wirken hochwertiger, wenn sie nicht aneinanderkleben. Ein Standard-Abstand zwischen zwei großen Themenblöcken hilft dem Auge, Informationen zu trennen.
• Orientierung bieten: Bei sehr langen Seiten (z. B. ausführlichen Ratgebern oder Sortimentslisten) ist das Anker-Menü Pflicht. Es dient als Inhaltsverzeichnis und verhindert, dass Nutzer die Lust am Scrollen verlieren.

Header

Dieses Modul ist das erste inhaltliche Element jeder Unterseite. Es begrüßt den Nutzer, setzt das Thema und liefert die wichtigste Headline (H1).

Wofür wird es gebraucht?

• Themensetzung: Sofortige Klarheit, worum es auf dieser Seite geht.
• SEO: Platzierung der Hauptüberschrift (H1).
• Atmosphäre: Visuelle Untermalung durch Bild- oder Farbelemente.

Die Ausprägungen

Typ 1: Mit Bild (Visueller Einstieg)

Das Bild ist das emotionale Herzstück der Seite. Es nimmt die volle Breite ein, um maximale Wirkung zu erzielen und den Nutzer visuell in die Themenwelt von Libri eintauchen zu lassen.

Variante 1A: Headline & Copy nebeneinander
Variante 1B: Headline & Copy untereinander

Typ 2: Ohne Bild (Informativer & Strukturierter Einstieg)

Dieser Typ wird gewählt, wenn Fakten und Inhalte im Vordergrund stehen oder bewusst ein puristisches Design gewünscht ist. Hier schafft die Typografie die nötige Präsenz und Ordnung.

Variante 2A: Headline & Copy nebeneinander
Variante 2B: Headline & Copy untereinander

Typ 3: Header mit Fokus auf Interaktion / Conversion und Rechtliches

Wir diese Art von Inhaltsseiten wird der Header “Ohne Bild” eingesetzt, mit der Unterscheidung das die Hintergrundfarbe des Headers der Contentfarbe entspricht. Somit wird automatisch der Fokus auf den nachfolgenden Inhalt gelegt.

Abstand

Abstandshalter sorgen für die nötige Struktur und „Luft zum Atmen“ zwischen den einzelnen Inhaltsblöcken. Sie verhindern, dass die Seite überladen wirkt, und helfen dem Auge, Themenbereiche voneinander zu trennen.

Wofür wird es gebraucht?

• Visuelle Hierarchie: Größere Abstände signalisieren den Beginn eines neuen Hauptthemas, kleinere Abstände gruppieren zusammengehörige Informationen.
• Lesbarkeit: Ausreichend Whitespace (Leerraum) erhöht die Konzentration auf den eigentlichen Inhalt.
• Sauberes Markenbild: Konsistente Abstände sorgen für ein professionelles und ruhiges Erscheinungsbild der gesamten Libri-Website.

Verhalten auf Desktop & Mobile

• Desktop: Die Menüpunkte werden nebeneinander in einer dezenten horizontalen Leiste angezeigt.
• Mobil: Um wertvollen Platz in der Höhe zu sparen, wird das Menü auf Smartphones als horizontal scrollbare Liste dargestellt. Der Nutzer kann die Punkte einfach mit dem Finger von rechts nach links wischen („Swipen“).

Zurück zur Übersicht

Dieses Modul dient der einfachen Rückführung des Nutzers zur übergeordneten Kategorie. Es verhindert Sackgassen in der Nutzerführung und stärkt die intuitive Bedienbarkeit der Website.

Wofür wird es gebraucht?

• Einfache Navigation: Ermöglicht den Rücksprung (z. B. von einer Detailseite zurück zur Übersichts-/Gabelseite), ohne den „Back“-Button des Browsers nutzen zu müssen.
• Kontext-Erhalt: Der Nutzer bleibt im selben Themenbereich der Libri-Website.
• Minimalismus: Ein dezentes Element, das keinen wertvollen Platz für den Hauptinhalt beansprucht.

Nächste Seite “Hero & visuelle Einstiege“

Zur Modulübersicht