EAT SMARTER App-Design-System
Gewährleistung eines einheitlichen Erscheinungsbildes bei einem wachsenden Produktportfolio
Als wir im Jahr 2022 den Auftrag von EAT SMARTER erhielten, das UI/UX-Design der neuen App zu erstellen, zeichnete sich bereits ab, dass zukünftig weitere digitale Produkte ergänzt oder modernisiert werden. Dafür sollten eine Übersicht aller Komponenten sowie ein effizienter Workflow entwickelt werden. Das Ziel war es, über alle Produkte hinweg konsistente Interaktionsmuster und einheitliche Gestaltungselemente sicherzustellen.
Entwicklung eines produktübergreifenden Design Systems
Um eine einzelne Informationsquelle zu etablieren, auf die sowohl Designer:innen und Entwickler:innen als auch Kund:innen zugreifen können, haben wir eine geteilte Bibliothek mit dem kollaborativen Designtool Figma aufgebaut. Darin befinden sich ein Styleguide, der alle Gestaltungsrichtlinien sowie -elemente beinhaltet sowie sämtliche UI-Elemente und Komponenten.
Eingesetze Expertisen
Hierarchischer Aufbau zur Unterstützung der Übersicht und Skalierbarkeit
Das Design-System von EAT SMARTER ist so konzipiert, dass es sowohl bestehende als auch zukünftige Plattformen berücksichtigt. Zunächst wurde ein Brand-System definiert, welches die allgemeinen Vorgaben für alle Produkte der Marke beinhaltet. Dazu gehört in erster Linie ein Styleguide mit allen Farben, der Typografie, Icons und Grafikelementen für alle Anwendungen. Außerdem sind dort UI-Komponenten hinterlegt, die über alle Produkte hinweg verwendet werden, wie zum Beispiel Buttons, Tags oder Formularfelder.
Mit der Gestaltung der App wurde das Design-System durch das App-System erweitert, welches in der Hierarchie unter dem Brand-System liegt. Es beinhaltet hauptsächlich app-spezifische Gestaltungselemente und UI-Komponenten, greift jedoch auch grundlegende Elemente aus dem Brand-System auf und passt sie an die Bedienung mit dem Touchpad auf mobilen Geräten an.
Das Design-System ist erweiterbar, sodass auch weitere Anwendungen in Zukunft hinzugefügt werden können. Innerhalb eines Systems können weitere Teilbereiche definiert werden. Dieser hierarchische Aufbau gewährleistet die Skalierbarkeit des Design-Systems und bietet einen klaren Überblick über die grundlegenden Vorgaben sowie die verschiedenen Teilbereiche.
Variablen für eine schnelle Anpassung von Farben und Formen
Bei komplexeren Projekten wie diesem setzen wir auf die Verwendung von Variablen in Figma. Ähnlich wie in der Programmierung ermöglichen diese die zentrale Verwaltung von Werten wie Farben, Schriftarten und Abmessungen. Wenn sich beispielsweise eine Farbe ändert, die in verschiedenen Elementen verwendet wird, müssen unsere Designer:innen nur die Variable anpassen und alle entsprechenden Instanzen werden automatisch aktualisiert. Dies erleichtert die Aktualisierung und Wartung des Designs sowie die Sicherstellung einer konsistenten visuellen Darstellung über alle Elemente hinweg.
Insbesondere bei größeren Systemen, die verschiedene Darstellungsmodi für denselben Inhalt erfordern, ist die Verwendung von Variablen empfehlenswert. Das kann beispielsweise bei der Implementierung von Light- und Darkmode der Fall sein. Auf diese Weise können Darstellungsvarianten auch zukünftig hinzugefügt werden, ohne dass ein Design neu aufgebaut werden muss, wodurch Zeit gespart werden kann.
EAT SMARTER GmbH & Co. KG
Die Plattform EAT SMARTER ist auf gesunde Ernährung, Rezepte und Ernährungsinformationen spezialisiert. Sie bietet eine breite Palette von Rezepten und Ernährungstipps, die auf verschiedene Bedürfnisse zugeschnitten sind, sowie Informationen zu Nährwerten und Lebensmitteln. Damit ist EAT SMARTER eine wertvolle Ressource für Menschen, die ihr Wissen über gesunde Ernährung erweitern und ausgewogene Mahlzeiten zubereiten möchten.