Piktogramme
Die R+V-Piktogramme sind auf die Formsprache des Designsystems angepasst. Sie greifen die runden, organischen Formen der Schrift auf und spielen mit überraschenden Ecken und Kanten. So entsteht eine eigenständige Formsprache.
Die R+V-Piktogramme existieren in zwei Versionen – als Konturversion und mit einem Versatz. Dadurch können sie unterschiedliche Einsatzmöglichkeiten in der Gestaltung haben. Als funktionales Element unterstützen die Piktogramme wichtige Inhalte. Mit Versatz ziehen sie besonders in digitalen Touchpoints besonders viel Aufmerksamkeit auf sich und betonen Möglichkeiten zur Interaktion. Die Varianten mit Versatz sollten plakativ verwendet werden: in einer angemessenen Größe und geringer Anzahl.
Farbversionen und Anwendung
Informative Kommunikation
Die R+V-Piktogramme dienen der funktionalen Unterstützung wichtiger Inhalte. Sie werden primär als Konturen abgebildet und verwendet. Dies dient zum einen dem bestmöglichen Kontrast und zum anderen der Klarheit in der Darstellung komplexer Inhalte.
Unsere Piktogramme sollen auf informativer Ebene vorwiegend ohne Versatz genutzt werden, um Informationen sachlich zu unterstützen und den Blick zu leiten, ohne zu überfrachten.
Wenn das Piktogramm mit einem aktivierenden Element in Bezug steht – beispielsweise einem CTA-Button oder Störer –, kann es mit der Farbe Mint unterlegt werden. Es ist darauf zu achten, dass in diesem Fall kein weiteres das Auge lenkendes Element in der Nähe steht, da das Piktogramm sonst in Konkurrenz dazu tritt.
Um Inhalte sinnvoll hervorzuheben, sollen auch auf Websites, mobilen Anwendungen und in den sozialen Medien nur statische Piktogramme ohne Versatz platziert werden.
Plakative Kommunikation
Die Piktogramme mit dem farbigen Versatz werden nur sparsam verwendet. Sie sind sehr plakativ und lenken dadurch auch den Blick der Betrachtenden stark auf sich. Deshalb dürfen sie nur in reduzierter Anzahl und ausreichender Größe verwendet werden. Digital dürfen die Piktogramme die mintfarben Interaktionselemente nicht stören, um die Nutzerführung nicht zu gefährden.
Auf großflächigen Formaten und großzügigen dunkelblauen Flächen können die Piktogramme ein plakativer Blickfang sein.
Don`ts
Keine perspektivische Verzerrung
Keine unterschiedlichen Strichstärken
Keine anderen Farben als die für Piktogramme definierten
Versatz nur diagonal nach unten
Kein Versatz bei Icons aus dem Iconfont
Keine unterschiedlichen Farben innerhalb eines Themenbereiches
Piktogramme dürfen nicht miteinander kombiniert werden. Hierfür ist eine Icon-Neugestaltung notwendig.
Gestaltung von Piktogrammen
Formaler Aufbau
Spannender Mix aus Kanten und Rundungen
Leichter Abstraktionsgrad
Kleine Zwischenräume werden gefüllt
Die R+V-Piktogrammwelt ist erweiterbar. Sollte sich für einen Anwendungsfall kein geeignetes Piktogramm finden, können gemäß der oben beschriebenen Formsprache und folgender wichtiger Grundvoraussetzungen auch neue Piktogramme gestaltet werden.
 |
Arbeitsfläche: 510 px |
 |
Platzierung des Piktogramms im Zentrum der Arbeitsfläche |
 |
Schutzzone: 50 px |
 |
Versatz in Mint bzw. Grün |
 |
Transparente Kontur im Format der Zeichenfläche, damit alle Piktogramme das gleiche Ausgangsformat haben |
 |
Gegenläufige Verschiebung von Kontur und Versatz um 15 px diagonal vom Zentrum der Arbeitsfläche ausgehend |
 |
Konturstärke des Piktogramms: 16,5 px |
Ebenenstruktur animierter Piktogramme (SVG)
Damit alle Piktogramme global angesteuert werden können, um für individuelle Situationen aufbereitet zu werden, gibt es einige Parameter, die neben dem immer gleichbleibenden Versatz bei der Erstellung zu beachten sind. Dafür müssen die Ebenen bei der Erstellung in Adobe Illustrator genau wie folgt benannt werden:
|
Name des Piktogramms |
|
Versatzfläche: pictogram-back |
|
Globale Bezeichnung: ruv-pictogram |
|
Transparente Kontur im Format der Zeichenfläche, damit alle Piktogramme das gleiche Ausgangsformat haben: mask |
|
Zusammengesetzter Pfad der Kontur mit allen Bestandteilen: pictogram-front |
Dateiexport
Die Piktogramme werden als PDF in CMYK für die statische Nutzung in Printmedien und als SVG in RGB sowohl für die statische Nutzung in PowerPoint als auch für die animierte Nutzung in digitalen Anwendungen wie Websites exportiert.
Template zur Erstellung eigener Piktogramme
Alle Voreinstellungen zu Strichstärken, Farben sowie den anzulegenden Ebenen finden Sie in unserem Template.
211213_RUV_Piktogramme_Template.zip
Die Piktogramme werden als PDF in CMYK für die statische Nutzung in Printmedien und als SVG in RGB sowohl für die statische Nutzung in PowerPoint als auch für die animierte Nutzung in digitalen Anwendungen wie Websites exportiert.
Alle Voreinstellungen zu Strichstärken, Farben sowie den anzulegenden Ebenen finden Sie in unserem Template .
Iconfont
Der Iconfont ist eine reduzierte Variante der R+V-Piktogramme. Entwickelt für das perfekte Zusammenspiel mit der R+V-Hausschrift und als für sich stehende Systemicons für digitiale Anwendungen.
Produkte und Zusatzbausteine als Piktogramme
Für die Produkte der R+V und ihre Zusatzbausteine werden fest definierte Piktogramme verwendet. Ziel ist es, übergreifend in allen Medien einheitliche Piktogramme zu verwenden – aus Gründen der Konsistenz und Wiedererkennbarkeit.
Die Piktogramme werden jedoch nicht exklusiv für die jeweiligen Produkte und Zusatzbausteine verwendet, sondern können auch an anderer Stelle zum Einsatz kommen.
Piktogramm für die Hausratversicherung
Piktogramme dürfen auch für andere Inhalte genutzt werden (z. B. für das Thema Feierabend oder schlicht als Sofa).
Die R+V Hausratversicherung ist fest durch das Piktogramm „Sofa“ besetzt und darf nicht anders dargestellt werden.
Downloads
Bis die Piktogrammsuche verfügbar ist, stehen die Piktogrammdaten hier gesamt zur Verfügung.