Seitenlayout

Überblick Visual Style Guide

Seitenaufbau

Jede Seite von Stud.IP ist auf gleiche Art und Weise aufgebaut und enthält folgende Elemente:

  1. Kopfzeile: Einleitende Zeile, die eine systemweite Suche beinhaltet. Wird die Hauptnavigation durch Scrollen aus dem Sichtbereich verschoben, wird diese in kompakter Form in der Kopfzeile aufgenommen. Die Kopfzeile kann vom Betreiber erweitert werden.
  2. Hauptnavigation: Sie leitet jede Seite ein und ist das feststehende Navigationselement, das die Systembereiche miteinander verbindet. Die Zusammenstellung der Kopfzeile hängt von den globalen Rechten des Benutzers ab. Die Kopfzeile repräsentiert die 1. Navigationsebene.
  3. Scopes: Scopes verbinden bestimmte Funktionen eines Hauptbereiches, etwa dem Nachrichtensystem oder alle Funktionen innerhalb von Veranstaltungen. Ein Scope besitzt einen Bereich bzw. ein Icon in der Hauptnavigation und verweist auf mehrere Funktionen. Ein Scope repräsentiert bzw. beinhaltet stets die 2. Navigationsebene.
  4. Sidebar: Diese befindet sich am linken Bildschirmrand und enthält in definierter Form mehrere Widgets, etwa Navigation (der gewählten Funktion im gewählten Scope), Aktionen, Ansichten, Export und ggf. weitere Widgets.
  5. Navigationswidget: Dieses Widget erscheint stets als erstes Widget und repräsentiert, wenn vorhanden, die 3. Navigationsebene.
  6. Inhaltsbereich: Hier werden sämtliche Inhalte dargestellt. Ein Inhaltsbereich wird aus Tabellen und ContentBoxen bzw. Eingabefeldern gebildet. Für den Inhaltsbereich existieren feste Elemente, aus denen dieser gestaltet werden muss.
  7. Fußzeile: Diese enthält weitere Links und Verweise, die analog zur Kopfzeile vom Betreiber erweitert werden kann.

TODO: Screenshot einer idealtypischen Seite

Seitenaufbau und Seitentitel

Die eigentliche Seite setzt sich aus Sidebar und Inhaltsbereich zusammen. Beide Bereiche werden vom einem Seitentitel eingeleitet. Im Gegensatz zum Design bis Stud.IP 3.5 bringt der Inhaltsbereich nun keinen eigenen Titel (bisher teilweise als <h1>-Objekt gestaltet) mit.

Kennzeichen des Seitentitels:

  • Der Titel muss namengleich mit dem Eintrag in der Navigation in der Sidebar sein
  • Bei Veranstaltungen wird automatisch der Name der Veranstaltung mit ausgegeben (gleiches gilt für den Einrichtungsbereich bei gewählter Einrichtung)

Weitere Vorgaben für den Seitenaufbau:

  • Jede Seite enthält zwingend eine Sidebar.
  • Jede Sidebar enthält mindestens ein Schmuckbild.
  • am rechten Rand ist der Zugriff auf die Hilfe (Fragezeichen-Icon) als Abschluss des Seitentitels vorgesehen.
  • Aktionen der Sidebar (zu finden im gleichnamigen Widget) werden in Dialogen ausgeführt.

Weitere Informationen zur Sidebar: siehe Abschnitt Style.Sidebar

Letzte Änderung am June 21, 2017, at 03:15 PM von ckater.