LocalZero:Corporate Design Manual
Product owner Christhard »Otto« Landgraf
Zum Geleit
Für Eilige, Ungeduldige, Rastlose …
… die nicht viel lesen und gleich loslegen wollen, empfehlen wir die Downloadseite.
Wer sollte das hier lesen?
Nicht jede und jeder braucht das hier Geschriebene und Gezeigte zu lesen.
Die Seite wendet sich besonders an Gestaltungswillige von visuellen Produkten und Services.
Und mit Gestaltungswillige meinen wir nicht nur ausgewiesene, professionelle Designer:innen und Marketer, sondern alle, die mit LocalZero über ihr Herzblut verbunden sind und das LocalZero-Ökosystem mitgestalten wollen.
An einigen Stellen weisen wir auf professionelles Wissen hin, das als fakultativ zu betrachten ist. Manche sagen »Schön zu wissen.«, für andere ist es unnützes Wissen.
Was ist ein Corporate Design?
Corporate Design (CD) ist das einheitliche, unverwechselbare Erscheinungsbild einer Organisation. Ein gutes CD wird zur visuellen Sprache mit dem Adressaten und gibt dem Absender, LocalZero, seine Identität.
Ein gutes CD im Sinne von LocalZero ermöglicht und unterstützt die Gestaltung von ressourcen- und CO₂-schonenden, barrierearmen bzw. -freien, sozial ausgewogenen Produkten und Services.
Darum gilt: Wo LocalZero drin steckt, soll auch LocalZero draufstehen. Und umgekehrt.
Wie ist das Manual aufgebaut?
Manual ist die englische Bezeichnung für Bedienerhandbuch bzw. Anwendungsbeschreibung.
[Herkunft: von spätlateinisch manualis „zur Hand gehörend“; zu lateinisch manus „Hand“; verwandt mit manuell]
Das Manual gliedert sich in folgende Abschnitte:
- Basiselemente
- Richtlinien bei der Gestaltung von Printmedien
- Richtlinien bei der Gestaltung von digitalen Medien (Internet)
- Richtlinien bei der Außendarstellung
- Gestaltung von Messen- und Ausstellungsbeteiligungen
- Hinweise zur nachhaltigen Umsetzung
Weiterhin werden viele Beispiele aus dem visuellen Schatz von LocalZero gezeigt. Sie sollen als Anregung dienen, können weiter genutzt oder adaptiert werden.
Wie arbeitest du mit dem Manual?
Gestaltung ist immer ein Prozess. Ein Prozess, der sich aus verschiedenen Stufen, Schritten zusammensetzt und auch mehrere Iterationen (Schleifen, Wiederholung einzelner Stufen) durchlaufen kann.
Wichtige Schritte sind
- Zielbestimmung: Welches Anliegen soll erfüllt werden und welches Ergebnis soll erreicht werden?
- Recherche, Analyse und Synthese: Alle relevanten Informationen sammeln und auswerten.
- Ideenfindung: Die gesammelten Ideen zu neuen Lösungsansätzen entwickeln
- Entwurf, Prototyp: Die Lösungsansätze zu ersten Entwürfen weiterentwickeln
- Realisierung: Der beste Entwurf wird realisiert
- Evaluation: Das Ergebnis von jedem Schritt wird mit den festgelegten Zielen (1. Schritt) überprüft. Bei Nichterfüllung wird der Schritt wiederholt.
- Inbetriebnahme: Die erste Zeit sollte das Produkt/der Services begleitet werden.
Für Spezialisten: Ausführlicher zum professionellen Designprozess
Das Manual kommt besonders bei den Schritten 3 und 4, Entwurf, Prototypentwicklung und Realisierung, zur Anwendung.
Es versteht sich in erster Linie als Richtlinie für die oben angesprochenen Gestaltungswillige. Es werden Leitplanken aufgezeigt, in denen gestaltet werden kann. Diese Leitplanken versuchen ein Gebiet zu beschreiben, in dem sich die Gestaltung bewegen kann. Dazu ist es an manchen Stellen notwendig, No-Gos zu beschreiben. Diese sollten immer als »das sollte besser vermieden werden« gelesen werden.
Das Manual ist kein Dogma, sondern soll Anleitung und Anreiz geben, die LocalZero-Welt (LocalZero-Ökosystem) so facettenreich und vielfältig wie möglich innerhalb der hier beschriebenen Leitplanken zu gestalten.
Corporate Design
Corporate Design ist das visuelle Erscheinungsbild von Organisationen: kontinuierliche, visuelle Klammer als Widerspiegelung der Persönlichkeit, der Wirksamkeit bzw. der Aufgabe der Organisation.
Corporate Design umfasst
die visuelle Darstellung nach innen und nach außen
auf Basis
(1) einer festgelegten Philosophie,
(2) eines langfristigen Unternehmenszieles und
(3) eines definierten Images
mit Anleitungen zum Handeln.
Wirksamkeit eines CD
| Wirkung nach innen | Wirkung nach außen |
|---|---|
| stärkt das Selbstverständnis | prägt Image |
| formuliert die Ziele der Organisation | schärft Profil |
| fördert Stärken | positioniert sich in der öffentlichen Wahrnehmung |
| bekämpft Schwächen | macht unterscheidbar |
| bringt Transparenz | steigert Glaubwürdigkeit und Vertrauen |
| fördert Bindung der Mitarbeitenden und Aktivisti | zeigt Kontinuität |
Die Basiselemente
Unser LocalZero-Logo
… ist neben der Hauptfarbe Goldgelb das Herzstück des Corporate Design und damit unser stärkstes Wiedererkennungsmerkmal. Das LocalZero-Logo orientiert sich stark am GermanZero-Logo. Wir nutzen die gleiche Bildmarke und für den Schriftzug (LocalZero) der Wortmarke die gleiche Schrift (Fabrikat Kompakt Bold, © HVD Fonts[1]).
Es besteht aus den Elementen Bildmarke und dem Wortmarke LocalZero. Die beiden Elemente können in verschiedenen Zusammenstellungen zu drei Logo-Varianten kombiniert werden.
Die Bildmarke, Wortmarke und die vorhandenen Logo-Varianten bieten einen breiten Spielraum bei der Anwendung. Es sollte auf nichtproportionale Skalierungen, Verzerrungen und andere Farbvarianten verzichtet werden. Die Verwendung der Wortmarke ohne Bildmarke sollte vermieden werden.
Bildmarke
Der herab zeigende Pfeil steht für sinkende Emissionen, das Ende des Wachstums. Der offene Kreis, in den der Pfeil zeigt, ist die zentrale „Null“ und steht für unser Ziel Klimaneutralität.
Die Bildmarke kann auch einzeln, ohne Wortmarke – zum Beispiel als Profilbild für Social Media Accounts, Favicon und Anstecknadeln eingesetzt werden.
Grundvariante (1)
In der Grundvariante (Vorzugsvariante) ist die Wortmarke ein Zweizeiler und horizontal rechts zur Bildmarke angeordnet.
Diese Variante eignet sich gut für Cover und Umgebungen, in denen sie viel Platz hat, um sich zu entfalten. Dabei ist auf genügend Abstand zu den anderen Elementen zu achten.
Weitere Varianten (2) und (3)
Wort- und Bildmarke können in drei unterschiedlichen Kombinationen angeordnet sein. Ihr Einsatz hängt vom jeweiligen Format und dem vorhandenen Platz (Abstand zu den anderen Elementen) ab.
(2) Die einzeilige Variante, horizontal rechts zur Bildmarke angeordnet, eignet sich gut für geringe Höhen oder bei wenig Platz. Diese könnten z. B. bei einem breiten Banner Anwendung finden.
(3) Die vertikale Variante mit zentrierten Elementen ist für schmale Formate geeignet.
Kombination mit dem GermanZero-Logo (4)
Eine Besonderheit ist das „Kombi-Logo“, wo sowohl GermanZero als auch LocalZero draufstehen. Diese Variante nutzen wir sich für Kontexte, wo GermanZero und LocalZero beide besprochen und als Einheit dargestellt werden.
- LocolZero-Logo Varianten
(1) LocalZero-Logo zweizeilig Goldgelb (Grundvariante)
(2) LocalZero-Logo einzeilig Goldgelb
(3) LocalZero-Logo zweizeilig vertikal Goldgelb
(4) LocalZero-Logo Kombination mit GermanZero Goldgelb
Individuelle Logos
Bei der Gestaltung von individuelle Logos, für LocalZero-Lokalteams oder LocalZero-Produkte kann die LocalZero-Bildmarke als Grundelement genutzt werden. Der jeweilige Schriftzug wird in der Hausschrift DM Sans Bold abgesetzt.
Farbvarianten
Die Logos können in Weiß, Goldgelb und Nachtblau verwendet werden.
- LocalZero-Logo, einzeilig, Farbvarianten
Hausschriften
Headlineschrift
… ist die DM Sans Bold. Eine moderne Serifenlose mit Charakter. Wenn möglich, wird der Zeichenabstand etwas unterschnitten, da die DM Sans etwas weit läuft.
Bei 40 Punkt Schriftgröße in Layout- und Grafikprogrammen wie Adobe Indesign© und Adobe Illustrator© sind -15 (15/1000 em) ein guter Start. Im Webdesign liegt der empfohlene Wert bei -0,075 em.
Fließtext
Der Fließtext wird in der DM Sans Regular gesetzt. Sie kann auch für prozedurale Texte, zum Beispiel in Webseiten-Menüs benutzt werden.
Schmuckschrift
PT Serif Regular sorgt als unsere Schmuckschrift, für den seriösen Teil unseres Auftrittes. Sie wird nur sparsam, zum Beispiel für Bildunterschriften, Hashtags und Buttons, eingesetzt.
Alternative
In kollaborativen Programmformaten wie von Microsoft Powerpoint und Word nutzen wir die Arial in Bold und Regular – ebenfalls leicht unter-schnitten – als Fallback-Schrift.
Downloads
Alle drei Schriften stehen unter einer Open Font Licence und sind damit frei benutzbar. Die Web- und Desktopversionen lassen sich kostenfrei bei Google Fonts und auf Github herunterladen.
Font/Schrift DM Sans Bold und Regular über GitHub oder über Google Fonts
Font/Schrift PT Serif über GitHub oder über Google Fonts
Hausfarben
Die Hausfarben begleitet den öffentlichen Auftritt der jeweilgen Organisation bei allen öffentlichen Auftritten.
LocalZero nutzt die gleichen Farben wie GermanZero.
Die Tabelle definiert die LocalZero-Farben in den verschiedenen Farbsystemen.
| Anwendung | Farbname | Goldgelb | Nachtblau | Türkisblau | Hellgrün | Weiß |
|---|---|---|---|---|---|---|
|
|
|
|
| ||
| digitale Medien | HEX | #FFC80C | ||||
| RGB | 255 / 200 / 10 | |||||
| analoge Medien (Print) | CMYK | 0 / 25 / 90 / 0 | ||||
| Pantone | 123 |
Weiß ist immer eine Alternative zu Nachtblau und Gelb, um den Kontrast zu erhöhen oder zu verringern.
Hauptfarbe
Goldgelb ist die Hauptfarbe. Sie wird selbstbewusst eingesetzt. Das bedeutet große Flächen, ganze Seiten und dicke Balken.
Schriftfarbe
Nachtblau benutzen wir als Schriftfarbe und für kleinere Design-Elemente wie Icons und Buttons.
Bei Druckerzeugnissen kann der Massentext auch in Schwarz (Standard-Schriftfarbe) abgesetzt werden.
Sekundärfarben
Türkisblau und Hellgrün sind unsere Sekundärfarben. Sie können Goldgelb je nach Einsatz als Highlightfarben ergänzen und in Ausnahmen auch komplett ersetzen.
Gestaltung von Printmedien
Gestaltung von digitalen Medien (Internet)
Außendarstellung
Messen und Ausstellungen
Hinweise zur nachhaltigen Umsetzung
Ideen gestalten, keine Objekte.
Die Herausforderung der Gegenwart heißt nachhaltige Entwicklung – als unternehmerische Denkweise, als gestalterische Haltung und als moralische Position.[2]
Auch bei der Umsetzung von Designobjekten ist auf Ressourcenschonung und CO₂-Einsparung zu achten.
Zuerst CO₂-Vermeidung, dann Reduktion, dann CO₂-Kompensation. Einen kurzen, allgemeinen Überblick über Nachhaltigkeit im Design bieten
- Datei:AGD Charta Nachhaltiges Design-DE.pdf»Charta für nachhaltiges Design«
- Datei:Das Oslo Manifest - Deutsch.pdf»Das Oslo Manifest«
Nachhaltiges Printdesign
Nachhaltiger Spickdeckel Print
Nachhaltiger Spickdeckel Design
Nachhaltiges Webdesign
Barrierearme Gestaltung
Wir alle werden in Lebenslagen kommen, wo wir eingeschränkt sind. Möchtest du dann auf deine gewohnten Anwendungen verzichten?
Einschränkungen betreffen nicht nur nichtsehende oder nichthörende Menschen oder Menschen mit kognitiven Einschränkungen. Wir sollten schon heute das Bewusstsein in Organisationen schaffen und mit kleinen Schritten beginnen.
Schwerpunkte legen wir auf die barrierearme bzw. -freie Gestaltung von Printerzeugnissen und digitalen Produkten (Websites und Web-Apps)
von Printerzeugnissen
Text
von digitalen Produkten
Text