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.

Anwendungsbeispiele

Anwendungsprinzipien

System-Icons und Content-Icons

Content-Icons

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

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.

Zur Iconbibliothek

Charakteristik

Jedes Icon, das Sie für Union Investment entwickeln, folgt einer identischen Charakteristik:

  • Es ist aus Konturen aufgebaut, nicht aus Flächen
  • Es nutzt UI-Blau als Farbe, außerdem können Sie bei Content Icons zusätzlich UI-Grün verwenden.   
  • Es verbindet runde und eckige Elemente

Rastersystem

Jedes Icon basiert auf einem identischen Raster:

  • Rastergröße: 72 x 72 px
  • Strichstärke
    Content-Icons: 4 px
    System-Icons: 6 px
  • Mindestgröße
    Content-Icons: 36 px
    System-Icons: 24 px

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.

  • Quadratische Icons wahren einen umlaufenden Rand von 4 px.
  • Runde Icons wahren einen umlaufenden Rand von 2 px.
  • Schmale Icons nutzen die gesamte Rasterhöhe.
  • Flache Icons nutzen die gesamte Rasterbreite.

Größe und Platzierung

Sie können Icons frei platzieren. Stehen sie in Abhängigkeit zu Textinhalten, so empfehlen wir Ihnen die folgenden Größenverhältnisse:

  • Die Größe von Content-Icons entspricht der 1,5-fachen Höhe der Überschrift.
  • Die Größe der System-Icons entspricht der mit ihnen in Relation stehenden Schriftgröße.

Animation von Icons

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 Art und die Abfolge der Animation richtet sich individuell nach dem zu animierenden Inhalt. 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:

Animation der Wachstums-Bewegung

Animation des Strahl-Effekts

Animation der Stapelung und der Kreis-Bewegung