Bild

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

Darstellung und Verhalten

Varianten

Inhaltsbild gross

  • Das Bildformat ist frei wählbar, empfohlen ist aber Querformat. Hochformatige Bilder werden so etwas zu wuchtig dargestellt.
  • Das Bild ist in der Inhaltsspalte gelayoutet.
  • Bildlegende und Quelle sind unter dem Bild platziert.

Inhaltsbild klein

  • Das Bildformat muss ein Hochformat sein.
  • Das Bild ist in der Inhaltsspalte eingerückt gelayoutet.
  • Bildlegende und Quelle sind eingerückt (Bildbreite) unter dem Bild platziert.

Headerbild

  • Das Bildformat ist 21:9 auf Desktop und 16:9 auf mobilen Geräten.
  • Das Bild ist im Seitenkopf eingerückt gelayoutet
  • Bildlegende und Quelle sind eingerückt (Bildbreite) unter dem Bild platziert.

Volle Breite

  • Das Bildformat ist entweder 16:9 oder 21:9.
  • Das Bild ist randabfallend gelayoutet.
  • Bildlegende und Quelle werden eingerückt (Inhaltsbreite) unter dem Bild platziert.

Für alle Varianten gilt

  • Das Bild skaliert proportional über die Breakpoints hinweg.
  • Optional kann ein Titel (H2-H4) angezeigt werden.
  • Optional kann eine Bildlegende und eine Quelle angezeigt werden.

Bildqualität und Formate

  • Die Aufbereitung von Bildern und Illustrationen ist durch die Vorgaben im Corporate Design Manual des Kantons Zürich geregelt.
  • Wir setzen Illustrationen und Infografiken als SVG ein. Bei Fotografien ist auf genügend grosse Auflösung für alle Bildschirmgrössen zu achten. Um auf Retina-Geräten eine gute Bildqualität zu gewährleisten, empfehlen wir einen Auflösungsfaktor von 1.3x.

Verwendung

Wenn immer möglich, soll ein Bild die Aussage des Inhalts unterstützen. Ein gutes Bild unterstützt das Erlebnis der Nutzenden, 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 - ZHweb

E-Mail

zhweb@sk.zh.ch