Digitale Medien

Digitale Medien sind zentrale Bausteine der externen Kommunikation von Engagement Global. Dieser Abschnitt definiert die gestalterischen Grundlagen für den Webauftritt, Newsletter, Social Media und Videobranding. Ziel ist ein konsistenter Auftritt über alle digitalen Kanäle hinweg.

Videobranding

Für Engagement Global wurde ein Videobranding entwickelt, das als Illustrator-Vorlage bereitgestellt wird. Es ermöglicht Videograf*innen, vorgefertigte Gestaltungselemente in ihre Videoproduktionen zu integrieren und textlich anzupassen. Alle Vorlagen sind im Format 16:9 angelegt.

Das Design umfasst:

  • eine Titelfolie mit dem Logo von Engagement Global
  • eine weiß hinterlegte Bauchbinde mit Logo, Namen und Unterzeile
  • eine Abschlussfolie mit Kontaktangaben, dem Logo von Engagement Global, dem BMZ-Logo, Impressum und Haftungsausschluss

Bis auf die Bauchbinde, deren Texte individuell editierbar sind, sind alle Gestaltungselemente fix vorgegeben.

Die Vorlagen liegen in zwei Farbvarianten vor:

  • mit petrolfarbenem Hintergrund, weißem Logo und weißer Schrift
  • in positiver Variante mit weißem Hintergrund und schwarzem Text

Grundsätzlich kann entweder die komplette Gestaltung in Weiß oder komplett in Petrol erfolgen. Bei der Variante in Petrol muss das BMZ-Logo mit weißer Hinterlegung integriert werden. Eine gemischte Anwendung ist nur in einem Fall zulässig: Die Titelfolie und die Abschlussfolie mit Kontaktangaben dürfen petrolfarben sein, alle weiteren Elemente – insbesondere die Bauchbinde – müssen in Weiß verwendet werden. Weitere Kombinationen sind nicht vorgesehen.

  • Format: 16:9, als Illustratordatei angelegt, bearbeitbare Vorlage der Bauchbinde steht zur Verfügung, alle anderen Elemente sind fest definiert
  • Die Bauchbinde ist immer weiß hinterlegt und textlich editierbar
  • Optional werden Logo und Textelemente auf Weiß oder alle auf Petrol gesetzt
  • Einzige zulässige Mischung: Titelfolie und Abschlussfolie in Petrol, alle anderen Elemente in Weiß

Newsletterdesign

Der Newsletter von Engagement Global wird mit dem Newsletter-Tool ‚CleverReach‘ erstellt und versendet. Für das Tool wurde ein Template entwickelt, das die redaktionelle Befüllung über den WYSIWYG-Editor einfach und intuitiv ermöglicht.

Der Newsletter hat eine maximale Breite von 650 Pixel. Alle Inhalte werden zeilenweise untereinander angeordnet, sodass eingesetzte Bilder ebenfalls eine feste Breite von 650 Pixel haben müssen. Die Höhe der Bilder kann je nach Inhalt variieren, sollte aber im Querformat bleiben.

Der gestalterische Aufbau basiert auf modularen Contentelementen, aus denen sich der Newsletter flexibel zusammensetzt:

  • Newsletternummerierung
  • Einleitungstext
  • Kategorieüberschriften / Überschriften / Fließtext
  • Links
  • Bulletlisten
  • Bilder (mit optionaler Bildunterschrift)
  • Kontaktbox

Der Kopfbereich und der Footer sind im Template fest verankert. Logo und Headergrafik von Engagement Global sowie die Impressumsangaben und das BMZ-Logo sind dort fix integriert und können redaktionell nicht verändert werden.

  • Bilder müssen in einer Breite von 650 px angelegt werden und sollten im Querformat gestaltet sein.
  • Kopf- und Fußbereich des Newsletters sind im Template fest integriert und nicht redaktionell bearbeitbar.
  • Der Newsletter wird über den ‚CleverReach‘-Editor im WYSIWYG-Modus befüllt – alle Contentelemente sind als Module verfügbar.

Webauftritt

Das Corporate Design von Engagement Global wurde Digital First entwickelt, d. h. die Gestaltung des Webauftritts ist für die anderen Medien tonangebend. Damit sich der Webauftritt nicht durch Aktualisierungen schleichend verändert, sollte bei Gestaltung neuer Inhalte immer Bezug zu den Original-Entwürfen genommen werden.

