Techniknahe Icons

Audi Icons stellen auf einfache, direkte Art Informationen und Interaktionen dar. Sie orientieren sich in ihrem linearen Stil an technischen Zeichnungen. In der Icon Bibliothek steht für alle Anwendungen eine Vielzahl an freigegebener Icons in zwei Größen zur Verfügung.

Stilistik und Aufbau

Icons bestehen aus so wenigen Elementen wie möglich. Der konstruierte Stil entsteht durch die feine und gleichbleibende Konturstärke von einem Pixel und den Verzicht auf Flächen. Rechte Winkel wechseln sich mit abgerundeten Ecken ab. Icons werden in der Regel in Schwarz oder Weiß eingesetzt.

Verwendung

Jedes Icon ist einem Begriff zugeordnet und wird nur in dessen Kontext verwendet. 

Content Icons stellen Dinge und Sachverhalte dar, z. B. Fahrzeug, Mobiltelefonie, Leistung oder Interieur.
System Icons stellen Systeminteraktionen und Befehle dar, z. B. Speichern, Hinzufügen, Herunterladen oder Abspielen. Alle System Icons sind durch eine umgebende Kreislinie gekennzeichnet.

Die Content Icons verweisen hier auf den Audi Social Media Kanal der entsprechenden Plattform. Die System Icons stellen eine Funktion dar: das Teilen eines Audi Inhalts auf der entsprechenden Plattform. Die Logos und Icons der Plattformen werden als Ausnahme flächig dargestellt.

Verweis auf den Audi Kanal auf der jeweiligen Plattform.
Teilen eines Inhalts auf einer Plattform.

Für die verschiedenen Betriebssysteme gibt es unterschiedliche Icons. Das "Share"-Symbol ist für den generellen Gebrauch bestimmt und wird auch auf iOS verwendet. Ausschließlich für native Android-Anwendungen wird das "share-android" Icon verwendet.

Größe

Alle Icons sind innerhalb einer nicht sichtbaren quadratischen Grundfläche platziert. Sie definiert die jeweilige Icongröße und hilft bei der Platzierung und Ausrichtung.

Wichtig ist eine feine und präzise Wirkung der Icons im Gesamtlayout. Deswegen werden sie bei Bildschirmmedien in Originalgröße eingesetzt und pixelgenau scharf dargestellt. Außerhalb von Bildschirmmedien orientiert sich die Größe an der im Zusammenhang verwendeten Textgröße. Kleine Icons sollten die 1,5 fache Größe des Textes in Pt haben, große Icons die dreifache Größe des Textes in Pt.

Die Icons werden in Orginalgröße auf Bildschirmen pixelgenau dargestellt.
Beispiel für ein ideales Verhältnis von Textgröße zu Icon: Fließtextgröße ist 8 Pt, das kleine Icon dementsprechend 12 Pt und das große Icon 24 Pt groß.

Platzierung und Abstände

Icons stehen bevorzugt links oder rechts neben dem zugehörigen Text. Dabei werden sie zentriert am Text ausgerichtet. Der Mindestabstand zum Text beträgt ¼ der Grundfläche. Werden mehrere Icons nebeneinander platziert, beträgt auch hier der Mindestabstand ¼ der Grundfläche.

Animation

Icons können animiert werden, z. B. um in den Fokus der Aufmerksamkeit gerückt zu werden, um einen Prozess zu illustrieren oder um Feedback auf eine Interaktion zu geben.

Beispiel: Aufmerksamkeit erzeugen durch einfache oder wiederholte Animation von Elementen

Beispiel: Aufbau der Icon-Elemente z. B. als Feedback auf eine Interaktion

Beispiel: Animierter Übergang zwischen zwei Icons

Dont's

Kein Einsatz falscher Icon Varianten
(Größe/ Detailgrad / Freistellung).
Keine markenfremden Icons (falscher Stil).
Icons werden nicht als dekoratives Gestaltungselement verwendet.
Ihr CI-Support
Können wir Ihnen helfen?