Global Navigation

Logostreifen und Designsystem

Unser Designsystem ist selbstbewusst, vielfältig wandelbar und einfach anzuwenden. Mit dem Logostreifen definieren wir einen klaren Absender: wir setzen damit einen grossen gemeinsamen visuellen Nenner und stärken die Marke «Stadt Zürich». Durch ein horizontales Raster bleibt das System flexibel und einfach in der Anwendung. Die zur Verfügung gestellten Vorlagen sind bereits entsprechend aufgebaut.

Der Logostreifen

Zentrales Element des Erscheinungsbildes ist der Logostreifen: er bildet sozusagen die visuelle Klammer. Er ist so ausgelegt, dass er sich jeder Kommunikationsanwendung flexibel anpasst, egal welches Medium oder Format umgesetzt wird. So schafft er die nötige Wiedererkennung für einen einheitlichen Auftritt.

Der Logostreifen ist in zwei Bereiche eingeteilt: in die weisse Logozone mit dem Logo, und in den Farbfläche. Für die Proportionen des Logostreifens gibt es genaue Regeln, diese finden Sie weiter unten.

Logostreifen

Logozone

Bei Farbanwendungen kommt immer das blaue Logo auf weissem Hintergrund zur Anwendung. Die Grösse und Platzierung des Logos entnehmen Sie bitte der passenden Vorlage bzw. der Tabelle Standardformate PrintAusser dem städtischen Logo darf kein Inhalt (Text oder andere Logos) in der Logozone stehen.

Farbfläche

Der zweite Teil besteht aus einer einfarbigen Farbfläche. Die Farbe ist zielgruppenspezifisch oder je nach Kommunikationsbedürfnis frei wählbar aus der Farbpalette. In die Farbfläche dürfen keine Elemente integriert werden – weder Bild noch Text.

STZ_Manual_Komposition
Logostreifen
Keine Inhalte in der Logozone
STZ_Manual_Komposition
Keine Formen, die in die Farbzone hineinragen
STZ_Manual_Komposition
Keine Inhalte in der Farbfläche
STZ_Manual_Komposition
Die Form der Farbzone darf nicht verändert werden.

Abgrenzung

Die weisse Logozone muss sich optisch als solche abgrenzen. Stellen Sie deshalb sicher, dass der Inhalt Ihres Layouts einen ausreichenden Kontrast bietet (sonst verschwindet die Form).

STZ_Manual_Komposition
Gut: Die Fläche unterhalb des Logostreifens begrenzt die weisse Logozone eindeutig.
STZ_Manual_Komposition
Konflikte durch produktionstechnischen Gegebenheiten können oft durch die Umpositionierung des Logostreifens (oben oder unten) vermieden werden.
STZ_Manual_Komposition
Gut: Die Fläche unterhalb des Logostreifens begrenzt die weisse Logozone eindeutig. Beispiel für ein Layout für den Ausdruck am Bürodrucker.
STZ_Manual_Komposition
Die Fläche, die an den Logostreifen grenzt, darf nicht weiss sein.
STZ_Manual_Komposition
Auch bei produktionsbedingten Gegebenheiten muss die Abgrenzung des Logostreifens eindeutig sein.

Logostreifen Print

Gestaltung

Der Logostreifen hat in den jeweiligen Hoch- und Querformaten eine klar definierte Höhe und Breite. Bei Hochformaten ist das Verhältnis zwischen Logozone und Farbfläche 1:1, bei Querformaten (ab DIN A6 und grösser) wird die Breite der Farbfläche erweitert und dem Format angepasst.

STZ_Manual_Komposition
STZ_Manual_Komposition

Ein Quadrat zählt noch als Hochformat und hat einen Logostreifen im Verhältnis 1:1. Alle Formate, die breiter als hoch sind, zählen als Querformat, die Farbfläche ist entsprechend breiter als die Logozone.

Logostreifen
Logostreifen
In Querformaten ist das Verhältnis von Logozone und Farbbereich nie 1:1. (Einzige Ausnahme: Vorlage Kreditkartenformat)

Positionierung

Der Logostreifen wird standardmässig oben positioniert. Dies gilt hauptsächlich für redaktionell, umfassendere Printprodukte wie Broschüren und Factsheets. Bei kommunikativeren Anwendungen wie Plakaten und Flyern kann der Logostreifen passend zu Ihrem Layout oben oder unten positioniert werden.

