Bildergalerie

Inhaltsverzeichnis

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

Darstellung und Verhalten

LEER

Varianten

Bildergalerie

  • Initial werden maximal fünf Bilder verkleinert dargestellt.
  • Das erste Bild ist grösser dargestellt (Format 4:3).
  • Die Bilder sind falls nötig zugeschnitten (Format 3:2).
  • Sind mehr als fünf Bilder vorhanden, wird ein Button angezeigt, mit dem die restlichen Bilder eingeblendet werden können.
  • Die Galerie hat immer einen H2-Titel.

Slider

  • Initial wird das erste Bild des Sliders dargestellt.
  • Der Slider hat eine fixe Höhe und ist maximal so breit wie die Inhaltsspalte. Die Bilder werden entsprechend skaliert.
  • Unterhalb des Bildes wird die Anzahl der Bilder (inkl. aktueller Bildnummer) angezeigt.
  • Auf der rechten Seite werden die Vor- und Zurück-Pfeile angezeigt, mit denen Nutzende durch die Bilder blättern können.
  • Der Slider kann optional einen Titel haben (H2-H4).

Für beide Varianten gilt

  • Es kann zu jedem Bild eine Bildlegende und Quelle angezeigt werden.
  • Jedes Bild kann als Download angeboten werden. Dieser wird mittels Download-Icon angezeigt.
    • In der Variante «Bildergalerie» ist das Download-Icon in der kleinen Darstellung und in der Vollbildansicht sichtbar.
    • In der Variante «Slider» ist das Download-Icon nur in der Vollbildansicht sichtbar.
  • Bei Klick auf ein Bild wird eine Vollbildansicht geöffnet. Diese füllt den Bildschirm voll aus und besteht aus dem Bild, der Bildegende, der Anzahl der Bilder (inkl. aktueller Bildnummer) und den Vor- und Zurück-Pfeilen, mit denen Nutzende durch die Bilder blättern können. In der oberen rechten Ecke befindet sich ein Icon zum Schliessen der Vollbildansicht.

Verwendung

Mit der Bildergalerie oder einem Slider zeigen wir mehrere Bilder, um einen ansprechenden visuellen Eindruck zu vermitteln.

Die Bildergalerie zeigt mehrere Bilder gleichzeitig auf dunklem Hintergrund an, jedoch kleiner. Die Bilder werden nur per Klick gross angezeigt. Diese Variante der Bildergalerie eignet sich, wenn viele Bilder vorhanden sind (bspw. Bilder eines Events). Durch die Darstellung aller Bilder im Kleinformat erhalten Nutzende einen guten Überblick und Eindruck.

Der Slider zeigt das erste Bild gross an. Mit Vor- und Zurück-Pfeilen können Nutzende durch die Bilder blättern. Diese Variante der Bildergalerie eignet sich vor allem für wenige Bilder (Empfehlung: maximal zehn Bilder).

Allgemein gilt für Bilder : Wenn immer möglich, soll ein Bild die Aussage des Inhalts unterstützen. Ein gutes Bild unterstützt das Nutzererlebnis, indem es unterschwellig hilft, den Inhalt zu verstehen. Generische Stimmungsbilder ohne Aussagekraft sollen nicht genutzt werden.

Redaktionelle Vorgaben

Weitere Regeln zur Verwendung von Bildern:

Barrierefreiheit

Alle Vorgaben zur Barrierefreiheit von Grafiken und Bildern:

Kontakt

Digitale Verwaltung und E-Government – ZHweb

Ist Ihnen etwas aufgefallen? Fehlt etwas? Möchten Sie etwas beitragen? Melden Sie sich bei uns!

Mehr erfahren