Übergeordnete Gestaltungsprinzipien

  • Logo-Verwendung: Das Logo von Engagement Global muss im Header immer sichtbar sein, um die Markenstruktur zu verdeutlichen. Für die Websites der vier Programme unter dem Dach von Engagement Global wurde eine spezielle Banderolen-Lösung entwickelt.
  • Typografie: Die definierten Hausschriften gelten im Website-Kontext ebenfalls – Ausnahmen bilden Programme mit eigenem Corporate Design. Die Klavika Black Display kann sparsam für Überschriften und Call-to-Action-Elemente eingesetzt werden – hier auch in einer zweifarbigen Variante mit Petrol (ggfs. invertiert).
  • Farben: Die im Styleguide definierten Primär- und Sekundärfarben kommen im Webauftritt in entsprechender Verteilung zur Anwendung. Fokus liegt auf einem hellen Gesamteindruck – Ausnahme bildet die Mediathek, die mit einer petrolfarbenen Hinterlegung arbeitet. Die Farbverwendung sollte konsistent und kontrastreich erfolgen, insbesondere im Hinblick auf mobile Nutzung.
  • Icons und Illustrationen: Die im Corporate Design definierten Icons, Illustrationen und grafischen Akzente dürfen auch im Web verwendet werden. Sie werden sparsam eingesetzt.
  • Tonality und Text: Die visuelle Gestaltung wird ergänzt durch eine klare, zielgruppenorientierte Sprache. Die Textlänge ist plattformgerecht zu gestalten (z. B. kurze Teasertexte); textliche Überfrachtung und doppelte Inhalte sollten unbedingt vermieden werden.

Formensprache: Teaser und Buttons

Für Elemente im Web kommen sowohl runde als auch eckige Formen zum Einsatz. Die Rundungen greifen die runde Formensprache des Logos wieder auf. Damit der Gesamteindruck einer Seite nicht zu viele Rundungen aufweist, sollte folgende Faustregel beachtet weden: Mit runden Ecken werden Elemente versehen, die einen besonders starken Call-to-Action-Charakter zum Ausdruck bringen sollen. Dazu gehören sowohl Buttons als auch bestimmte Teaser-Arten.

Thementeaser und flexibel einsetzbarer Teaser
Teaser Engagement konkret und Teaser browserbreit
Angebotsteaser und Zielgruppen-Teaser
Teaser Standard (Pressemitteilung) und Medienteaser

Social Media

Auch im Bereich Social Media ist das einheitliche Erscheinungsbild von Engagement Global von zentraler Bedeutung. Die Gestaltung aller Social-Media-Inhalte muss den Vorgaben des Corporate Designs entsprechen, um die visuelle Identität der Organisation kanalübergreifend zu wahren und zu stärken.

Übergeordnete Gestaltungsprinzipien

  • Logo-Verwendung: Das Logo darf ausschließlich in den definierten Varianten eingesetzt werden. Es ist auf ausreichenden Kontrast, Schutzraum und korrekte Platzierung zu achten. Eine Verwendung auf visuell unruhigen Hintergründen ist zu vermeiden. Zur Kennzeichnung der Beiträge kann das Signet oben links mitgeführt werden – es muss in allen Beitragsarten in Gridansicht auf exakt der selben Position sitzen. Bei Kooperationsbeiträgen ist – wie beschrieben – das Signet von Engagement Global zu verwenden. Kooperationspartner*innen werden im Begleittext genannt. In Reels dürfen mehrere Logos gemeinsam auf einer Abschlussfolie gezeigt werden.
  • Farben: Die im Styleguide definierten Primär- und Sekundärfarben kommen auch in der Social-Media-Gestaltung zur Anwendung. Die Farbverwendung sollte konsistent und kontrastreich erfolgen, insbesondere im Hinblick auf mobile Nutzung. Bei Anlegen und Export der Grafiken ist auf das korrekte Farbprofil zu achten (sRGB); es gelten ausschließlich die korrekten Hex-Werte (Werte eintragen, nicht mit der Pipette entnehmen).
  • Bildsprache: Die Bildwelt orientiert sich an den übergeordneten gestalterischen Prinzipien. Es sollen authentische und aussagekräftige Motive verwendet werden. Bildinhalte sollten nicht überfrachtet sein und die Botschaft klar transportieren.
  • Icons und Illustrationen: Die im Corporate Design definierten Icons, Illustrationen und grafischen Akzente dürfen auch in Social-Media-Postings verwendet werden. Sie sollten sparsam eingesetzt werden.
  • Tonality und Text: Die visuelle Gestaltung wird ergänzt durch eine klare, zielgruppenorientierte Sprache. Die Textlänge ist plattformgerecht zu gestalten (z. B. kurze Teasertexte). Hashtags, Emojis und Calls-to-Action können eingesetzt werden, wenn sie zur Tonalität passen.

