Seitenkopf

Hauptkapitel
Designsystem
Unterkapitel
Navigation
Gilt für
Websites & Webapplikationen (mit Login)

Darstellung und Verhalten

Varianten

Website

  • Besteht aus:
    • Header und Hauptnavigation für Websites
    • Breadcrumbs oder Zurück-Link (siehe Breadcrumb)
    • Logo (siehe Logos)
    • Titel der Seite (H1)
    • Meist gesucht (optional, siehe Tags und Chips)
    • Bild oder Video (optional)
    • Lead (ausgenommen Home und Service-Seiten)
    • Personen-Teaser (optional, nur Direktionsseiten; siehe Teaser)
    • Button (optional)
  • Ist in der Akzentfarbe der Seite.
  • Beim Scrollen bleibt nur der Header stehen (sticky) und wird weiss.

Service-Overlay

  • Besteht aus:
    • Logo des Kantons
    • Titel des Service (H1)
    • Schliessen-Icon
  • Beim Runterscrollen wird der Service-Header minimiert. Das Logo verschwindet.
  • Scrollt man wieder an den Anfang der Seite, wird der Header wieder vergrössert.
  • Der Seitenkopf hat die Akzentfarbe der Seite

Applikation

  • Besteht aus:
    • Header und Hauptnavigation für Applikationen
    • Zurück Link (optional)
    • Titel der Seite (H1)
    • Metadaten (optional)
    • Status (optional)
    • Link zu Hilfe (optional)
    • Subnavigation mit Reitern (optional)

Verwendung

Website

Jede Seite des Webauftritts hat einen Seitenkopf. Die Elemente im Seitenkopf sind abhängig von der Art der Seite.

Meist gesucht und Top-Themen

Das Element «Meist gesucht» oder «Top-Themen» setzen wir nur auf Seiten ein, die mehrere Level an Unterseiten haben. Die Links bieten die Möglichkeit, tiefer in ein Thema einzutauchen, ohne durch alle Hierarchie-Level zu navigieren.

Es können Unterseiten aus unterschiedlichen Navigations-Leveln verlinkt werden. Wir empfehlen, hier die am häufigsten gesuchten oder aktuellsten Unterseiten zu verlinken.

Der Name des Links kann vom Namen der verlinkten Seite abweichen. Wichtig ist, dass es sich um Begriffe handelt, die Nutzende kennen und nach denen sie auch suchen.

Bild oder Video

Das Element Bild oder Video setzen wir nur dann ein, wenn es ein aussagekräftiges Bild oder Video zum Thema gibt. Reine Stimmungsbilder verwenden wir nicht. Ein Bild oder ein Video muss immer eine zum Thema passende Aussage haben (siehe dazu Umgang mit Bildern und Videos). 

Lead

Der Lead kommt auf allen Seiten vor. Ausnahmen sind die Home-Seiten und Serviceseiten, wenn diese von extern aufgerufen werden (Suchmaschine).

Personenteaser

Den Personenteaser (siehe Teaser) setzen wir nur auf Direktionsseiten ein. Der Personen-Teaser dient dazu, die leitende Person vorzustellen.

Er besteht aus: 

  • Bild der Person
  • Name der Person
  • Funktion und/oder Position der Person
  • Button. Damit kann auf eine Seite verlinkt werden, wo weitere Informationen zur Person zu finden sind.

Button

Der Button im Seitenkopf kann verwendet werden, um auf Themenseiten, auf wichtige oder ausschlaggebende Services oder auf Applikationen zu verlinken. So können wir beispielsweise auf der Themenseite zur Steuererklärung unterhalb des Leads einen Button «Steuererklärung ausfüllen» platzieren.

Service Overlay

Der Seitenkopf für Service Overlays kommt nur auf dem Seitentyp Serviceseite vor und auch nur, wenn der Service als Overlay geöffnet wird. Dies ist der Fall, wenn der Service auf dem kantonalen Webauftritt aufgerufen wird. Wird der Service von extern aufgerufen (Suchmaschine), so wird er nicht als Overlay angezeigt. Die Service-Seite hat dann den Seitenkopf und den Footer für Websites.

Applikationen einspaltig

Jede eigenständige Applikation hat einen Seitenkopf. Die Elemente im Seitenkopf sind abhängig von der Art der Seite.

Applikationen zweispaltig

Kontakt

Digitale Verwaltung - ZHweb

E-Mail

zhweb@sk.zh.ch