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.
Kontakt
Digitale Verwaltung - ZHweb
Ist Ihnen etwas aufgefallen? Fehlt etwas? Möchten Sie etwas beitragen? Melden Sie sich bei uns!