UI-Design

UI steht für User Interface, die Benutzeroberfläche. UI-Design legt fest, wie diese Oberfläche aussieht: Farbpalette, Schriften und Größen, Abstände, Form der Knöpfe, Symbole, Zustände wie „aktiv" oder „deaktiviert". Gutes UI-Design ist mehr als Dekoration. Es macht sichtbar, was anklickbar ist, hebt Wichtiges hervor und ordnet Nachrangiges unter. Wenn Nutzer nicht erkennen, welches Element sie bedienen sollen, ist das ein UI-Problem. Ein zentraler Bestandteil moderner Arbeit ist das Designsystem: eine Sammlung wiederverwendbarer Bausteine mit festen Regeln. Statt jede Seite einzeln zu gestalten, entsteht ein Baukasten, aus dem sich neue Ansichten zusammensetzen lassen — das spart bei jedem weiteren Ausbau erheblich Zeit. Ein Beispiel: Ein Versicherungsmakler ließ ein Kundenportal gestalten. Weil von Anfang an ein Designsystem mit definierten Formularelementen entstand, kostete die Ergänzung zweier weiterer Antragsstrecken im Folgejahr nur einen Bruchteil der ersten Runde.

Bei jedem digitalen Produkt mit Oberfläche — Website, App, Portal, internes Werkzeug. Auch dann, wenn ein bestehendes Produkt in die Jahre gekommen ist oder nicht mehr zum Erscheinungsbild des Unternehmens passt. Ein häufiger Anlass ist Wachstum: Wenn mehrere Entwickler unabhängig Ansichten bauen, entstehen ohne gemeinsame Regeln schnell fünf verschiedene Knopfvarianten. Ein Designsystem räumt das auf. Vorsicht bei der Reihenfolge: UI-Design vor dem UX-Konzept zu beauftragen führt zu schönen Oberflächen für falsche Abläufe. Erst Struktur, dann Gestaltung. Warnsignal: Wenn ein Anbieter sofort Farbwelten zeigt, bevor klar ist, welche Aufgaben die Nutzer erledigen sollen.

Stundensätze liegen üblicherweise bei ca. 80 bis 150 Euro. Die Gestaltung einer überschaubaren Anwendung mit acht bis zwölf Ansichten liegt häufig bei ca. 5.000 bis 15.000 Euro. Ein eigenständiges Designsystem mit Komponentenbibliothek und Dokumentation beginnt meist bei ca. 10.000 Euro und rechnet sich ab dem zweiten oder dritten Ausbauschritt. Günstiger wird es, wenn ein vorhandenes Erscheinungsbild mit Farben, Schriften und Logo bereits existiert — dann entfällt die Grundlagenarbeit.

Lass dir Entwürfe in verschiedenen Zuständen zeigen: nicht nur die perfekte Ansicht, sondern auch Fehlermeldungen, leere Listen und lange Texte. Wer nur den Idealfall gestaltet, produziert Probleme für die Entwicklung. Kläre die Übergabe an die Entwicklung. Sind Abstände, Farben und Zustände dokumentiert? Bekommt das Entwicklungsteam nutzbare Dateien oder nur Bilder? Achte auf Barrierefreiheit: Kontraste und Schriftgrößen gehören ins UI-Design, nicht in die Nachbesserung. Und kläre die Nutzungsrechte an den Entwurfsdateien.