User Interface Design

Oberflächen, die Orientierung geben

CPS gestaltet Benutzeroberflächen für Websites, Portale und Webanwendungen. Visuell präzise, barrierefrei gedacht und als modulares System entwickelt, das sich zuverlässig umsetzen und langfristig erweitern lässt.

UI-Design-Projekt besprechen

Gutes UI Design macht Nutzung verständlich

Eine Benutzeroberfläche vermittelt mehr als das Erscheinungsbild einer Organisation. Sie zeigt, welche Inhalte wichtig sind, welche Elemente bedienbar sind und wie Menschen durch ein digitales Angebot geführt werden.

Gestaltung, Funktionen und Inhalte müssen dafür eine gemeinsame Sprache sprechen. Farben, Typografie, Abstände und visuelle Hierarchien schaffen Orientierung. Wiederkehrende Komponenten sorgen dafür, dass die Bedienung auch auf umfangreichen Websites konsistent bleibt.

CPS entwickelt User Interfaces auf Grundlage der zuvor erarbeiteten UX-Struktur. Das Design unterstützt die Nutzung, berücksichtigt das Corporate Design und bleibt technisch realisierbar.

Leistungen im UI Design

UI-Design-Leistungen von CPS

Wir gestalten neue digitale Angebote und modernisieren bestehende Benutzeroberflächen. Je nach Ausgangslage übernehmen wir:

  • visuelle Gestaltung von Websites und Portalen
  • UI Design für komplexe Webanwendungen
  • digitale Übersetzung vorhandener Corporate Designs
  • Modernisierung bestehender Benutzeroberflächen
  • responsive Gestaltung für unterschiedliche Endgeräte
  • Entwicklung von Designsystemen
  • Aufbau von Komponentenbibliotheken
  • interaktive Prototypen
  • Begleitung der Frontend-Umsetzung

Der Umfang richtet sich nach dem Projekt. Eine einzelne Website benötigt ein anderes Gestaltungssystem als eine Plattform mit mehreren Auftritten, Fachbereichen und redaktionellen Teams.

Vom Corporate Design zum digitalen Auftritt

Ein bestehendes Corporate Design enthält häufig Vorgaben zu Logo, Farben, Schriften und Bildsprache. Damit ist jedoch noch nicht festgelegt, wie Navigationen, Formulare, Teaser oder interaktive Anwendungen funktionieren und aussehen sollen.

CPS überträgt die Markenidentität in ein digitales Gestaltungssystem. Wir entwickeln Regeln für Flächen, Typografie, Abstände, Icons, Interaktionen und wiederkehrende Komponenten. Dabei prüfen wir, welche vorhandenen Vorgaben für digitale Anwendungen geeignet sind und wo Ergänzungen – besonders in Hinblick auf Barrierefreiheit und Funktionalität – notwendig werden.

So entsteht kein vom Corporate Design losgelöster Webauftritt, sondern dessen funktionale Weiterentwicklung für digitale Nutzungssituationen.

So entwickelt CPS ein User Interface

UX als Grundlage

Informationsarchitektur, Nutzungsszenarien und Wireframes bilden den Ausgangspunkt. Dadurch ist vor der visuellen Ausarbeitung geklärt, welche Inhalte und Funktionen eine Seite benötigt und wie sie angeordnet werden sollen.

UI Design übernimmt diese Struktur und macht Prioritäten, Zusammenhänge und Bedienmöglichkeiten visuell erkennbar.

Designfindung mit Styletiles

Für die visuelle Richtung entwickeln wir Styletiles. Sie zeigen zentrale Gestaltungselemente wie Farben, Schriften, Buttons, Flächen, Bildsprache und ausgewählte Komponenten, ohne bereits vollständige Seiten zu entwerfen.

Unterschiedliche Richtungen lassen sich damit auch ohne Fachwissen früh vergleichen und gemeinsam bewerten. Hier reicht sogar schon das Bauchgefühl, um Entscheidungen zu treffen. Nach der Abstimmung dient der Styletile als gestalterische Grundlage für die weitere Ausarbeitung.

Seitendesigns für relevante Ansichten

