Icons & Piktogramme

Icons nutzen wir, um Gestaltung aufzulockern und Orientierung zu geben. Im DEVK-Corporate Design gibt es verschiedene Arten von Piktogrammen mit unterschiedlichen Funktionen.

Weiter

Das Wichtigste in Kürze

Funktionale Icons und illustrative Piktogramme

Wir unterscheiden zwischen funktionalen Icons und illustrativen Piktogrammen. Funktionale Icons verwenden wir nur für Interfaces. Illustrative Piktogramme hingegen bebildern die Themen und lockern Texte auf.

Für unsere App Icons nutzen wir die funktionalen Icons.

Funktionale Icons

Funktionale Icons setzen wir nur für Interfaces ein, beispielsweise für Login- und Kontaktfunktionen. Wir verwenden sie nicht als Illustration.

Quadratische Grundform, Zeichenfläche 24 x 24 px

Motive sind immer mittig ausgerichtet und haben einen Randabstand von 2 px

Konstruktion

Stil	Alle Piktogramme sind aus Outlines (Konturen) aufgebaut. Flächige Piktogramme verwenden wir nicht.
Strichstärke	2 px
Ecken	Rechtwinklige Ecken erhalten eine Rundung mit einem 0,5 Rasterfeld (digital 1 px) Radius.

Illustrative Piktogramme

Illustrative Piktogramme begleiten Themen bildlich und lockern Texte auf. Wir setzen sie größer ein als funktionale Icons und geben ihnen meist ein annähernd quadratisches Format. Sie sind etwas komplexer als funktionale Icons. Für sehr kleine Abbildungen im Rahmen von interaktiven Interface-Elementen sind sie daher nicht geeignet.

Das Kernmotiv befindet sich in einem inneren Bereich von 30x30, damit ausreichend Randabstand vorhanden ist.

Einzelne Teile des Motivs dürfen in diese Schutzzone ragen, aber nicht den äußeren Rand (1 RF Stärke) berühren. Das könnte zu Darstellungsproblemen im Layout führen.

Wir teilen die Grundform in 40 Spalten und 40 Zeilen. Im Digitalen entspricht ein Rasterfeld 2 Pixeln. Daraus ergibt sich ein Raster von 40 x 40 Rasterfeldern.

Konstruktion

Das Medium bestimmt die Einsatzgröße. In digitalen Medien ist die Grundform gewöhnlich 80x80 Pixel groß.

Stil	Alle Piktogramme sind aus Outlines (Konturen) aufgebaut. Flächige Piktogramme verwenden wir nicht.
Strichstärke	1 Rasterfeld (digital = 2 px) mit rundem Abschluss
Stilelement Lücke	Um den illustrativen Piktogrammen eine leichte und dynamische Anmutung zu geben, öffnen wir die Kontur an passenden Stellen. Diese Lücke ist aber nie größer als zwei Rasterfelder.
Ecken und Enden	Rechtwinklige Ecken bekommen eine Rundung mit einem 0,5 Rasterfeld (digital 1 px) Radius.