Durch die Reduktion auf das Wesentliche schaffen wir übersichtliche Tabellen, Diagramme und Organigramme. Achten Sie auf eine Darstellung, die dem städtischen Look-and-Feel entspricht: leicht verständlich, eindeutig, bold. Verzichten Sie auf Effekte, beispielsweise Transparenzen, Schlagschatten oder 3D-Optik.

Grundsätzlich stellen Tabellen Datenreihen dar und helfen so Inhalte und Zusammenhänge rasch zu verstehen. Sie sollen also eine schnelle Übersicht über Informationen verschaffen. 

Gestalterische Vorgaben

Es gelten die Vorgaben für Typografie. Oft beinhalten Tabellen viele Informationen auf engem Raum. Deshalb verwenden die Indesign-Vorlagen anstelle der Helvetica Neue LT Pro Medium den Schriftschnitt Roman. So wird Platz gespart, ohne auf kleinere Schriftgrössen auszuweichen — die Inhalte der Tabelle bleiben gut lesbar (Anwendungen im Office: wie gewohnt Arial Regular).

Die Textausrichtung führt zu einheitlichen Spalten: standardmässig linksbündig und für Tabellen ausnahmsweise auch rechtsbündig. Horizontale Linien verbessern die Lesbarkeit. 

Das Hervorheben von Text wird grundsätzlich im Kapitel Typografie unter Auszeichnungen beschrieben. Blättern Sie durch die folgenden Bildstrecken mit Dos und Don’ts zu Auszeichnungen in Tabellen. 

Der Titel und die Beschreibung des Tabelleninhalts befinden sich in der Regel ausserhalb der Tabelle. Achten Sie darauf, dass es keine Doppelungen gibt. Behalten Sie die klare Titelhierarchie Ihres Layouts bei. 

Technische Umsetzung / Vorlagen

Die Indesign-Vorlagen enthalten Absatzformate für die Typografie in Tabellen. Die erstellte Tabelle wird mit korrekten Linienstärken (1 Pt. im Kopf und Fuss sowie 0.25 Pt. bei den restlichen Linien) und Innenabständen (unten/oben 2mm links/rechts 0.75mm) ausgeben. Aufgrund der geringen Innenabstände muss zwischen den Inhaltsspalten jeweils eine Leerspalte mit einer Breite von 4 mm einberechnet werden. Mustertabellen finden Sie unter anderem im Bericht A4 in der Datenablage CD (als Pdf oder als Indesign-Datei, Link auf Teams-Raum). 

In der Word-Berichtsvorlage sind Tabellen als Formatvorlage hinterlegt. Mehr Informationen zur Formatvorlage Tabelle.

Diagramme sind visuelle Übersetzungen von Informationen, Zusammenhängen oder Prozessen. Genau wie der Inhalt soll auch die Gestaltung so eindeutig wie möglich sein – damit die Diagramme leicht verständlich und somit ohne zusätzliche Erklärungen lesbar sind. Die folgende Grafik zeigt verschiedene Möglichkeiten, Daten sichtbar zu machen. Welche Darstellung eignet sich für eine bestimmte Art von Daten? Und welche Aussage kann man damit treffen?

Gestalterische Vorgaben

Es gelten die Vorgaben für Typografie. Als Schrift ist Helvetica Neue LT Pro Medium der Standard, bei Bedarf ist auch der feinere Schriftschnitt Roman möglich (in Office-Anwendungen: Arial Regular). Um ein Diagramm stimmig ins Layout einzubetten, können Sie den Titel wie eine Kopfzeile von Tabellen behandeln. Beachten Sie: das Titel-Layout ist nur für den Titel des Diagramms bestimmt, nicht für zusätzliche Textinhalte. Behalten Sie für erläuternde Texte die Titel- und Texthierarchie Ihres Layouts bei.

Grundsätzlich sind alle Farben der städtischen Farbpalette möglich, in den Office-Programmen ist eine Auswahl als «Benutzerdefinierte Farben» hinterlegt. Beachten Sie, dass bei Diagrammen die Farbe auch Bedeutung transportiert. Das heisst, Inhalt und Gestaltung sind eng verknüpft. Achten Sie für die Barrierefreiheit auf ausreichende Farbkontraste und Helligkeitsunterschiede. Vermeiden Sie eine zu detaillierte Unterscheidung über Farbe: je weniger unterschiedliche Kategorien Sie definieren, desto einfach sind diese auseinanderzuhalten. 

