Icons

Inhaltsverzeichnis

Hauptkapitel
Designsystem
Unterkapitel
Grundlagen
Gilt für
Websites & Webapplikationen (mit Login)

Darstellung

Die verwendeten Icons sind analog der Formensprache des Logos gestaltet. Das Zusammenspiel aus geometrischen Flächen und Konturlinien wenden wir auch in der Ikonografie an. Das bildet die Grundlage für eine eigenständige Symbolsprache.

Varianten

Wir verwenden nur die Piktogramme aus der Library. Diese können bei Bedarf aus dem Figma-File exportiert werden.

Die Piktogramme können in allen Akzentfarben sowie Schwarz/Weiss angewendet werden (siehe Farben).

Verwendung

Einsatzbereich

Die Piktogramme setzen wir grundsätzlich in Buttons ein. Wir können sie aber auch als illustratives Element anwenden.

Wir setzen Icons sehr reduziert und nur dort ein, wo sie die Aussage der dazugehörigen Information unterstützen.

Icons mit Beschrieb

Icons müssen verständlich sein. In der Regel ergänzen wir Icons zur besseren Verständlichkeit der Funktion mit Text-Labels, damit Nutzende die Bedeutung verstehen.

Ausnahmen bilden allgemein bekannte Piktogramme wie Pfeile zum Blättern oder das Menü-Piktogramm sowie Piktogramme, die zu illustrativen Zwecken verwendet werden.

Der Text wird zentriert zum Piktogramm ausgerichtet.

Einbettung

Piktogramme sind in einer quadratischen Zeichenfläche inklusive Schutzraum eingebettet. Dieses konstante Artboard wird immer als SVG mit exportiert. Dies ermöglicht eine konsistente Handhabung von Abständen und Skalierungen aller Piktogramme via CSS. Die Grösse des Artboards beträgt immer ein Mehrfaches von 8 Pixeln.

Skalierbarkeit und Grösse

Die Grösse der Piktogramme ist je nach Situation und Viewport-Breite flexibel. Sie passt sich zudem der Schriftgrösse an.

Wir verwenden Piktogramme als vektorbasierte Grafiken, um eine optimale Darstellung auf allen Screengrössen zu gewährleisten.

Code

Kontakt

Digitale Verwaltung und E-Government – ZHweb

Ist Ihnen etwas aufgefallen? Fehlt etwas? Möchten Sie etwas beitragen? Melden Sie sich bei uns!

Mehr erfahren