Für den Logostreifen im Fussbereich gelten die gleichen Regeln wie in der Anwendung im Kopfbereich. Bitte entnehmen Sie die Positionierung des Logostreifens den entsprechenden Musterseiten der Indesign-Vorlagen

Logostreifen oben
Logostreifen oben
Logostreifen unten
Logostreifen unten

Standardformate Print

Für die gängigen Printformate sind die korrekte Position, Höhe und Breite des Logostrei­fens definiert und in den Vorlagen hinterlegt. Diese Werte sind zwingend beizubehalten.

STZ_Komposition_Grössen_Logostreifen

Vorlagen für Standardformate:

  • DIN A0, A1, A2, A3, A4, A5, A5 quer, A6, A6/5
  • F4, F12, F200
  • Kreditkarte / Pocketflyer

Vorlagen für Formate mit produktionsbedingten Abweichungen:

  • A4-Broschüre mit Rand (für Büro-Ausdruck)
  • Tramplakat
  • Metallaufsteller (1000 x 1200 mm)

Vorlagen für Sonderformate:

  • Blache (3000 x 1800 mm)

Logostreifen im dynamischen digitalen Raum

Gestaltung

Digital kann der Logostreifen auch animiert werden. Erscheint das Logo als Absender zum Schluss eines animierten Kommunikationsmittels, so wird das gesamte Format genutzt. Es sind also keine festen Höhen und Breiten definiert, sondern es gilt die Flächenaufteilung von Logozone und Farbstreifen basierend auf einem 5er- (bzw. 10er-) Raster.

Für Angaben zur Animation des Logostreifens siehe Kapitel Bewegtbild. Für Social Media kommen Icons mit einer definierten Sonderform des Logostreifens zum Einsatz.

Animierter Logostreifen im Querformat
Animierter Logostreifen im Querformat
Animierter Logostreifen im Hochformat
Animierter Logostreifen im Hochformat

Für statische Umsetzungen oder einfache gif-Animationen, deren Layout aus dem Printbereich abgeleitet sind, können auch die Vorgaben zu Logostreifen Print angewandt werden.

Positionierung

Der Logostreifen nutzt standardmässig das gesamte Format. Bei Querformaten wird der Farbstreifen zwingend seitlich platziert – niemals unterhalb des Logos. Bei Hochformaten wird der Farbstreifen verbindlich unterhalb des Logos platziert und nicht daneben.

STZ_Manual_Komposition
STZ_Manual_Komposition
STZ_Manual_Komposition
STZ_Manual_Komposition

Logostreifen auf dreidimensionalen Objekten

Hinweise auf den möglichen Umgang mit dem Logostreifen bei dreidimensionalen Objekten finden sich unter Anpassung des Logostreifens bei abweichenden Formaten bzw. Spezialformate sowie im Kapitel Anwendungen

Anpassung des Logostreifens bei abweichenden Formaten

Weicht Ihr Format von den Standardformaten ab, ist allenfalls eine Anpassung des Logostreifens nötig. Massgeblich ist die Formatbreite. Entscheidend ist auch, ob es sich um ein Hoch- oder ein Querformat handelt.

Einige Beispiele von Umsetzungen in abweichenden Formaten finden Sie in der Galerie in den Einzelelementen bzw. bei den Inseraten.

Die Breite Ihres Formats entspricht einem Standardformat, aber die Höhe weicht ab?

Verwenden Sie den Logostreifen des Standardformats ohne Änderungen. Der 5-er Raster wird auf die neue Höhe angepasst.

Die Breite Ihres Formats liegt sehr nahe an einem Standardformat? 

Weicht die Breite Ihres Formats höchstens 10% von der Breite eines Standardformats ab, wird nur die Breite des Logostreifens angepasst. Behalten Sie dabei die Position des Logos sowie das 1:1-Verhältnis von Logozone und Farbfläche bei.

Ihr Format hat eine Zwischengrösse, die stark von einem Standardformat abweicht?

Der ganze Logostreifen wird auf die Endbreite skaliert, wodurch sich auch seine Höhe ergibt. Gehen Sie dafür von den Werten des am nächsten liegenden Standardformats aus. 

Spezialformate

Wenn Ihr verfügbares Format extrem klein oder schmal ist – beispielsweise bei Inseraten oder Bannern – wird der Logostreifen nicht funktionieren. Je mehr Fläche Sie für Ihre Komposition zur Verfügung haben, desto erfolgreicher kann der Logostreifen eingesetzt werden. Wir empfehlen daher den Einsatz grosszügigerer Formate, die der Kommunikation den nötigen Raum verschaffen und mehr Aufmerksamkeit erreichen.

STZ_Manual_Komposition

Grundlagen

Können speziell kleine oder schmale Formate nicht verhindert werden, gibt es alternative Anwendungsmöglichkeiten des Logoeinsatzes.

Ihr Format ist sehr klein?

Behalten Sie die Logozone in ihrer originalen Höhe und Breite bei. Passen Sie die Breite des Farbstreifens an.

Ihr Format ist sehr schmal?

Ist das Format so schmal, dass kein Platz mehr für den Farbstreifen besteht – oder er als solcher nicht mehr erkennbar ist – wird er weggelassen. Behalten Sie jedoch die Logozone in ihrer dem Format entsprechenden Höhe und Breite bei.

Ihr Format ist sehr breit?

Sofern das Format nur eine geringe Höhe aufweist, können Inhalte links im Format platziert werden und der Logostreifen rechts. Diese Anwendung orientiert sich am animierten Umgang mit dem Logostreifen und ist nur in absoluten Ausnahmefällen zu verwenden. Achten Sie darauf, dass der Inhalt den Logostreifen nicht konkurriert.

Beispiel für runden Kleber

Ihr Format ist rund?

Bei runden Formaten, zum Beispiel einem Kleber, wird der Farbstreifen weggelassen. Das Logo steht auf weissem Grund. 

Für runde Social-Media-Icons gibt es Vorlagen

Extreme Hochformate

Bei Rollups, Windflags und Stelen sind sehr grosse, schmale Hochformate häufig. Prüfen Sie immer, ob der gesamte Logostreifen platziert werden kann. Es kann aber sein, dass auf diese Weise das Logo nicht prägnant genug erscheint, auch weil der Betrachtungsabstand gross ist. Es gibt mehrere Möglichkeiten, mit dem Logostreifen umzugehen.

Das Format ist zwar hoch, bietet aber genug Raum für den Logostreifen.

Der Logostreifen wird wie für ein normales Hochformat angewendet. Orientieren Sie sich für die Grösse der Logostreifens an dem Standardformat, das Ihrem Format am nächsten ist und gehen Sie allenfalls gemäss Anpassung des Logostreifens bei abweichenden Formaten vor.

Der Farbbereich wird weggelassen.

Behalten Sie jedoch die Logozone in ihrer dem Format entsprechenden Höhe und Breite bei. Orientieren Sie sich für die Grösse der Logozone an dem Standardformat, das Ihrem Format am nächsten ist.

Werden mehrere Hochformate miteinander platziert, können sie sich mit dem Logostreifen ergänzen. Beispielsweise kann die Farbfläche über das zweite und dritte Format gezogen werden. Auf diese Art ist beispielsweise die Vorlage für das Standardformat F12 angelegt.

Der Logostreifen wird am unteren Formatrand «gestapelt».

Diese Anwendung orientiert sich am dynamischen Umgang mit dem Logostreifen und ist nur in Ausnahmefällen zu verwenden. Achten Sie darauf, dass der Inhalt den Logostreifen nicht konkurriert. Die Flächenaufteilung basiert auf einem 5-er (bzw. 10er-) Raster.

Extreme Querformate

Bei Fensterklebern und Bannern sind sehr breite Querformate häufig. Der Umgang mit dem Logostreifen hängt davon ab, wie hoch das Format ist, also ob sich ein sinnvoller Raum für den Inhalt ergibt, wenn Logostreifen und Inhalt übereinander stehen.

Die Höhe des Formats bietet genügend Raum für den Inhalt.

Der Logostreifen wird wie für ein normales Querformat angewendet. Orientieren Sie sich für die Grösse der Logozone an dem Standardformat, das Ihrem Format am nächsten ist.

Die Höhe des Formats lässt keinen Raum für den Inhalt.

