Figma Library
Erstellung einer Figma Library
In dieser ersten Phase wurde mithilfe des Design-Tools Figma die Design Library erstellt, die als Single Source of Truth für alle zukünftigen Designprojekte bei der ÖGK dienen soll. Diese Datei wird dann mit allen Designprojekten verknüpft sein und somit stets aktuelle Updates zur Verfügung stellen. Mit diesem Vorgehen stllten wir sicher dass das Gesamtbild der digitalen Produkte der ÖGK konsistent bleibt.
Design Foundation
Grundlagen schaffen: Wesentliche Bausteine für ein konsistentes und effizientes Designsystem
In einem Design System beziehen sich Foundations (oder auch “Grundlagen” genannt) auf die grundlegenden Bausteine, die die visuellen und funktionalen Prinzipien festlegen, auf denen das gesamte System basiert. Diese grundlegenden Elemente dienen als Kernkomponenten, die Konsistenz, Kohärenz und Effizienz im gesamten Designprozess gewährleisten. Sie umfassen typischerweise Logo, Typografie, Farben, Abstände und Icons, und sind in die Corporate Guidelines zu lesen.
Design Bausteine
Erstellung von UI-Komponenten für ein konsistentes und verbessertes Nutzererlebnis
Diese Designausteine werden später von Designern als fertige UI Komponente verwendet. Bei der Erstellung einer Komponente wird besonders auf folgende Kriterien geachtet: Name (es soll für alle Team Mitglieder leicht auffindbar sein), Anatomie (woraus besteht die Komponente, insbesondere wichtig ist es für Entwickler die diese Komponente bauen müssen) und Varianten (eine Komponente kann mehrere Variante haben wie zum Beispiel Grösse, mit oder ohne Icon, Farben, usw). Für die ÖGK wurden über 50 Komponente erstellt die dazu beigetragen haben konsistente Screens aufzubauen und die Nutzererfahrung zu verbessern.
Dokumentation
Zentralisierte Komponenten-Dokumentation zur Gewährleistung von Klarheit und Konsistenz im Designteam
Die Dokumentation von Komponenten ist ein zentraler Bestandteil des Designprozesses, insbesondere wenn es darum geht, Designsysteme zu verwalten und sicherzustellen, dass das gesamte Team auf dem gleichen Stand ist. Für dieses Projekt haben wir zentral und innerhalb der Figma Datei die Komponente dokumentiert um die Nutzung, Funktionalität und Variationen der Komponenten klar darzustellen.