Design-Richtlinien der VBB Webseite

Das neue Webseiten-Layout folgt einem klaren gestalterischen Aufbau. Damit alle Seiten ein einheitliches Erscheinungsbild erhalten, sollten die vorgesehenen Gestaltungselemente gezielt und sparsam eingesetzt werden. Die folgenden Hinweise helfen dabei, Inhalte im TYPO3 Backend korrekt und im Sinne des Layouts zu pflegen.

Design der VBB Webseite als PDF

Verwendung von Hintergundfarben und Farbflächen

Um einzelne Informationen auf einer Seite hervorzuheben können in den einzelnen Inhalts- oder Containerelementen unterschiedliche Farbflächen eingestellt werden. Zur Verwendung sollte Folgendes beachtet werden:

 

  • Eine Hintergrundfarbe über die gesamte Browserbreite (Einstellbar in Container-/Spaltenelementen) oder als Kästen sollte nicht sofort im ersten Textabschnitt der Seite verwendet werden. Die Klarheit der Gesamtseite bzw. des gesamtlayout wird durch weiße Flächen und dezent eingesetzte Hintergründe erreicht. Durch den Einsatz von Hintergrundfarben direkt im ersten Inhaltsbereich der Seite kollidieren die Farben mit dem oberen Navigations- und Bannerbereich.
  • Hintergrundfarben ab dem zweiten Inhaltsbereich einer Seite verwenden, um den ersten Inhaltsabschnitt klar vom vorherigen abzugrenzen, auch wenn diese Thematisch zusammenpassen. Das lockert den Lesefluss deutlich auf.
  • Farbflächen sollten nicht mehrmals hintereinander folgen. Zwischen jeder Farbfläche sollte ein weißer Bereich stehen.
  • Die Farbe hellblau ist dezenter und mit der übrigen Farbwahl der Seite abgestimmt. Das helle gelb als Hintergrundfarbe sollte sehr sparsam eingesetzt werden, da sich diese Farbe bewusst nicht mit der übrigen Farbgebung harmoniert. 

 

Einleitungstext für
jede Seite

Im Designentwurf ist geplant, dass jede Seite idealerweise einen Einleitungstext hat. Dieser Text beschreibt kurz, in maximal 2 Absätzen, den Inhalt oder das Thema der Seite. Dieser Text kann idealerweise auch werbewirksam formuliert werden und enthält eventuell eine indirekte Aufforderung etwas zutun. 

Der Einleitungstext einer Seite wird in einem schmalen, 1spaltigen Container platziert und stets zentriert und hervorgehoben formatiert ausgegeben. Zur Formatierung steht im Texteditor ein eigener Stil “Text hervorgehoben” zur Verfügung.

Einsatz unterschiedlicher Spalten

Das Designkonzept beinhaltet ein Grundprinzip für die Darstellung von Inhalten in Spalten. Die für die Redakteure zur Verfügung gestellten Inhaltselemente sind sehr flexibel und bieten einen großen gestalterischen Freiraum. Dieser Freiraum sollte stets im Sinne des Designkonzeptes verwendet werden. 

Damit ein einheitliches Darstellungsbild für die gesamte Seit entsteht, sollten Spaltenaufteilungen möglichst gleich platziert werden. Die Spaltenaufteilungen können auch thematisch eingesetzt werden