Don’t

Verzichten Sie auf Schattierungen, ablenkende Elemente oder verzerrende Perspektiven. Beschränken Sie die Anzahl der gestalterischen Unterscheidungen, damit die einzelnen Elemente gut auseinandergehalten werden können.

Technische Umsetzung / Vorlagen

Für die städtische Website stadt-zuerich.ch stehen zwei Komponenten zur Verfügung: Diagramm und D3 – Data Driven Documents. Komplexere interaktive Diagramme und Visualisierungen erstellt Statistik Stadt Zürich im Auftrag für Sie. 

Auf Github finden Sie zwei R Packages, um R-Grafiken (ggplot2) CD-konform zu gestalten. Ein Repository zeigt R-Beispiel-Code. Für konkrete Fragen zu diesen Packages und zum Repository können Sie sich an Statistik Stadt Zürich wenden.

Erklärgrafiken mit Bildern

Die meisten Diagramme und Grafiken bestehen aus einfachen Flächen und Linien. Möchten Sie zusätzlich Illustrationen einsetzen, richten sich diese nach den Vorgaben für Illustrationen. Dort finden sie auch Beispiele und Hinweise zu Erklärgrafiken. 

In einem Organigramm ist alles Information. Das heisst, ihre Gestaltung transportiert eine inhaltliche Bedeutung. In Organigrammen sollte man darum Gleiches gleich behandeln (Typografie, Abstände, Farben, Flächen, Linien etc.) und darauf achten, dass sich unterschiedliche Elemente jeweils eindeutig voneinander unterscheiden lassen.

Klicken Sie sich durch verschiedene Beispiele von Organigrammen.

Gestalterische Vorgaben

Es gelten die Vorgaben für Typografie. Die Schrift Helvetica Neue LT Pro kann in allen drei Schriftschnitten Heavy, Medium und Roman verwendet werden (Office-Programme: Arial Black und Regular). Der Text ist linksbündig ausgerichtet.

Grundsätzlich sind alle Farben der städtischen Farbpalette möglich, in den Office-Programmen als «Benutzerdefinierte Farben» hinterlegt. In Organigrammen sind Farben nie reine Dekoration, sondern stellen Zusammenhänge her: sie eignen sich zum Gruppieren, Unterscheiden oder Hervorheben. Achten Sie darauf, dass Menschen mit und ohne Sehbeeinträchtigung das Organigramm verstehen können. Setzen Sie für Barrierefreiheit hohe Kontraste ein. Wir empfehlen, unterschiedliche Informationen nicht nur durch verschiedene Farbe zu vermitteln, sondern eine weitere Möglichkeit zur visuellen Unterscheidung zu bieten — beispielsweise durch Helligkeitsunterschiede, grafische Elemente oder eine Kontur.

Die Felder sind rechteckig, ohne abgerundeten Ecken. Ihre Anordnung visualisiert den hierarchischen Aufbau. Linien dienen dazu, hierarchische Verbindungen eindeutig darzustellen und allenfalls Unterschiede in der Weisungsbefugnis zu verdeutlichen.

Grundsätzlich benötigt ein Organigramm kein Logo oder Logostreifen. Ist das Organigramm eingebettet in die Website, ein Worddokument oder eine Präsentation, sind diese Kommunikationsmittel jeweils bereits mit der Marke versehen. Soll das Organigramm ausgedruckt werden, binden Sie es in ein Dokument mit Logostreifen ein. Das kann ein Kleinplakat oder ein Worddokument sein.

Technische Umsetzung

Möchten Sie ein Organigramm erstellen und suchen nach einer Vorlage? Es gibt keine offizielle Mustervorlage für Organigramme, denn die Bedürfnisse sind sehr unterschiedlich. Die CD-Fachstelle hat jedoch ein grundlegendes Indesign-Dokument für Organigramme, das Sie auf Anfrage gerne erhalten (gute Indesign-Kenntnisse sowie eine Schriftlizenz für Helvetica Neue LT Pro sind für die Bearbeitung erforderlich).