Anschließend gestalten wir zentrale Seitenansichten und Nutzungssituationen. Dabei betrachten wir unterschiedliche Inhaltsmengen, Seitentypen, Templates und Bildschirmgrößen.

Nicht jede Ansicht wird als starres Einzelbild entwickelt. Entscheidend ist ein belastbares System, aus dem sich weitere Seiten konsistent ableiten lassen. Dies ist für die spätere Umsetzung im CMS und die Redaktion von großem Vorteil.

Responsive Design

Benutzeroberflächen müssen auf großen Bildschirmen ebenso funktionieren wie auf Tablets und Smartphones. Dafür reicht es nicht, ein Desktop-Layout lediglich zu verkleinern. Auch gedanklich arbeiten wir vom Smartphone als Grundlage und Ausgang im Design mobile-first.

Wir legen fest, wie sich Raster, Navigationen, Inhalte und Bedienelemente bei unterschiedlichen Bildschirmgrößen verändern. Die Reihenfolge und Gewichtung der Inhalte bleiben dabei verständlich.

Interaktive Prototypen

Prototypen machen zentrale Abläufe und Interaktionen vor der Programmierung erlebbar. Menüs, Dialoge, Formulare oder mehrstufige Prozesse können früh geprüft und mit den Projektbeteiligten abgestimmt werden.

So lassen sich offene Fragen beantworten, bevor die technische Umsetzung beginnt.

System, Barrierefreiheit und Umsetzung

Modulare Gestaltung in Design-Systemen

CPS entwickelt Benutzeroberflächen als System wiederverwendbarer Bestandteile. Nach dem Prinzip des Atomic Design entstehen aus grundlegenden Elementen wie Farben, Typografie und Schaltflächen größere Komponenten und vollständige Seitenbereiche. Diese werden im Rahmen der Weiterentwicklung des Corporate Design in ein digitales Design-System überführt.

Eine solche Komponentenbibliothek schafft Konsistenz und erleichtert die spätere Erweiterung. Neue Seiten müssen nicht jedes Mal neu gestaltet werden. Redaktionen können vorhandene Bausteine in den vorgesehenen Kombinationen einsetzen. Die definierten Variablen und Token können direkt in der technischen Umsetzung übernommen werden.

Das ist besonders relevant für:

  • umfangreiche Websites und Portale
  • Multisite-Systeme
  • unterschiedliche Fachbereiche und Redaktionen
  • mehrere Marken oder Organisationseinheiten
  • digitale Angebote mit langfristiger Weiterentwicklung
  • dynamisch generierte Inhalts-Bereiche mittels künstlicher Intelligenz

Gestaltungsregeln, Varianten und Zustände werden nachvollziehbar dokumentiert.

Barrierefreiheit im UI Design

Barrierefreiheit beginnt zwar bereits vor der Gestaltung, wird hier allerdings wortwörtlich sichtbar. Kontraste, Schriftgrößen, Abstände, Klickflächen, Fokuszustände und die visuelle Kennzeichnung von Funktionen beeinflussen, ob eine Oberfläche zugänglich bedient werden kann.

CPS berücksichtigt unter anderem:

  • ausreichende Farbkontraste nach WCAG
  • erkennbar ausgezeichnete Links und Bedienelemente
  • sichtbare Tastaturfokusse
  • verständliche Formularzustände
  • klare Fehlermeldungen
  • lesbare und skalierbare Typografie
  • sichere Bedienung bei vergrößerter Darstellung
  • Alternativen zu rein farblicher Kennzeichnung

Unser Accessibility-Team arbeitet dazu direkt mit UI Design und Frontend-Entwicklung zusammen. Anforderungen werden während der Gestaltung geklärt und nicht erst nach der technischen Umsetzung geprüft.

Design und Entwicklung im direkten Austausch

Ein Entwurf ist nur dann wertvoll, wenn er zuverlässig umgesetzt werden kann. Deshalb arbeiten UI, UX und Entwicklung bei CPS eng zusammen.

Entwickler:innen werden früh einbezogen und bewerten technische Abhängigkeiten. Das Designteam begleitet die Frontend-Umsetzung, beantwortet Detailfragen und prüft, ob Komponenten wie vorgesehen realisiert werden.

