Icons sind grafische Symbole, die ein schnelles Erfassen von Informationen ermöglichen. Insbesondere auf digitalen Benutzeroberflächen schaffen sie Orientierung und tragen neben Logo, Farbe und Schrift zum markentypischen Auftritt der DFS bei.
Wir unterscheiden zwischen Funktions-Icons und Content-Icons. Funktions-Icons werden vorrangig als Navigationselemente im User Interface genutzt. Sie sind linear konstruiert und in ihrer Form reduziert. Content-Icons werden verwendet, um Inhalte zu kommunizieren. Sie sind illustrativer aufgebaut als Funktions-Icons. Sie sind ebenfalls linear aufgebaut und integrieren in einer abstrahierten Form den markenprägenden Running Stripe.
Die Funktions-Icons werden auf Basis einer 28 x 28 px großen Zeichenfläche mit einem umlaufenden Schutzraum von 2 px erstellt. Die Icons werden linear mit einer Konturstärke von 2 px gezeichnet und orientieren sich an einer der vier Primärfiguren. Diese bestehen aus einem Quadrat, einem Kreis sowie einem Rechteck in horizontaler und vertikaler Ausrichtung. Diagonalen orientieren sich an 15-Grad-Abstufungen. Offene Enden werden nach Möglichkeit gekappt.
Content-Icons werden auf Basis einer 52 x 52 px großen Zeichenfläche mit einem umlaufenden Schutzraum von 2 px erstellt. Die Icons werden linear mit einer Konturstärke von 2 px gezeichnet und orientieren sich an einer der vier Primärfiguren. Diese bestehen aus einem Quadrat, einem Kreis sowie einem Rechteck in horizontaler und vertikaler Ausrichtung.
Funktions- und Content Icons können auf hellen und dunklen Hintergründen platziert werden. Funktions-Icons haben auf hellen Hintergründen die Farbe DFS-Blue 600. Auf dunklen Hintergründen sind sie weiß.
Content Icons haben die Farbe DFS-Blue 600. Auf dunklen Hintergründen sind sie weiß. Die Diagonale der Icons wird sowohl auf hellen als auch auf dunklen Hintergründen in DFS-Green 400 eingefärbt.
Hinweis: Die Funktions- und Content Icons stehen sowohl in der negativen als auch in der positiven Version zum Download bereit.
Hier stehen die Gestaltungsvorlagen sowie die einsatzbereiten Icons zum Download zur Verfügung. Neben den Funktions- und Content Icons finden Sie auch die Icons, die im DFS-Dashboard eingesetzt werden.
Diagramme helfen, Daten verständlich und auf das Wesentliche reduziert zu kommunizieren. Unsere Diagramme zeichnen sich durch eine klare Formensprache und geometrische Grundformen aus. Die Markentypik entsteht vor allem durch den Einsatz der Primärfarben.
Der Inhalt aller Diagramme sollte stets zusätzlich als Alternativtext hinterlegt werden. Mit einem Rechtsklick auf das Diagramm lässt sich der Punkt „Alternativtext bearbeiten“ im Dialogfeld auswählen. In der Seitenleiste kann nun die Erläuterung zum Diagramm hinterlegt werden. Der Alternativtext lässt sich durch sogenannte Screen Reader auswerten und ermöglicht Menschen mit körperlichen oder kognitiven Einschränkungen den Zugang zu diesen Informationen.
Weiterführende Informationen zum Thema Barrierefreiheit finden sich hier: