Infoseite mit Marginale

Die Infoseite mit Marginale ist dafür geeignet große Textmengen zu strukturieren. Darum ist sie eine der meist benötigten Formate. Im folgenden stellen wir die Möglichkeiten einmal vor.

Spaltensystematik

Die Seitenelemente in den Templates folgen einem Spaltenraster. Dieses umfasst 12 Spalten, die unterschiedlich genutzt werden.

12 Spalten

Wichtiger Hinweis
Ein Fließtext sollte nie mehr als 8 Spalten breit sein, da sonst die Lesbarkeit stark beeinträchtigt wird.

Spalten 12

Es gibt unterschiedliche Elemente:

4 : 4 : 4 Elemente

Spalten 4-4-4

8 : 4 Elemente

Spalten 8-4

6 : 6 Elemente

Spalten 6-6

Marginale

Sie schafft Luft für weiterführende Informationen wie:

Hinweis
Die Marginale ist keine Textspalte für Inhalte, sondern ein Freiraum für Herausstellungen.

Ansprechpartner
Marginale Ansprechpartner
Downloads
Marginale Download
Info
Marginale Info
Hinweis
Marginale Hinweis
Icons

Um Zusatzinformationen stärker zu betonen, können thematisch passende Icons verwendet werden. Diese stehen über der Information und sind in der Größe durch die CSS-Vorgaben definiert.

Marginalspalte mit Icons

Headlines

Es gibt eine Hierachie von Headlinegrößen mit denen der Text gegliedert wird.

H1 Kapitel

Wird zum Einstieg eines Artikels benutzt. Darüber hinaus nur bei langen Texten

H2 Unterkapitel

Gliedert das Kapitel in inhaltliche Einheiten

H4 Abschnitt

Gliedert das Unterkapitel in inhaltliche Segmente

H5 Textgliederung

Gliedert einen umfassenden Abschnitt

H3 Ausnahme

Möglicher Einsatz für Sonderinformationen, wie Headlines bei blau unterlegten Zusatzinformationen.

Hinweis
Stimmen Sie sich in einer Konferenz mit allen Redakteuren ab, ob sie dem Schema folgen. Wichtig ist, das ein Prinzip durchgängig umgesetzt wird.

Einführungstexte

Sie sollen dem Leser helfen einen Überblick zur Relevanz eines Inhalts zu bekommen.

Hinweis
Einführungstexte sollten nicht länger als 3 – 4 Zeilen sein.

Headlines

Abstände der Template-Elemente

Die Template-Elemente sind mit definierten Abständen nach unten versehen. Sie helfen inhaltliche Bereiche erkennbar zu machen.

Hinweis
Es kann im Einzelfall sinnvoll sein diese manuell zu korrigieren, um Zusammenhänge herzustellen oder Bereiche voneinander zu trennen.

Abstände

Farbigkeit

Die Farbigkeit von einzelnen Textelementen dient der Unterstützung der Headlinestruktur und dem Verweis auf weiterführende Informationen.

Schema des Farbklangs einer Informationsseite

Weiß

ist die Farbe des Untergrunds und bietet einen hohen Kontrastwert zur schwarzen Schrift.

Weißraum dient der Entzerrung langer Inhaltstexte. Dieser wird z. B. als Abstand am Ende eines Layoutelementes automatisch eingefügt um „Luft zu schaffen“.

Schwarz

Einheitlich schwarzer Fließtext dominiert die Inhaltsbereiche.

Grau

ist die Farbe der Einführungstexte.

Blau

ist vor allem den Headlines vorbehalten. Die Hervorhebung dient der Unterstützung der Hauptorientierung.

Hinweis
Ist ein Text mit sehr vielen Links und Downloads versehen, sollten diese in die Marginalspalte wandern, um den Headlines keine Konkurrenz zu machen.

Farbklang Grün

Sonderfall: Hinterlegung

Eine ergänzende Information in einem langen Text kann mit einer blauen Unterlegung abgegrenzt werden.

Hinweis
Die blaue Unterlegung ist für die inhaltliche Ausnahme reserviert. Sie dient nicht als fortlaufende Markierung (Zebrastreifen) für wechselnde Unterkapitel oder Abschnitte.

Farbklang Fläche

Umgang mit den Bereichsfarben Grün oder Orange

Die Auszeichnungsfarben können vereinzelt eingesetzt werden um Akzente zu setzen: zum Beispiel als Headline zum Kapiteleinstieg. Bereichfarben werden innerhalb einer Seite nicht gemischt.

Die Zugehörigkeit des Inhalts zu einem Bereich wird betont.

Auch die Elemente in der Marginalspalte können in einer Bereichsfarbe dargestellt werden.

Bei Verwendung der Bereichsfarbe trennt sich die Marginale mit den Hinweisen gut vom Textfluss und den Headlines im Fließtext. Es entsteht keine Konkurrenz.

Hinweis
Auch hier kann es sinnvoll sein unter den Redakteuren eine Vereinbarung zu treffen, wie man grundsätzlich verfahren will, um eine Einheitlichkeit zu erzielen.

Farbklang Bereichsfarbe

Bildformate

Die Proportion eines Bildes ist abhängig von der Anzahl der Spalten über die das Bild läuft.

Allgemein gilt: je kleiner das Bild wird, desto quadratischer wird das Format des Bildes.



Bildproportion
Bildformate

Gesamtbild

Der Einsatz von Bildern mit den selben Proportionen im gleichen Spalteneinsatz erzeugt ein ruhiges, gleichmäßiges Gesamtbild, da die Bilder die gleiche Höhe haben.

Beispiellayouts

Bildformate Beispiele

Don’ts – so bitte nicht!

Die folgenden Beispiele sollten vermieden werden

Alles 1-spaltig (über 12 Spalten)
Text schwer lesbar. Kurze Zeilen sind für das Auge schneller zu erfassen.

Don'ts alles 1-spaltig

Falscher Einsatz der blauen Fläche
Keinen „Zebrastreifen“ erzeugen

Don'ts Streifen

Zu viel Text in der Marginale
Zu große Konkurrenz zum Haupterzählstrang in der großen Spalte

Don'ts zu viel in der Marginale

Bilder mit unterschiedlichen Proportionen nebeneinander
Layout zu unruhig

don'ts Bilder unterschiedlich