Source: https://cd.union-investment.de/anwendungen/Weitere-Anwendungsbereiche/bewegtbild
Bewegtbildinhalte gewinnen zunehmend an Bedeutung. Ob im Fernsehen, auf der Website, in sozialen Netzwerken oder auf Videoplattformen – sie bieten die Möglichkeit, Informationen emotional und wirkungsvoll zu vermitteln. Inhalte von Union Investment können informieren, motivieren oder unterhalten. Dabei sollte die Marke stets klar als Absender erkennbar sein. Die flexible Anwendung der Basiselemente eröffnet kreative Spielräume für unterschiedliche Kommunikationsziele. Bei Konzeption und Produktion ist neben den gestalterischen Prinzipien auch auf gute Nutzbarkeit zu achten.
Bitte beachten
Bei Einsatz von Bewegtbild im Web müssen die Vorgaben der WCAG berücksichtigt werden. Deshalb sollten bereits bei der Erstellung Untertitel, Audiodeskriptionen und zugängliche Player integriert werden. Achten Sie zudem auf klare Kontraste und einfache Sprache.
Anwendungsbeispiele
Anwendungsprinzipien
Intro- und Outrosequenzen
Bauchbinden
Absenderkennung
Untertitel
Barrierefreiheit
Start-Standbilder (Thumbnails)
Downloads
Anwendungsbeispiel Introsequenz
Die abgebildeten Beispiele zeigen Umsetzungsmöglichkeiten und dienen der Inspiration. Solange die Prinzipien der Basiselemente eingehalten werden, sind auch andere Lösungen möglich. Die Markenform kann als Fläche, Kontur oder Bildmaske verwendet werden. Für alle Bewegtbild-Umsetzungen gelten die Motion-Prinzipien.
Weitere Informationen finden Sie auf den entsprechenden Seiten:
Prüfen Sie vor der Erstellung eines Videos, ob es unter das Barrierefreiheitsstärkungsgesetz (BFSG) fällt – zum Beispiel bei Einsatz auf Webseiten oder in öffentlich zugänglichen digitalen Anwendungen. In diesen Fällen gelten die Anforderungen der Barrierefreiheit.
Besonders wichtig: Videos können auch sehr klein eingebunden werden, etwa auf Mobilgeräten mit nur 320 px Breite. Empfohlen wird eine Mindestschriftgröße von 12 px, bezogen auf eine minimale Darstellungsbreite von 320 px. Voraussetzung ist ein deutlich über 4,5:1 liegendes Kontrastverhältnis sowie ausreichende Abstände und gute Lesbarkeit.
Die auf dieser Seite bereitgestellten Templates berücksichtigen diese Anforderungen und bieten eine verlässliche Grundlage. Wer nicht unter das BFSG fällt, hat in der Gestaltung – insbesondere bei der Schriftgröße – mehr Flexibilität.
Diese Sequenzen kennzeichnen den Beginn und den Abschluss eines Videos und vermitteln dabei Absenderidentität sowie Tonalität. Sie sind in den Bewegtbild-Vorlagen enthalten.
Wenn Logos oder andere Absenderinformationen nur visuell dargestellt werden, sollte ihre Bedeutung alternativ im Transkript oder als gesprochener Text vermittelt werden.
Markenform als Bildmaske (prägenste Ebene im Outro)
Überschneidende Markenform-Konturen
Überschneidende Markenform – Thema/Kapitel
Aufeinander zugehende Markenformen
Aufstrebende Markenform
Bauchbinden unterstützen die Zuordnung von Personen, Themen oder Begriffen. Eine vollflächige Farbfläche kann dabei als Hintergrund für den Text dienen. Diese Fläche kann ein Rechteck oder eine Markenform sein, jeweils gemäß den Prinzipien der Basiselemente. Farblich sind UI-Blau oder Weiß vorgesehen. Wichtig ist eine einheitliche Verwendung innerhalb eines Videos.
Achten Sie darauf, dass die Texte einen ausreichenden Kontrast zum Hintergrund haben und die Bauchbinden nicht mit den Untertiteln kollidieren. Untertitel befinden sich meist unten mittig.
Die Markenform oder die rechteckige Hinterlegung können flexibel innerhalb der geltenden Prinzipien eingesetzt werden. Die Verwendung sollte jedoch innerhalb eines Videos konsequent beibehalten werden.
Bauchbinde als Rechteck in UI-Blau mit weißem Text für optimale Kontraste
Bauchbinde als komplette Markenform in UI-Blau
Bauchbinde als Rechteck in Weiß mit Text in UI-Blau für optimale Kontraste
Bauchbinde als komplette Markenform in weiß
Kapitel- und Thementrenner schaffen Struktur und gliedern längere Videos in thematische Abschnitte.
Vermeiden Sie rein visuelle Trenner ohne begleitende Sprache, wenn diese für das Verständnis wichtig sind. Beispielsweise sollte ein neues Kapitel durch einen Titel oder eine sprechende Ansage erklärt werden.
Das Union Investment-Logo (UI-Logo) dient der klaren Absendermarkierung. Optional kann zusätzlich das Logo der Genossenschaftlichen FinanzGruppe (FG-Logo) eingeblendet werden.
Die Logos sollten innerhalb eines Videos konsequent und einheitlich verwendet werden. Achten Sie außerdem darauf, dass das UI-Logo stets vor dem FG-Logo erscheint.
Wenn das Video auch außerhalb der Union Investment-Seite verwendet wird (z. B. auf YouTube), sollte der Absender nicht nur visuell, sondern auch sprachlich vermittelt werden, etwa durch die Formulierung „Unterstützt durch …“.
Das UI-Logo wird stets nur einmal angezeigt: Wenn es groß dargestellt wird, wird in der entsprechenden Sequenz die Absenderkennung ausgeblendet.
Diese Regel gilt ausschließlich für eingebundene Logodateien. Ist das Logo hingegen Teil des filmischen Inhalts – etwa in einer Dokumentation über eine Konferenz, als Logo an einem Gebäude oder auf Unterlagen – bleibt die Absenderkennung erhalten.
Am Anfang oder Ende einer Intro- bzw. Outrosequenz können Partnerlogos eingeblendet werden. Diese werden in der unteren rechten Bildecke platziert. Dabei gelten die Logo-Prinzipien der Basiselemente. Achten Sie außerdem darauf, dass das UI-Logo stets vor einem eventuell vorhandenen Partnerlogo erscheint.
Im digitalen Umfeld sind Videos in der Regel mit einem Player ausgestattet. Für öffentlich zugängliche Videos mit Ton sind Untertitel sogar Pflicht.
Die Untertitel werden auf schwarzen, leicht transparenten, eckigen Textbalken dargestellt. Bei zwei Zeilen stoßen die Balken ohne Abstand direkt aneinander. Für die Schrift wird „Neue Frutiger Bold“ in Weiß verwendet.
Die Platzierung erfolgt immer mittig horizontal und möglichst weit unten im Bild, um den Hintergrund möglichst wenig zu verdecken.
Die Textlänge ist auf maximal zwei Zeilen begrenzt – längere Texte werden nacheinander eingeblendet. Die Ausrichtung des Textes orientiert sich an der unteren Kante: Bei einzeiligem Text steht dieser direkt dort, bei zweizeiligem Text befindet sich die zweite Zeile darüber.
Start-Standbilder vermitteln den ersten Eindruck eines Videos, bevor es abgespielt wird. Sie können entweder automatisch aus dem Video generiert oder individuell gestaltet werden. Im letzteren Fall lassen sich auf dem Standbild zusätzliche Hinweise oder Markenkennzeichen ergänzen – etwa das UI-Logo, wenn das Video in einem externen, nicht markengeführten Umfeld erscheint.
Achten Sie dabei stets auf ausreichende Kontraste und gute Lesbarkeit. Prüfen Sie abschließend anhand des eingebundenen Videos oder Standbilds, ob Texte trotz Schriftgröße und Player gut lesbar sind.
Um Barrierefreiheit zu gewährleisten, sollte Text im Vorschaubild möglichst vermieden werden. Falls Text dennoch enthalten ist, muss er im umgebenden Fließtext oder im Code zugänglich sein. Dies gilt besonders für Standbilder von Videos, die unter das Barrierefreiheitsstärkungsgesetz (BFSG) fallen.
Barrierefreiheit bei Bewegtbildinhalten ist essenziell, um allen Nutzern uneingeschränkten Zugang zu ermöglichen. Barrierefreies Bewegtbild bedeutet dabei mehr als nur die Bedienbarkeit des Players – es geht darum, dass alle Inhalte visuell, auditiv und inhaltlich zugänglich sind.
Die Inhalte sollten klar strukturiert und frei von unnötiger kognitiver Belastung präsentiert werden. Zudem sollte auf schnelle Bildwechsel und Flackern in Animationen verzichtet werden.
Bereits in der Konzeption und Produktion von Videos sollten diese Aspekte berücksichtigt werden, um nachträgliche Anpassungen zu vermeiden. Außerdem müssen Bewegtbildinhalte, die länger als drei Sekunden dauern, pausierbar sein. Dies wird in der Regel über die Funktionen des Video-Players oder entsprechende CMS-Komponenten, wie sie beispielsweise in Magnolia verwendet werden, umgesetzt.
Videos müssen mit einem bedienbaren Player und einer Steuerung ausgestattet sein.
Untertitel sind bei Videos mit Ton verpflichtend, bei Videos ohne Ton sollten Transkripte bereitgestellt werden.
Kombinieren Sie Untertitel und Transkript für optimale Zugänglichkeit.
Achten Sie auf gute Lesbarkeit eingeblendeter Texte.
Eingeblendete Texte sparsam einsetzen. Empfohlen wird eine Mindestschriftgröße von 12 px, bezogen auf eine minimale Darstellungsbreite von 320 px. Voraussetzung ist ein deutlich über 4,5:1 liegendes Kontrastverhältnis sowie ausreichende Abstände und gute Lesbarkeit.
Eingeblendete Texte sparsam einsetzen. Bei Verwendung auf ausreichende Kontraste (mind. 4,5:1) und Schriftgrößen achten. Empfohlen wird eine Mindestschriftgröße von 14 px. Kleinere Schriftgrößen sind nur in Ausnahmefällen zulässig, wenn das Kontrastverhältnis deutlich über 4,5:1 liegt.
Vermeiden Sie UI-Grün für Text, da es häufig zu Kontrastproblemen führt.
Bauchbinden und Untertitel dürfen sich nicht überlagern.
Texte auf Standbildern sollten zusätzlich im Fließtext aufgenommen werden.
Emotionale oder bildhafte Animationen ggf. im Transkript oder als PDF erläutern.
Logos immer mit Kontext versehen, z. B. durch eine sprachliche Ergänzung wie „Unterstützt durch …“ statt sie nur optisch zu zeigen.
Inhalte niemals ausschließlich über Ton oder Bild vermitteln.
Visuell wichtige Texte nicht ohne ergänzende Tonspur oder Untertitel verwenden.
Animationen, die inhaltlich relevant sind, nicht ohne Erklärung zeigen.
Logos in Videos auf fremden Plattformen nicht nur visuell, sondern auch sprachlich vermitteln.
Überladene Textblöcke und zu kleine Schriftgrößen vermeiden.
Sie haben Fragen zur Gestaltung von Bewegtbild-Medien oder anderen Punkten unseres Corporate Designs? Gerne hilft Ihnen unser Corporate Design-Team weiter.
Vorheriges Kapitel Veranstaltungen
