Design Systems

Wächst ein Produkt, wächst auch die Inkonsistenz: Buttons, die nicht zusammenpassen, drei Versionen derselben Komponente. Ein Designsystem löst das Problem an der Wurzel. Bibliotheken, Patterns und Guidelines halten jeden Screen konsistent und machen jedes Team schneller.

Umrissenes Sechseck-Symbol mit einem Grün-zu-Gelb-Farbverlauf, Teil eines Sets geometrischer Marken-Icons.

VERTRAUT VON ENGINEERING-TEAMS BEI:

  • Deutsche Telekom Logo: weißer stilisierter Buchstabe T auf einem Magenta-Hintergrund
  • Uniper-Logo in Blau, das Wort „uniper" auf zwei Zeilen aufgeteilt.
  • GOLDBECK-Logo in fetten schwarzen Großbuchstaben auf weißem Hintergrund
  • PwC-Logo mit den Kleinbuchstaben „pwc" in Schwarz und zwei orangefarbenen diagonalen Formen darüber
  • Vattenfall-Logo mit dem Namen in dunkelgrauen fetten Buchstaben und einem Kreis, der in eine gelbe obere Hälfte und eine blaue untere Hälfte geteilt ist, auf der rechten Seite
  • Schwarz-produktion-Logo auf weißem Hintergrund mit dem Schriftzug „SCHWARZ PRODUKTION" in weißer Schrift in einem dunkelblauem Quadrat.
  • Cornelsen Logo — weißes, fettes Wortmarke auf rotem Hintergrund
  • Meridiam-Logo mit dem Slogan „for people and the planet" in Dunkelgrün auf weißem Hintergrund.

Einmal erstellen, überall wiederverwenden

Wiederverwendbare Komponenten sind das Herzstück eines Design Systems. Wir erstellen UI-Bibliotheken aus fertigen Bausteinen und dokumentieren die Interaktionsmuster dahinter, damit Teams aufhören, dieselben Dinge neu zu bauen, und das Produkt von Screen zu Screen konsistent bleibt. Die Designgeschwindigkeit steigt, und es gibt weit weniger Inkonsistenzen, denen man später nachspüren muss.

Zwei Männer in passenden dunklen Hoodies, die sitzend mit einem dritten Kollegen sprechen, vor einer Wand, die mit Fotos im Collage-Stil bedeckt ist.

Ihre Marke, in jeder Ecke konsistent

Ihre Identität sollte sich in einer kundenseitigen App genauso anfühlen wie in einem internen Tool. Wir definieren klare Guidelines für Farbe, Typografie, Bildsprache und Tonalität sowie Style Guides, die Standards für Komponenten und Interaktionen festlegen. Alle – von Designern bis zu Entwicklern – arbeiten nach denselben Regeln, sodass nichts aus dem Ruder läuft.

Mann in einem dunklen Pullover lächelt in die Kamera während eines Meetings, mit Laptop-Bildschirmen und zwei Kollegen im Vordergrund.

Barrierefreiheit, von Anfang an eingebaut

Barrierefreiheit ist mittlerweile eine gesetzliche Anforderung nach BFSG und WCAG, und sie gehört von Beginn an ins System. Wir integrieren die Konformität direkt in die Komponenten und Guidelines, sodass diese die Anforderungen von Haus aus erfüllen. Jedes auf dem System aufgebaute Produkt ist damit für mehr Menschen nutzbar und abgesichert gegenüber Regelungen, die nun EU-weit gelten.

Mann in einem weißen T-Shirt, der lächelnd an einem Holzschreibtisch auf einem Laptop tippt, während zwei weitere Kollegen im Hintergrund in der Nähe eines großen Fensters ebenfalls auf Laptops arbeiten.

So läuft die Zusammenarbeit mit uns ab

  1. Schritt 01

    Erstes Anforderungsgespräch

    Wir sehen uns Ihre bestehenden Produkte und die Teams an, die das System nutzen werden.

  2. Schritt 02

    Audit und Bestandsaufnahme

    Wir prüfen, was Sie bereits haben, und katalogisieren Ihre bestehenden Komponenten sowie die Stellen, an denen sie auseinanderdriften.

  3. Schritt 03

    Foundations und Komponenten

    Wir definieren die grundlegenden Tokens wie Farbe, Typografie, Abstände und Grid und bauen darauf die wiederverwendbaren Komponenten und Patterns auf und dokumentieren sie.

  4. Schritt 04

    Rollout und Übergabe

    Wir übergeben ein lebendiges System, das Ihre Designer und Entwickler verwenden und erweitern können.

Absolut empfehlenswert!! Wir haben mit 8-reasons unsere „in die Jahre gekommene“ Onlineplattform auf links gedreht und ein komplett neues UI‑UX‑Design entworfen. Nach einer intensiven Ist‑Aufnahme, einer großen Onlineumfrage und persönlichen Kundeninterviews haben wir zusammen mit 8-reasons jeden Stein umgedreht. Dabei hat mich am meisten beeindruckt, wie gut ihr komplexe Prozesse und Produkte greifen könnt und diese dann in einfache und userfreundliche Flows umsetzt. Unsere Plattform hat an Leichtigkeit gewonnen, viele Prozesse sind nun schlanker und übersichtlicher und nicht zu vergessen das Gesamtbild ist jetzt optisch ansprechender und harmonisch. Wir haben sehr gutes Feedback von unseren Kunden und Kollegen erhalten und genießen den Vorteil, dass vieles nun einfach und selbsterklärend funktioniert. Alex von 8-reasons wird heute weiterhin bei Neu- und Weiterentwicklungen für unsere Onlineplattform Uniper Digital zu Rate gezogen und ich freue mich immer über seine Ideen und Designs! Danke!
Uniper-Logo in Weiß auf blauem HintergrundMareike SchröterDigital Sales Project Manager · Uniper SE

Ein System, jeder Bildschirm.

Zeigen Sie uns, wo Ihr Produkt inkonsistent geworden ist, und wir bauen das System, das es konsistent hält.