Source: https://cd.union-investment.de/grundlagen/Basiselemente/Iconstil
Die Gestaltung der Icons greift die charakteristische Formensprache von Union Investment auf. Sie prägt so das Erscheinungsbild subtil und erzeugt einen konsistenten, vertrauenswürdigen Auftritt. Der Einsatz des Farbklangs aus UI-Blau und UI-Grün bei Content-Icons unterstützt diese Wahrnehmung zusätzlich.
Bitte beachten
Im Rahmen der Umsetzung der Barrierefreiheitsrichtlinien sollte bei Icons auf ihr Kontrastverhältnis zum Hintergrund geachtet werden. Daneben sollten sie, falls es zu einem besseren Verständnis beiträgt, mit einem Alternativtext versehen werden.
Anwendungsbeispiele
System-Icons und Content-Icons
Charakteristik
Rastersystem
Größe und Platzierung
Barrierefreiheit
Animation von Icons
Downloads
Content-Icons bebildern markenrelevante Inhalte wie Produkte, Leistungen und Sachverhalte. Diese sind oftmals komplex – daher können die verwendeten Content-Icons einen hohen Detailgrad besitzen. Durch ihre eigenständige Formensprache und die Zweifarbigkeit besitzen sie eine markenprägende Wirkung.
Zur Iconbibliothek
System-Icons sind Navigationselemente innerhalb digitaler Anwendungen, bebildern also Funktionen und Befehle. Sie sind daher so gestaltet, dass sie möglichst schnell erfassbar sind: Ihre Gestaltung ist auf das Wesentliche reduziert; im Gegensatz zu Content-Icons kommen bei System-Icons Rundungen nur an den Endungen zum Einsatz. System-Icons sind zudem immer einfarbig und werden vorrangig in den Primärfarben eingesetzt.
Jedes Icon, das Sie für Union Investment entwickeln, folgt einer identischen Charakteristik:
Jedes Icon basiert auf einem identischen Raster:
Je nachdem, welches Icon Sie darstellen wollen, können Sie sich an vier unterschiedlichen Anordnungen innerhalb des Rasters orientieren. Diese gewährleisten ein optisch ausgeglichenes Gesamtbild.
Sie können Icons frei platzieren. Stehen sie in Abhängigkeit zu Textinhalten, so empfehlen wir Ihnen die folgenden Größenverhältnisse:
Icons, die wichtige Informationen vermitteln, sollten einen Textzusatz oder mit Alternativtext versehen werden, um Screenreader-Nutzenden zugänglich zu sein. Rein dekorativ genutzte Icons, sollten als solches gekennzeichnet und ohne Alternativtext eingebunden werden. Beim Einsatz von Icons ist auf ein ausreichendes Kontrastverhältnis zum Hintergrund (mind. 3:1) zu achten. Für Icons, die kritische Informationen transportieren, empfiehlt sich ein höheres Kontrastverhältnis von mindestens 4,5:1.Das in den Content-Icons verwendete UI-Grün erreicht nur ein Verhältnis von 3,53:1, was für dekorative Inhalte akzeptabel ist. Im Zweifelsfall sollte es allerdings mit Text oder, wenn es allein steht, mit Alternativtext versehen werden. Icons sollten immer ausreichend groß gestaltet werden, damit sie gut erkennbar und problemlos anklickbar sind. Bei der Wahl der Icons ist auf eine eindeutige Zuordnung zu achten. Im Zweifelsfall sollten Icons mit Text ergänzt werden. Testen Sie die Darstellung auf verschiedenen Geräten, Bildschirmgrößen und Zoomstufen, um die Lesbarkeit in allen Szenarien zu gewährleisten.
Die Content-Icons eignen sich in animierter Form sehr gut für den Einsatz in Digital-Medien, z. B. Webseiten.
Für einen konsistenten Einsatz und für eine einheitliche technische Einbindung sollten animierte Icons die Größe ihres zugrundeliegenden Rasters nicht überschreiten.
Die Abfolge der Animation richtet sich individuell nach dem zu animierenden Inhalt. Die Animationsdynamik basiert auf den definierten Motion-Prinzipien . Bei Bedarf können unterstützende Elemente (z. B. Strahlen der Glühbirne) hinzugefügt werden, das Endbild muss jedoch dem originalem UI-Icon entsprechen.
Die Animation sollte jedoch nie im Vordergrund stehen. Von zu langen Animationszeiten und starken Effekten ist daher abzusehen.
Die folgenden Beispiele stellen verschiedene Möglichkeiten der Animation vor:
Für eine lebendige Kommunikation in diversen digitalen Kanälen gibt es eigene Union Investment GIFs. Diese basieren auf dem Content-Iconstil. Sie stellen jeweils eine Emotion schnell erfassbar und leicht überspitzt dar.
Bitte wenden Sie sich für die Erstellung neuer Icons an unser Corporate-Design-Team .
Vorheriges Kapitel Bildwelt Nächstes Kapitel Iconbibliothek
