Farben

Überblick Visual Style Guide

Zur eindeutigen Abgrenzung von Bereichen und für ein angenehmes Bedienerlebnis wird das Stud.IP-Design in mehren Ebenen organisiert, die sich in einem gedachten dreidimensionalen Raum orientieren. Dieser Raum wird durch folgende Annahmen definiert:

  • Sämtliche Elemente werden vor einem Hintergrund arrangiert. Dieser Hintergrund setzt sich von allen weiteren Elementen durch einen entsprechenden Kontrast ab.
  • Jede Seite besteht aus dem Header, dem Inhaltsbereich (einem gedachten "Blatt") und ggf. einem Footer. Alle diese Elemente "schweben" vor dem Hintergrund
  • Der Inhaltsbereich besteht aus genau einem Blatt, das die eigentlichen Inhalte aufnimmt.

Das Blatt als zentrales Element für allen Stud.IP-Content gestaltet sich dabei wie folgt:

  • Ein Blatt "schwebt" frei vor dem Hintergrund der Seite. Dazu hat es zu allen Seiten einen gewissen Abstand gegenüber der Kopfzeile und dem Rand der gesamten Webseite.
  • Jedes Blatt stellt einen "Scope" dar, also eine oder mehrere Funktionen, die logisch zusammengefasst werden. Besitzt ein Blatt mehrere Funktionen, werden diese als Reitersystem nebeneinander dargestellt. Besitzt ein Blatt nur eine Funktion, wird diese als Kopfzeile in Form eines einzigen Reiters dargestellt, der sich über die gesamte Seitenbreite erstreckt.
  • Ein Blatt sollte immer eine Infobox erhalten. Dadurch ergibt sich auch gewisse Minimalhöhe, sollten keine Inhalte enthalten sein.
  • Der Inhalt der Seite kann in so genannte "Kapitel" gegliedert werden, die verschiedene Bereiche gegeneinander abgrenzen.

richtig:

falsch:

Falls Standorte Eingenanpassungen vornehmen (etwa um Stud.IP an ein vorhandenes Corporate Design anzupassen), sollten folgende Punkte berücksichtigt werden:

  • Der Kontrast zwischen den Blättern und dem Hintergrund muss erhalten bleiben. Sollte ein weißer Hintergrund gewählt werden, sollten die Blätter einen Rand erhalten, damit der Kontrast erhalten bleibt.

Letzte Änderung am April 02, 2011, at 01:30 PM von tthelen.