Durch diesen Austausch vermeiden wir Entwürfe, die im Projektverlauf stark vereinfacht oder vollständig neu gedacht werden müssen. Das entwickelte Design bleibt gestalterisch anspruchsvoll und technisch belastbar.

UI Design für komplexe Projekte

UI Design für komplexe Webangebote

CPS verfügt über langjährige Erfahrung mit umfangreichen Websites für Ministerien, öffentliche Institutionen, Kammern, Verbände und Unternehmen.

Solche Angebote enthalten viele Seitentypen, Funktionen und redaktionelle Anforderungen. Das User Interface muss diese Vielfalt abbilden, ohne unruhig oder beliebig zu wirken.

Wir entwickeln dafür klare gestalterische Regeln und flexible Komponenten. Redaktionen erhalten ausreichend Spielraum für unterschiedliche Inhalte, während der Gesamtauftritt konsistent bleibt.

Was CPS auszeichnet

  • UX, UI und Entwicklung arbeiten in einem Team
  • Designentscheidungen bauen auf UX-Erkenntnissen auf
  • Styletiles schaffen früh Klarheit über die visuelle Richtung
  • Barrierefreiheit wird im Design berücksichtigt
  • Komponenten werden modular und erweiterbar entwickelt
  • redaktionelle Anforderungen fließen in das System ein
  • das Design wird bis in die Frontend-Umsetzung begleitet
  • Erfahrung mit komplexen öffentlichen Webangeboten

So entsteht keine Sammlung schöner Einzelansichten, sondern ein funktionierendes Gestaltungssystem.

User Interface Design im Gesamtprojekt

Abhängig vom Vorhaben arbeitet das UI-Team mit weiteren CPS-Leistungsbereichen zusammen:

  • User Experience
  • Barrierefreie Webentwicklung
  • TYPO3 Website-Entwicklung
  • Qualitätssicherung
  • Website-Betreuung
  • KI-Kreis

Die Leistungen werden auf eigenen Seiten erläutert und im Projekt passend miteinander verbunden.

Sie planen ein neues User Interface?

Ob neue Website, Relaunch oder Modernisierung einer bestehenden Anwendung: Wir entwickeln eine Benutzeroberfläche, die zu Ihrer Marke, Ihren Inhalten und den Aufgaben der Nutzenden passt.

User Interface mit CPS gestalten

Häufige Fragen zu User Experience FAQ

Was ist User Interface Design?

User Interface Design gestaltet die sichtbaren und bedienbaren Bestandteile einer Website oder Anwendung. Dazu gehören Typografie, Farben, Flächen, Navigationen, Formulare und interaktive Komponenten.

Was ist der Unterschied zwischen UX und UI?

UX entwickelt Strukturen, Abläufe und Nutzungskonzepte. UI übersetzt diese Grundlagen in eine visuelle Benutzeroberfläche. Beide Disziplinen arbeiten bei CPS direkt zusammen.

Was sind Styletiles?

Styletiles zeigen eine visuelle Gestaltungsrichtung anhand ausgewählter Farben, Schriften, Flächen und Komponenten. Sie ermöglichen eine frühe Abstimmung, bevor vollständige Seiten gestaltet werden.

Was ist ein Design-System?

Ein Design-System verbindet Gestaltungsregeln, Komponenten und Dokumentation. Es sorgt dafür, dass digitale Oberflächen konsistent gestaltet und später kontrolliert erweitert werden können.

Gestaltet CPS responsive Benutzeroberflächen?

Ja. CPS entwickelt Benutzeroberflächen immer für unterschiedliche Bildschirmgrößen und Bedienkontexte. Inhalte und Funktionen werden nicht nur verkleinert, sondern mobile-first passend angeordnet und priorisiert.

Berücksichtigt CPS Barrierefreiheit im Design?

Ja. Kontraste, Fokusdarstellung, Typografie und Bedienelemente werden bereits während der Gestaltung auf barrierefreie Nutzung ausgerichtet.

Begleitet CPS auch die technische Umsetzung?

Ja. Das UI-Team stimmt sich direkt mit der Frontend-Entwicklung ab und begleitet die Umsetzung der entworfenen Komponenten.