UI-Design.

UI-Design steht für User Interface Design, die Gestaltung der Benutzeroberfläche. Dazu gehört alles, was Besucher auf einer Website sehen und anklicken: Raster und Abstände, Schriften und Farben, Navigation, Schaltflächen, Formularfelder, Hinweise und Fehlermeldungen. Für ein Unternehmen zählt das, weil die Oberfläche der erste Beleg für Sorgfalt ist. Ein Einkäufer, der zwischen drei Anbietern vergleicht, erkennt in Sekunden, ob eine Seite durchdacht ist oder aus Einzelteilen zusammengesetzt wurde.

So funktioniert UI-Design

UI-Design legt nicht nur fest, wie etwas aussieht, sondern auch, wie es sich verhält. Eine Schaltfläche hat mehrere Zustände: normal, beim Darüberfahren mit der Maus, mit Tastaturfokus, gedrückt und deaktiviert. Ein Formularfeld braucht eine Beschriftung, einen Hilfetext und eine verständliche Fehlermeldung. Gutes UI-Design plant diese Zustände von Anfang an, statt sie der Entwicklung zu überlassen.

Die Grundlage bilden meist ein Wireframe für Aufbau und Reihenfolge und ein Styleguide für Farben und Schriften. Daraus entstehen gestaltete Seiten und wiederverwendbare Bauteile, die in größeren Organisationen in ein Design System wandern.

UI ist nicht dasselbe wie UX. Don Norman und Jakob Nielsen von der Nielsen Norman Group betonen, dass die gesamte Nutzererfahrung von der Benutzeroberfläche zu unterscheiden ist. Die Oberfläche bleibt ein wichtiger Teil, aber das UX Design umfasst auch Inhalte, Abläufe und den Kontakt nach der Anfrage.

Worauf ihr im Unternehmen achten solltet

Lasst Schaltflächen und Links groß genug anlegen. Die WCAG 2.2 des W3C verlangen auf Stufe AA, dass Klickziele mindestens 24 mal 24 CSS-Pixel groß sind oder genügend Abstand zueinander haben. Kleine Symbole ohne Abstand ärgern am Handy jeden, nicht nur Menschen mit eingeschränkter Motorik.

Prüft Farben auf Kontrast, bevor die Gestaltung abgenommen wird. Für normalen Text fordern die WCAG auf Stufe AA mindestens 4,5 zu 1, für große Schrift 3 zu 1. Hellgraue Schrift auf Weiß sieht im Entwurf elegant aus und fällt in der Prüfung durch.

Bewertet Entwürfe mit echten Inhalten. In Projekten sehen wir oft, dass ein Layout mit kurzen Platzhaltertexten überzeugt und mit den echten, längeren Produktnamen und Überschriften auseinanderfällt. Lasst euch deshalb mindestens eine Seite mit Originaltexten zeigen.

Häufige Fragen zum UI-Design

Was macht ein UI-Designer konkret? Er gestaltet Seiten und Bauteile, legt Zustände und Abstände fest und übergibt alles so, dass die Entwicklung es exakt umsetzen kann.

Ist UI-Design Geschmackssache? Nur teilweise. Kontraste, Klickflächen, Lesbarkeit und Einheitlichkeit lassen sich prüfen. Geschmack entscheidet erst innerhalb dieser Regeln.

Wo ist der Unterschied zu UX genau beschrieben? Mit Beispielen und Prüfliste in unserem Beitrag UI und UX Design: der Unterschied einfach erklärt.

Wenn eure Oberfläche so klar wirken soll wie euer Angebot, gestalten wir sie im Webdesign vom Bauteil bis zur fertigen Seite.