< Zurück zu Projekte

sclable
Unser Designsystem-Ansatz

Mit wiederverwendbaren, individuell anpassbaren Komponenten rasch zur perfekten Kundenlösung.
#UxUiDesign#ServiceDesign#CustomSoftware
Sektor

Diverse

Kunde

Diverse

Services

Service Design,
UX & UI Design,
Individualsoftware-Entwicklung

Anstatt bei null anzufangen, wird über das Designsystem direkt auf Erfahrungswerte zugegriffen und Bestehendes optimiert, um Zeit und Kosten zu sparen.

Am Beispiel eines personalisierten Gesundheitsportals zeigen wir, wie unser Designsystem aufgebaut ist und es uns über den Einsatz von Schlüsselkomponenten ermöglicht, in kurzer Zeit individuelle und zugleich optimierte Lösungen für unsere Kund:innen zu entwickeln.

Designmodule geräteübergreifend angezeigt

Designmodule können geräteübergreifend angezeigt werden.

Wie funktioniert ein Designsystem?

Ein gutes UI-Design-System ermöglicht es Teams, effizient zu arbeiten, konsistente Benutzererlebnisse zu schaffen und schneller auf sich ändernde Anforderungen zu reagieren.

Ein Designsystem ist wie ein Baukastensystem, nur besser: Es ist eine Methode, die es ermöglicht, über den Einsatz vorgefertigter, aber individuell adaptierbarer Schlüsselkomponenten Zeit zu gewinnen und kostenschonend ein optimiertes Endprodukt zu gestalten.

Wir haben mit unserer Erfahrung aus unzähligen Projekten unser eigenes, neutrales Basis-Designsystem entwickelt, das sich aus unterschiedlichen Komponenten zusammensetzt. Diese lassen sich ganz einfach an das jeweilige Branding, die Bedürfnisse unserer Kund:innen bzw. deren Endkund:innen und den konkreten Anwendungsfall anpassen.

CI-Richtlinien von Kunden plus Basis Design Module ergeben die Endmodule für die Anwendung

CI-Richtlinien von Kunden plus Basis Design Module ergeben die Endmodule für die Anwendung

„Ein gut durchdachtes Designsystem besitzt die Fähigkeit, Entscheidungen zu beeinflussen, Wahrnehmungen zu formen und Verhalten zu steuern. Es ist nicht nur ein Werkzeug für design-heavy B2C-Marken, sondern wird auch im B2B-Bereich zu einem strategischen Vorteil. Durch Konsistenz und Klarheit befähigt ein starkes Designsystem Nutzer, klügere Entscheidungen zu treffen, reduziert Betriebskosten und steigert die Effizienz. Im Wesentlichen ist es das Rückgrat, das Komplexität in Einfachheit verwandelt und messbaren Geschäftserfolg liefert."

Michaela Holzmann
Director of Product & Service Design, sclable

Die größten Vorteile eines Designsystems

Aufbau auf bestehender Basis

Projekte starten nicht bei null, es werden Zeit und Kosten gespart – sowohl in der Entwicklung als auch beim Testen.

Alles im Look der eigenen Marke

Die neutrale Optik lässt sich in kürzester Zeit an das Unternehmens- oder Produkt-Branding anpassen.

Zeitgleiches Arbeiten

Durch das parallele (Zusammen-)Arbeiten von Design- und Entwicklungsteams lässt sich die Zeit bis zum Go-Live nochmals verkürzen.

Erfahrung einfließen lassen

Erfahrungswerte aus unterschiedlichsten Projekte fließen direkt in die Entwicklung und Optimierung neuer Projekte mit ein.

Kund:innen fühlen sich „zuhause“

Die flexible Verwendung der Komponenten garantiert eine zielgruppengerechte UI, egal in welcher Branche.

Leicht zu bedienen

Einheitliche, wiederkehrende Elemente sorgen für eine leichte Bedienbarkeit – User:innen lernen schnell, wie sie am besten womit interagieren.

Echte Barrierefreiheit

Eigens entwickelte visuelle Elemente und Standards von Textgröße bis Kontrast stellen echte Barrierefreiheit sicher.

Immer auf dem neuesten Stand

Ein gut durchdachtes Designsystem wie unseres ist dynamisch – es wird kontinuierlich weiterentwickelt, um sich den Bedürfnissen der Kund:innen und dem technologischen Fortschritt anzupassen.

Paradebeispiel:
Ein Gesundheitsportal

Das Ziel: Persönliche Daten und Körpermesswerte für Nutzer:innen in einem Portal übersichtlich und leicht verständlich darzustellen – und zwar auf allen möglichen Geräten (in responsivem Design). Und zwar so, dass kein medizinisches Vorwissen nötig ist, um Grafiken und Darstellungen zu interpretieren.

Überprüfung des Kontrastverhältnisses zwischen Text und Hintergrund für Barrierefreiheit

Überprüfung des Kontrastverhältnisses zwischen Text und Hintergrund für Barrierefreiheit.

Gelungen ist all das innerhalb kurzer Zeit dank unseres Designsystems: Farben, Schrift, Icons, Designelemente und Logo des Unternehmens werden einmal angelegt und direkt überall umgesetzt. Bereits vorhandene Komponenten müssen nur angepasst und passend angeordnet werden, außerdem ist alles barrierefrei gestaltet. Und: Die detaillierte Dokumentation ermöglicht eine schnelle, reibungslose Zusammenarbeit zwischen Design- und Entwicklungsteams.

Kernkomponenten des Healthcare-Designsystems
Grundlegende Layout-Struktur
Anpassungen für Desktop- und Tablet-Layouts
Designvariationen für mobile Geräte und Wearables

Die vier Schlüsselkomponenten

Design-Grundlagen

Dazu zählen Farbsysteme, Typografie, Abstände & Raster und Ikonografie.

UI-Komponenten

Alles von Buttons über Formular- und Navigationselemente bis hin zu Text- und Bild-Containern, Pop-ups und Dialogboxen.

Interaktionsmuster

Hier dreht sich alles um die Darstellung der Elemente, je nachdem, welche Kriterien erfüllt sind oder was die User:innen machen. Auch Responsivität (Mobile, Tablet, Desktop) und Barrierefreiheit fallen in diese Kategorie.

Dokumentation und Richtlinien

In Styleguides, UI-Komponentenkatalog und Content Guidelines zu Tonalität und sprachlicher Gestaltung wird alles festgehalten und dokumentiert.

Durch die Verwendung unseres Designsystems können wir eine schnellere Bereitstellung, Markenkonsistenz und erstklassige Benutzererlebnisse für alle Geräte und Sektoren gewährleisten.

Quelle anatomisches Bild: freepik.de

Nächstes Projekt: Zur Rose Loslegen