Hinweise für das Setzen von Text in Beiträgen und Reels

Die definierten Hausschriften sind auch im Social-Media-Kontext zu verwenden – hier wird ausschließlich die gemischte Schreibweise verwendet. Auf Lesbarkeit (auch auf kleinen Bildschirmen) und mediengerechte Skalierung ist zu achten. Es ist auf ausreichend Kontrast, klare Hierarchien und genügend Zeilenabstand zu achten. Für alle Überschriften ist ausschließlich die Klavika Black zu verwenden. Der Schriftschnitt UltraBlack ist nicht zulässig.

Vor allem beim Einsatz von farbiger Typografie auf Farbflächen sind die Regeln für farbige Typografie zu beachten. Für Posts und Reels auf Instagram ist als einzige Ausnahme die Kombination von petrolfarbenem Text auf gelbem Hintergrund bzw. gelbem Text auf petrolfarbenem Hintergrund erlaubt. Falls die Bildhinterlegung zu unruhig ist, darf zwecks Lesbarkeit mit Hinterlegungen der Zeilen gearbeitet werden. Der Text wird grundsätzlich linksbündig gesetzt, für besondere Beitragsarten dürfen Ausnahmen gemacht werden.

  • Farbkombination: Typo in Petrol auf gelber Hinterlegung ist nur bei Instagram-Posts und Reels zulässig.
  • Die eingesetzte Farbe entspricht einer 80 %-Aufhellung der Türkis-CI-Farbe (mit Weiß) und wird voll deckend auf petrolfarbenem Grund verwendet, um den nötigen barrierefreien Kontrast zu erreichen.
  • Farbprofil: Grafiken im sRGB-Farbraum anlegen und exportieren; nur hinterlegte Hex-Werte verwenden – keine Farbabnahmen per Pipette
  • Überschriften sind ausschließlich in Klavika Black Display zu verwenden. Der Schriftschnitt UltraBlack ist nicht zulässig.
  • Die Texte der Titelslides sollten nicht zu stark hoch- und runter-„springen“ – hier sollte sich auf 2–3 Positionen beschränkt werden, damit ein einheitliches Gesamtbild gewahrt wird. Selbiges gilt für die Platzierung von Buttons.

Hinweise zur Platzierung von Elementen für Beiträge, Reels und Storys

Um das Motiv vor dem Beschnitt oder Überlagerung durch UI-Elemente (z. B. Buttons, Profilnamen, Navigationsleisten) zu schützen, gelten klare Sicherheitsabstände – sogenannte Schutzzonen. Wichtigste Motive und Botschaften müssen im sichtbaren, nicht überdeckten Bereich liegen.

Posts und Carousels werden so angelegt, dass ein Bereich für das Carousel-Icon frei bleibt – das Logosignet muss entsprechend links oben platziert werden. Randabstände müssen über alle Beitragsarten hinweg gleich behandelt werden.
Beim Anlegen von Storys müssen die Schutzzonen für die Instagram-Bedienelemente beachtet werden. In den Schutzzonen dürfen weder Text, noch Sticker o. ä. platziert werden.
Auch bei Reels muss die Schutzzone für die Instagram-Bedienelemente beachtet werden. In den Schutzzonen dürfen weder Text, noch Sticker oder Untertitel o. ä. platziert werden.
Bei der Platzierung von Textelementen muss die spätere Ansicht im Profil-Grid beachtet werden. Es wird empfohlen, hierfür ein gesondertes Titelbild hochzuladen, welches die Schutzzonen freihält und das Logo-Icon für die Grid-Ansicht korrekt platziert.

Gestärkte visuelle Konsistenz in Social Media

Die überarbeiteten Beiträge zeigen, wie sich durch gezielte gestalterische Anpassungen ein einheitlicheres und markenkonformes Erscheinungsbild erzielen lässt. Die gegenübergestellten Beispiele machen Unterschiede in Typografie, Farbverwendung, Bildbeinsatz und Struktur deutlich sichtbar. Links steht jeweils das ursprüngliche Ausgangsbeispiel, rechts die überarbeitete Version, die gestalterisch und inhaltlich den definierten CD-Vorgaben entspricht.

  • Schriftgrößen müssen auf allen Endgeräten gut lesbar sein
  • Text grundsätzlich in gemischter Schreibweise und linksbündig setzen (Ausnahmen nur bei Reels oder speziellen Beitragsformaten)
  • Farbflächen durchgängig deckend einsetzen – keine Verläufe, Transparenzen oder Ausblendungen
  • Buttons einheitlich gestalten: gleichbleibende Höhe, Schriftgröße, Platzierung und ggf. Icon, Orientierung an Website-Buttons