LocalZero:Corporate Design Manual: Unterschied zwischen den Versionen

Aus Mitmachen
Zur Navigation springen Zur Suche springen
 
(51 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
Product owner [[Benutzer:OttoL|Christhard »Otto« Landgraf]], Mitarbeit
Product owner [[Benutzer:OttoL|Christhard »Otto« Landgraf]]


== Zum Geleit ==
[[Datei:Kopf-Illustration.png|860px]]


=== Für Eilige, Ungeduldige, Rastlose … ===
==Zum Geleit==
die nicht viel lesen wollen: [[LocalZero:Downloadseite Corporate-Design|Downloadseite]]


=== Wer sollte das hier lesen? ===
===Für Eilige, Ungeduldige, Rastlose …===
… die nicht viel lesen und gleich loslegen wollen, empfehlen wir die [[LocalZero:Downloadseite Corporate-Design|Downloadseite]].
 
===Wer sollte das hier lesen?===
Nicht jede und jeder braucht das hier Geschriebene und Gezeigte zu 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.
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.
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.<blockquote>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.</blockquote>
 
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?===
===Was ist ein Corporate Design?===
Zeile 25: Zeile 25:
[Herkunft: von spätlateinisch ''manualis'' „zur Hand gehörend“; zu lateinisch ''manus'' „Hand“; verwandt mit ''manuell]''  
[Herkunft: von spätlateinisch ''manualis'' „zur Hand gehörend“; zu lateinisch ''manus'' „Hand“; verwandt mit ''manuell]''  


Das Manual gliedert sich in folgende Abschnitte:
Das Manual gliedert sich in folgende Abschnitte:  


# Basiselemente
#Basiselemente
#Richtlinien bei der Gestaltung von Printmedien
#Richtlinien bei der Gestaltung von Printmedien
#Richtlinien bei der Gestaltung von digitalen Medien (Internet)
#Richtlinien bei der Gestaltung von digitalen Medien (Internet)
Zeile 33: Zeile 33:
#Gestaltung von Messen- und Ausstellungsbeteiligungen
#Gestaltung von Messen- und Ausstellungsbeteiligungen
#Hinweise zur nachhaltigen Umsetzung
#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?===
===Wie arbeitest du mit dem Manual?===
Die Gestaltung einer Website oder eines Flyers ist ein Prozess. Ein Prozess, der sich aus verschiedenen Stufen, Schritten zusammensetzt und auch mehrere Iterationen (Schleifen, Wiederholung einzelner Stufen) durchlaufen kann.  
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
Wichtige Schritte sind  


#Zielbestimmung: Welches Anliegen soll erfüllt werden und welches Ergebnis soll erreicht werden?
#Zielbestimmung: Welches Anliegen soll erfüllt werden und welches Ergebnis soll erreicht werden?
#Recherche, Analyse und Synthese: Alle relevanten Informationen sammeln und auswerten.
# Recherche, Analyse und Synthese: Alle relevanten Informationen sammeln und auswerten.
#Ideenfindung: Die gesammelten Ideen zu neuen Lösungsansätzen entwickeln
#Ideenfindung: Die gesammelten Ideen zu neuen Lösungsansätzen entwickeln
# Entwurf, Prototyp: Die Lösungsansätze zu ersten Entwürfen weiterentwickeln
#Entwurf, Prototyp: Die Lösungsansätze zu ersten Entwürfen weiterentwickeln
# Realisierung: Der beste Entwurf wird realisiert
#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.
#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.
#Inbetriebnahme: Die erste Zeit sollte das Produkt/der Services begleitet werden.
Zeile 52: Zeile 53:
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.   
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 Manual=
=Corporate Design=
[[Datei:Gruppenbild 1 BT 2023.jpg|800px|Lebendiges Erscheinungsbild: Plakate, T-Shirts, lokale LocalZero-Logos …|alternativtext=Lebendiges Erscheinungsbild: Plakate, T-Shirts, lokale LocalZero-Logos …|rand|mini]]
 
<blockquote>[https://de.wikipedia.org/wiki/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.
 
</blockquote>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.
[[Datei:Personen.png|rechts|rahmenlos]]
 
====Wirksamkeit eines CD====
{| class="wikitable"
|+
!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 ==
==Die Basiselemente ==


===Unser LocalZero-Logo===
===Unser LocalZero-Logo===
… ist neben den Hausfarben das Herzstück des Corporate Design und damit unser '''stärkstes''' Wiedererkennungsmerkmal.
… 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.
Das LocalZero-Logo orientiert sich stark am GermanZero-Logo.
Wir nutzen die gleiche Bildmarke und für den Schriftzug die gleiche Schrift (Fabrikat Kompakt Bold, © HVD Fonts<ref>https://www.myfonts.com/de/products/bold-fabrikat-398352</ref>).
Wir nutzen die gleiche Bildmarke und für den Schriftzug (LocalZero) der Wortmarke die gleiche Schrift (Fabrikat Kompakt Bold, © HVD Fonts<ref>https://www.myfonts.com/de/products/bold-fabrikat-398352</ref>).
<blockquote>Die Bildmarke, Schiftzug 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 des Schriftzugs ohne Bildmarke sollte vermieden werden.</blockquote>


==== Bildmarke====
Es besteht aus den Elementen Bildmarke und dem Wortmarke LocalZero. Die beiden Elemente können in verschiedenen Zusammenstellungen zu drei Logo-Varianten kombiniert werden.
[[Datei:LZ Bildmarke-Black-01.webp|alternativtext=LocalZero-Bildmarke als Bestandteil des LocalZero-Logos|none|frameless|LocalZero-Bildmarke als Bestandteil des LocalZero-Logos]]
<blockquote>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.</blockquote>
 
====Bildmarke====
[[Datei:LZ Bildmarke-Black-01.webp|none|frameless|LocalZero-Bildmarke als Bestandteil des LocalZero-Logos]]
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.
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.


Zeile 70: Zeile 116:
====Grundvariante (1)====
====Grundvariante (1)====
[[Datei:LZ Logo-Black-01.webp|alternativtext=LocalZero-Logo bestehend aus Bildmarke und Schriftzug|none|frameless|(1) LocalZero-Logo bestehend aus Bildmarke und Schriftzug in der Grundvariante]]
[[Datei:LZ Logo-Black-01.webp|alternativtext=LocalZero-Logo bestehend aus Bildmarke und Schriftzug|none|frameless|(1) LocalZero-Logo bestehend aus Bildmarke und Schriftzug in der Grundvariante]]
In der '''Grundvariante''' (Vorzugsvariante) ist der Schriftzug ein Zweizeiler und horizontal rechts zur Bildmarke angeordnet.
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.  
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.  
[[Datei:LZ Logo-Sonnengelb zweizeilig.webp|alternativtext=LocalZero-Logo Sonnengelb zweizeilig (Grundvariante)|mini|(1) LocalZero-Logo zweizeilig Sonnengelb (Grundvariante)]]
====Weitere Varianten (2) und (3)====
====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.  
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.  
(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.  
[[Datei:LZ Logo-Sonnengelb einzeilig.webp|alternativtext=(2) LocalZero-Logo einzeilig Sonnengelb|mini|(2) LocalZero-Logo einzeilig Sonnengelb]]
 
(3) Die vertikale Variante mit zentrierten Elementen ist für schmale Formate geeignet.  
(3) Die vertikale Variante mit zentrierten Elementen ist für schmale Formate geeignet.  
[[Datei:LZ Logo-Sonnengelb zweizeilig vertikal.webp|alternativtext=(3) LocalZero-Logo zweizeilig vertikal Sonnengelb|mini|(3) LocalZero-Logo zweizeilig vertikal Sonnengelb]]
====Kombination mit dem GermanZero-Logo (4)====
<gallery mode="packed-hover">
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.<gallery mode="nolines" widths="300" caption="LocolZero-Logo Varianten">
Datei:LZ Logo-Sonnengelb zweizeilig.webp|alternativtext=LocalZero-Logo Sonnengelb zweizeilig (Grundvariante)|mini|(1) LocalZero-Logo zweizeilig Sonnengelb (Grundvariante)
Datei:LZ Logo-Sonnengelb zweizeilig.webp|alt=LocalZero-Logo Goldgelb zweizeilig (Grundvariante)|(1) LocalZero-Logo zweizeilig Goldgelb (Grundvariante)
Datei:LZ Logo-Sonnengelb einzeilig.webp|alternativtext=(2) LocalZero-Logo einzeilig Sonnengelb|mini|(2) LocalZero-Logo einzeilig Sonnengelb
Datei:LZ Logo-Sonnengelb einzeilig.webp|(2) LocalZero-Logo einzeilig Goldgelb
Datei:LZ Logo-Sonnengelb zweizeilig vertikal.webp|alternativtext=(3) LocalZero-Logo zweizeilig vertikal Sonnengelb|mini|(3) LocalZero-Logo zweizeilig vertikal Sonnengelb
Datei:LZ Logo-Sonnengelb zweizeilig vertikal.webp|(3) LocalZero-Logo zweizeilig vertikal Goldgelb
Datei:LZ Logo-Sonnengelb kombi.webp|alternativtext=(4) LocalZero-Logo Kombination mit GermanZero Sonnengelb|mini|(4) LocalZero-Logo Kombination mit GermanZero Sonnengelb
Datei:LZ Logo-Sonnengelb kombi.webp|(4) LocalZero-Logo Kombination mit GermanZero Goldgelb
</gallery>
</gallery>
====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.


====Individuelle Logos====
====Individuelle Logos====
Zeile 96: Zeile 137:


====Farbvarianten====
====Farbvarianten====
Die Logos können in Weiß, Gelb und Nachtblau verwendet werden.
Die Logos können in Weiß, Goldgelb und Nachtblau verwendet werden.<gallery mode="nolines" showfilename="yes" widths="300" caption="LocalZero-Logo, einzeilig, Farbvarianten">
Datei:LZ Logo-Farbvarianten Weiß auf Goldgelb.webp|alt=
Datei:LZ Logo-Farbvarianten Weiß auf Nachblau.webp
Datei:LZ Logo-Farbvarianten Nachtblau auf Goldgelb.webp
Datei:LZ Logo-Farbvarianten Goldgelb auf Nachblau.webp
</gallery>
----


===Hausschrift===
===Hausschriften===


=== Hausfarben ===
==== Headlineschrift ====
<blockquote>Die Hausfarben begleitet den öffentlichen Auftritt der jeweilgen Organisation bei allen öffentlichen Auftritten.</blockquote>
[[Datei:LZ Hausschrift DM Sans Bold.webp|alternativtext=LocalZero Hausschrift DM Sans Bold]]


==== Hauptfarbe ====
… 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.


==== Schriftfarbe ====
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.


==== Sekundärfarben ====
==== Fließtext ====
[[Datei:LocalZero Hausschrift DM Sans Regular.webp|alternativtext=LocalZero Hausschrift DM Sans Regular]]
 
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 ====
[[Datei:LocalZero Hausschrift PT Serif Regular.webp|alternativtext=LocalZero Hausschrift PT Serif Regular]]
 
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 [https://fonts.google.com/ Google Fonts] und auf Github herunterladen.
 
Font/Schrift [https://github.com/googlefonts/dm-fonts/tree/main/Sans DM Sans Bold und Regular über GitHub] oder über [https://fonts.google.com/specimen/DM+Sans Google Fonts]
 
Font/Schrift [https://github.com/divspace/pt-serif/tree/master/fonts/pt-serif PT Serif über GitHub] oder über [https://fonts.google.com/specimen/PT+Serif Google Fonts]
----
 
===Hausfarben===
<blockquote>Die Hausfarben begleitet den öffentlichen Auftritt der jeweilgen Organisation bei allen öffentlichen Auftritten.</blockquote>LocalZero nutzt die gleichen Farben wie GermanZero.
Die Tabelle definiert die LocalZero-Farben in den verschiedenen Farbsystemen.
{| class="wikitable"
|+
!Anwendung
!Farbname
!Goldgelb
!Nachtblau
!Türkisblau
!Hellgrün
!Weiß
|-
|
|
|[[Datei:LZ Hausfarbe Sonnengelb.webp|alternativtext=LZ Hausfarbe Sonnengelb|rahmenlos]]
|[[Datei:LZ Hausfarbe Nachtblau.webp|alternativtext=LZ Hausfarbe Nachtblau|rahmenlos]]
|[[Datei:LZ Hausfarbe Türkisblau.webp|alternativtext=LZ Hausfarbe Türkisblau|rahmenlos]]
|[[Datei:LZ Hausfarbe Hellgrün.webp|alternativtext=LZ Hausfarbe Hellgrün|rahmenlos]]
|[[Datei:LZ Hausfarbe Weiß.webp|alternativtext=LZ Hausfarbe Weiß|rahmenlos]]
|-
| rowspan="2" |digitale Medien
|HEX
|#FFC80C
|
|
|
|
|-
|RGB
|255 / 200 / 10
|
|
|
|
|-
| rowspan="2" |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 Printmedien==


==Gestaltung von digitalen Medien (Internet)==
==Gestaltung von digitalen Medien (Internet) ==


==Außendarstellung==
==Außendarstellung==
Zeile 117: Zeile 249:
==Messen und Ausstellungen==
==Messen und Ausstellungen==
==Hinweise zur nachhaltigen Umsetzung==
==Hinweise zur nachhaltigen Umsetzung==
<blockquote>Ideen gestalten, keine Objekte.
<blockquote>


Die Heraus­forderung der Gegen­wart heißt nachhaltige Entwick­lung – als unter­nehme­rische Denk­weise, als gestalterische Haltung und als moralische Position.<ref>https://design-und-nachhaltigkeit.de/weiterbildung/module/m7-nachhaltigkeit-im-kommunikationsdesign</ref></blockquote>Auch bei der Umsetzung von Designobjekten ist auf Ressourcenschonung und CO₂-Einsparung zu achten.
'''Ideen gestalten, keine Objekte.'''


Zuerst CO₂-Vermeidung, dann Reduktion, dann CO₂-Kompensation.
Die Heraus­forderung der Gegen­wart heißt nachhaltige Entwick­lung – als unter­nehme­rische Denk­weise, als gestalterische Haltung und als moralische Position.<ref>https://design-und-nachhaltigkeit.de/weiterbildung/module/m7-nachhaltigkeit-im-kommunikationsdesign</ref></blockquote>
 
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|alternativtext=Charta für nachhaltiges Design|mini|Download]]»Charta für nachhaltiges Design«
* [[Datei:Das Oslo Manifest - Deutsch.pdf|alternativtext=Das Oslo Manifest|mini|Download]]»Das Oslo Manifest«
 
=== Nachhaltiges Printdesign ===
<gallery>
Datei:Nachhaltiger-Spickdeckel-2022-02-01.webp|Nachhaltiger Spickdeckel Print
Datei:Nachhaltiger-Spickdeckel-2022-01-01.webp|Nachhaltiger Spickdeckel Design
</gallery>
 
=== Nachhaltiges Webdesign ===


==Barrierearme Gestaltung==
==Barrierearme Gestaltung==
Zeile 127: Zeile 274:


Schwerpunkte legen wir auf die barrierearme bzw. -freie Gestaltung von Printerzeugnissen und digitalen Produkten (Websites und Web-Apps)
Schwerpunkte legen wir auf die barrierearme bzw. -freie Gestaltung von Printerzeugnissen und digitalen Produkten (Websites und Web-Apps)
 
===von Printerzeugnissen===
===von Printerzeugnissen ===
Text
Text


Zeile 138: Zeile 284:


<references />
<references />
[[Kategorie:Öffentlichkeitsarbeit]]

Aktuelle Version vom 14. Januar 2025, 17:41 Uhr

Product owner Christhard »Otto« Landgraf

Kopf-Illustration.png

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:

  1. Basiselemente
  2. Richtlinien bei der Gestaltung von Printmedien
  3. Richtlinien bei der Gestaltung von digitalen Medien (Internet)
  4. Richtlinien bei der Außendarstellung
  5. Gestaltung von Messen- und Ausstellungsbeteiligungen
  6. 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

  1. Zielbestimmung: Welches Anliegen soll erfüllt werden und welches Ergebnis soll erreicht werden?
  2. Recherche, Analyse und Synthese: Alle relevanten Informationen sammeln und auswerten.
  3. Ideenfindung: Die gesammelten Ideen zu neuen Lösungsansätzen entwickeln
  4. Entwurf, Prototyp: Die Lösungsansätze zu ersten Entwürfen weiterentwickeln
  5. Realisierung: Der beste Entwurf wird realisiert
  6. Evaluation: Das Ergebnis von jedem Schritt wird mit den festgelegten Zielen (1. Schritt) überprüft. Bei Nichterfüllung wird der Schritt wiederholt.
  7. 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

Lebendiges Erscheinungsbild: Plakate, T-Shirts, lokale LocalZero-Logos …
Lebendiges Erscheinungsbild: Plakate, T-Shirts, lokale LocalZero-Logos …

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.

Personen.png

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

… 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

LocalZero-Bildmarke als Bestandteil des LocalZero-Logos

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)

LocalZero-Logo bestehend aus Bildmarke und Schriftzug

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.

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.


Hausschriften

Headlineschrift

LocalZero Hausschrift DM Sans Bold

… 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

LocalZero Hausschrift DM Sans Regular

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

LocalZero Hausschrift PT Serif Regular

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ß
LZ Hausfarbe Sonnengelb LZ Hausfarbe Nachtblau LZ Hausfarbe Türkisblau LZ Hausfarbe Hellgrün LZ Hausfarbe 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 Heraus­forderung der Gegen­wart heißt nachhaltige Entwick­lung – als unter­nehme­rische Denk­weise, 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

Nachhaltiges Printdesign

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

Weiterführende Literatur und Einzelnachweise