Source: https://cd.union-investment.de/grundlagen/Basiselemente/hintergruende
Hintergründe sind mehr als Fläche: Sie erzeugen Atmosphäre, lenken den Blick und geben Inhalten Raum, sich zu entfalten. Dieses Kapitel bietet einen Überblick über die vielfältigen Möglichkeiten der Hintergrundgestaltung.
Bitte beachten
Im Rahmen der Umsetzung der Barrierefreiheitsrichtlinien sollte auf das geforderte Kontrastverhältnis von Text zu Hintergrund geachtet werden.
Einfarbige Hintergründe
Bilder als Hintergründe
Overlay-Effekt
Strukturierte Hintergründe
Barrierefreihet
Für einfarbige Hintergründe ist vor allem das markenprägende UI-Blau, Weiß und die neutrale Sekundärfarbe Grau vorgesehen.
Die bunten Sekundärfarben sind nicht markenprägend und sollten daher nicht als Hintergrund verwendet werden.
Da die Primärfarbe UI-Grün nicht vollflächig verwendet werden darf, kommt sie als Hintergrund generell nicht in Frage.
In den meisten Fällen kommen im Layout Bildmotive als Hintergrund zum Einsatz. Dabei orientiert sich ihre Gestaltung an den definierten Prinzipien der Bildwelt sowie des Illustrationsstils .
Um den Fokus auf den Vordergrund zu lenken, kann der Hintergrund des Bildes mit einem transparenten Overlay-Effekt in UI-Blau oder Weiß versehen werden. Dieser Effekt wird ausschließlich auf den Hintergrund angewendet – das Hauptmotiv bleibt unverändert.
Der Aufbau des Overlay-Effekts besteht immer aus drei Elementen: dem Hintergrund- Bildmotiv, dem transparenten Overlay und dem Vordergrund z. B. ein freigestelltes Foto.
Das Vorder- und Hintergrundbild muss die stilistischen Vorgaben der UI-Bildwelt erfüllen.
Sofern das Vordergrund-Motiv den stilistischen Vorgaben der UI-Bildwelt entspricht, kann der farbige Hintergrund mit einer transparenten Fläche in UI-Blau oder Weiß versehen werden.
Zusätzliche Effekte (wie z. B. Multiplizieren) sind nicht gewünscht, da sie die Farbwirkung des UI-Blaus verfälschen würden.
Die Transparenz kann je nach Motiv variieren. Wir empfehlen für ein barrierefreies und gut lesbares Ergebnis eine Deckkraft von mindestens 80 %.
UI-Blau (Beispiel mit 90 % Transparenz)
Weiß (Beispiel mit 80 % Transparenz)
Um unruhige Bildhintergründe zu beruhigen und die Lesbarkeit von verwendeten Texten zu verbessern, kann der Hintergrund weichgezeichnet werden. Der Grad der Weichzeichnung kann je nach Hintergrund und in Abhängigkeit von der Overlay-Deckkraft variieren. Dabei sollte das Hintergrundmotiv schemenhaft erkennbar bleiben.
Weichzeichnung (Beispiel mit 4 px Unschärfe)
Weichzeichnung (Beispiel mit 3 px Unschärfe)
Sofern das Vordergrund-Motiv den stilistischen Vorgaben der UI-Bild- oder Grafikwelt entspricht, dürfen diese mit dem Overlay kombiniert werden.
Beachten Sie für ein barrierefreies Ergebnis die weiteren Informationen im Abschnitt zur Barrierefreiheit .
Kombination mit Fotografie
Kombination mit einer UI-Illustration
Kombination mit Content Icons
Kombination mit Diagrammen
Die Markenform wird als Bildmaske auf einem transparenten Overlay eingesetzt und erhält dadurch einen prägnanten Hervorhebungseffekt.
Einzelne Bildelemente dürfen die Maske überlagern, um die Wirkung dynamischer zu gestalten. Dabei ist jedoch sicherzustellen, dass die Charakteristik der Markenform (Steigung + Rundung) nicht verändert wird.
Kombination mit der Markenform als Bildmaske – mit möglicher partieller Überlagerung
Beispiel ohne partielle Überlagerung
Beispiel mit partieller Überlagerung
Der Overlay-Effekt darf ausschließlich als ergänzendes Gestaltungsmittel im Hintergrund eingesetzt werden, um das Hauptmotiv zu unterstützen.
Dabei ist stets sicherzustellen, dass die Markenfarben in ihrer optimalen Wirkung erhalten bleiben.
Bitte vermeiden: Verwendung als Hauptmotiv anstatt als Hintergrund für Layout-Elemente
Bitte vermeiden: Zusätzliche Transparenzeffekte (z. B. Multiplizieren)
Strukturierte Hintergründe dienen dazu, große Flächen aufzulockern und ihnen zusätzliche Tiefe zu verleihen. Sie sind rein dekorativ, bestehen aus abstrakten Formen und sind bewusst dezent gestaltet, um die Lesbarkeit der Inhalte nicht zu beeinträchtigen. Gleichzeitig können sie inhaltliche Aussagen visuell begleitend unterstützen.
Strukturierte Hintergrundgrafiken sind immer flächig gestaltet, wobei ihre visuelle Tiefe durch Schattierungen erzeugt wird.
Komplexe Grafiken wie Linienmuster oder sehr gegenständliche Motive können mit Text konkurrieren und sollten daher vermieden werden.
Der Gesamteindruck soll stets dezent gehalten sein.
Gegenständliche Motive
Darstellung ohne räumliche Tiefe
Zu unruhig
Die Hintergründe können in den Farben Weiß, Grau und UI-Blau gestaltet werden.
Dabei ist sicherzustellen, dass sowohl helle als auch dunkle Bereiche einen ausreichend hohen Kontrast zum Text bieten, um die Lesbarkeit zu gewähr-leisten.
Achten Sie bei der Platzierung von Texten und Grafiken auf ausreichende Kontraste zum Hintergrund (3:1, 4,5:1 für Text) und dass wichtige Informationen im Bild nicht untergehen oder überlagert werden, um eine visuelle Barrierefreiheit zu gewährleisten.
Um sicher zu sein, sollte der Kontrast im Einzelfall geprüft werden und das überlagerte Bild kann im Hintergrund partiell abgedunkelt/aufgehellt werden oder die Deckkraft der transparenten Fläche erhöht werden.
Bei der Verwendung für Grafiken im digitalen Kontext sollten Texte auf Bildern vermieden werden. Sollten Sie dennoch zum Einsatz kommen, müssen Alternativtexte für Bilder hinterlegt werden oder eine weitere adäquate Alternative angeboten werden, um auch Screenreader-Nutzern die Inhalte zugänglich zu machen. Testen Sie die Darstellung auf verschiedenen Geräten, Bildschirmgrößen und Zoomstufen, um die Lesbarkeit in allen Szenarien zu gewährleisten.
Voriges Kapitel Bildwelt Nächstes Kapitel Iconstil