Der Inhalt kann links im Format platziert werden und der Logostreifen rechts. Diese Anwendung orientiert sich am dynamischen Umgang mit dem Logostreifen und ist nur in Ausnahmefällen zu verwenden. Achten Sie darauf, dass der Inhalt den Logostreifen nicht konkurriert. Die Flächenaufteilung basiert auf einem 10er-Raster.

Ausdruck am Bürodrucker

Wenn Sie einen Standard-Bürodrucker verwenden und den endgültigen Druck nicht zuschneiden können, verwenden Sie die speziellen Vorlagen mit definiertem Druckrand. Es gibt Office-Vorlagen (Word und Powerpoint) und Indesign-Vorlagen.

STZ_Manual_Komposition
STZ_Manual_Komposition

Stanzungen, Aufhängungen, grosser Beschnitt

Der Logostreifen erfordert eine randabfallende Platzierung und die Möglichkeit zum Beschnitt. In manchen Fällen gerät der Logostreifen jedoch in Konflikt mit Vorgaben aus der Produktion, seien es Stanzungen oder Ösen für die Aufhängung oder ein vergrösserter Beschnitt.

  • Prüfen Sie, ob der Logostreifen unten (bzw. oben) positioniert werden kann, wo er nicht betroffen ist. (Dies wurde beispielsweise bei der Vorlage zum Standardformat Tramplakat berücksichtigt.) 
  • Die Höhe des Logostreifens ist fix und wird nicht verändert.
  • In absoluten Ausnahmefällen ist eine minime manuelle Veränderung des Stands des Logos nötig, um zu vermeiden, dass beispielsweise Aufhängungsösen zu nahe am Logo stehen. (Die Vorlage für Metallaufsteller wurde entsprechend optimiert.) Kontaktieren Sie bei Unsicherheiten gerne die CD-Fachstelle.
Logostreifen
Logostreifen

Der 5er-Raster

Die horizontale Einteilung des Formats in Farb- beziehungsweise Bildbereiche ist ein zusätzliches charaktergebendes Element unseres Auftritts. Der 5er-Raster gibt dem Layout von Titelseiten, Plakaten, Banner Ads und weiteren kommunikativ ausgerichteten Publikationen gerade genug Struktur und Führung, damit Sie sich auf Ihre kreative Idee konzentrieren können. Der 5er-Raster kann zudem auf die meisten Oberflächen, 3-D-Objekte und Architektur angewandt werden.

Konstruktion des 5er-Rasters

Der 5er-Raster teilt Ihr Format in fünf gleich grosse Bereiche ein. Dabei ist der Bereich des Logostreifens von der verfügbaren Fläche ausgeschlossen.

Teilen Sie den verfügbaren Bereich immer so auf, dass gleiche Zeilenhöhen gewährleistet sind
Teilen Sie den verfügbaren Bereich immer so auf, dass gleiche Zeilenhöhen gewährleistet sind
Teilen Sie nie das ganze Format auf, sondern schliessen Sie die Höhe des Logostreifens von Ihren Berechnungen aus
Teilen Sie nie das ganze Format auf, sondern schliessen Sie die Höhe des Logostreifens von Ihren Berechnungen aus

Feinere Einteilung

Die horizontale Einteilung in fünf Bereiche ist für die meisten Layouts ausreichend. Bei Bedarf kann das Format jedoch noch weiter in 10 Einheiten unterteilt werden.

Einteilung des Formats mit dem 5er-Raster
Einteilung des Formats mit dem 5er-Raster
Einteilung des Formats in 10 Einheiten
Einteilung des Formats in 10 Einheiten

Für eine klare Struktur im Layout wird der Text immer linksbündig am Logo ausgerichtet. Hierbei stehen drei Varianten zur Verfügung: die Ausrichtung an der Bildmarke links, an der Bildmarke mittig oder an der Wortmarke «Stadt Zürich».

Der Text richtet sich an der Bildmarke links aus.
Der Text richtet sich an der Bildmarke links aus.
Der Text richtet sich an der Bildmarke mittig aus.
Der Text richtet sich an der Bildmarke mittig aus.
Der Text richtet sich an der Wortmarke links aus.
Der Text richtet sich an der Wortmarke links aus.

Weitere Informationen