UX/UI Design.

UX/UI-Design verbindet zwei Disziplinen: UX-Design plant, wie Nutzer eine Website erleben — Wege, Abläufe und Entscheidungen. UI-Design gestaltet, was sie dabei sehen — Layout, Typografie, Farben und Komponenten. Erst zusammen ergeben beide ein Interface, das funktioniert: Nutzer finden, was sie suchen, und tun, was die Seite erreichen soll.

Bei uns entsteht beides in Figma — auf Basis der Wireframes aus Konzept & Strategie. Am Ende steht kein Ordner voller Bilddateien, sondern ein Design-System: Komponenten, Regeln und maschinenlesbare Tokens, mit denen die Entwicklung direkt weiterarbeitet.

Ein Interface hat einen Job: Besucher sollen in Sekunden verstehen, wo sie sind, was es hier gibt und was der nächste Schritt ist. Schafft das Design das nicht, hilft auch die schönste Optik nichts — Nutzer springen ab, bevor sie dein Angebot gesehen haben.

Deshalb gestalten wir vom Nutzer aus, nicht vom Logo. Jede Seite hat eine klare Hierarchie, jeder Weg einen nächsten Schritt, jedes Formular so wenige Felder wie möglich. Und weil das Interface als System entsteht, bleibt es konsistent — auf der fünften Unterseite genauso wie auf der fünfzigsten.

Der klassische Weg von Design zu Code ist ein Übersetzungsfehler mit Ansage: Der Designer liefert einen PDF-Styleguide, der Entwickler misst Abstände nach, und drei Monate später stimmen Farben und Schriftgrößen nirgends mehr überein. Wir haben diesen Schritt abgeschafft.

Bei uns lebt jede Gestaltungsentscheidung als Design-Token in einer strukturierten Datei. Aus tokens.json generieren wir per Build die CSS-Variablen, mit denen die Entwicklung baut. Ändert sich die Markenfarbe, ändert sich eine Zeile — und die ganze Website zieht nach. Auch unsere KI-gestützte Entwicklung mit Copilot, Cursor und Claude arbeitet direkt auf den Tokens: Die Werkzeuge lesen maschinenlesbare Regeln, statt Screenshots zu interpretieren. Mehr dazu im Stack.

Barrierefreiheit lässt sich nicht nachträglich in fertige Screens patchen — sie wird im Design entschieden. Zu geringe Kontraste, zu kleine Touch-Ziele und unsichtbare Fokus-Zustände sind Gestaltungsfehler, keine Entwicklungsfehler. Deshalb legen wir sie dort ab, wo sie entstehen: in den Tokens und Komponenten.

Konkret heißt das: Textkontraste von mindestens 4,5:1, Touch-Ziele nach WCAG 2.2, sichtbare Fokus-Ringe für die Tastaturbedienung und Schriftgrößen, die skalieren. Seit Juni 2025 verlangt das BFSG barrierefreie Websites für viele Unternehmen ohnehin — wir bauen es von Anfang an ein, statt später nachzurüsten. Wie wir das technisch prüfen, steht unter Barrierefreiheit.