Was ist UI?
Ein User Interface ist die Schnittstelle zwischen Mensch und digitalem Produkt. Wenn du eine Website besuchst, eine App öffnest oder einen Geldautomaten benutzt, ist alles, was du auf dem Bildschirm siehst und antippst, Teil des UI. Im Webdesign sprechen wir von UI, wenn es um die visuelle Gestaltung und die einzelnen Bedien-Elemente einer Seite geht.
UI und UX sind zwei Seiten derselben Medaille. UX kümmert sich um den Weg und das Erlebnis, UI um das, was du dabei vor Augen hast. Ein einfaches Bild: UX ist der Grundriss eines Restaurants — wie liegen Küche, Tische, Toilette, wie läuft der Gast durchs Lokal. UI sind die Stühle, Lampen, Speisekarten, die Bedienkleidung. Beides muss zusammenpassen.
Apple ist das wohl bekannteste Beispiel für ausgereiftes UI-Design. Buttons haben einen erkennbaren Hover-Zustand, Schriften sind klar hierarchisiert, Abstände wirken ruhig, Animationen reagieren genau im richtigen Moment. Nichts davon ist Zufall.
Aus welchen Komponenten besteht ein UI?
Ein Web-UI ist wie ein Baukasten aus wiederkehrenden Bausteinen. Sobald du sie kennst, siehst du sie überall.
| Komponente | Beispiel |
|---|---|
| Navigation | Hauptmenü, Burger-Menü, Breadcrumbs |
| Buttons | Primär ("Jetzt kaufen"), sekundär ("Mehr erfahren") |
| Formulare | Eingabefelder, Dropdowns, Checkboxen, Radio-Buttons |
| Karten / Tiles | Produktkacheln, Blogartikel-Vorschauen |
| Modals & Overlays | Cookie-Banner, Bildvergrößerung, Login-Fenster |
| Feedback-Elemente | Erfolgsmeldungen, Fehlerhinweise, Lade-Animationen |
| Typografie & Farbe | Headlines, Fließtext, Akzentfarben |
Jede dieser Komponenten hat eigene Regeln. Ein Button sollte aussehen wie ein Button — klickbar, mit klarem Hover-Zustand. Ein Eingabefeld muss zeigen, ob es leer, fokussiert, fehlerhaft oder erfolgreich validiert ist. Wenn diese Zustände fehlen, wird ein UI schnell unbenutzbar.
Warum ist UI für deine Website wichtig?
Ein UI entscheidet in den ersten Sekunden, ob jemand bleibt oder geht. Studien zeigen seit Jahren das Gleiche: Die meisten Besucher beurteilen eine Website in unter einer halben Sekunde — und das fast ausschließlich anhand des visuellen Eindrucks. Wenn dein UI überladen, altmodisch oder lieblos wirkt, ist die Tür zu, bevor jemand deinen Text gelesen hat.
Gleichzeitig steuert UI das Verhalten der Besucher. Wo sie klicken, was sie übersehen, wie schnell sie etwas finden — all das hängt an Hex-Code-Werten, Typografie, Größenverhältnissen und Abständen. Ein Button in der Markenfarbe wird häufiger geklickt als ein grauer. Ein klarer Kontrast zwischen Headline und Fließtext führt das Auge in der richtigen Reihenfolge.
Beispiel aus der Praxis: Ein Friseur in Hannover lässt sich eine neue Website bauen. Vorher hatte er pro Monat etwa zehn Anfragen über das Kontaktformular. Das alte UI hatte ein graues "Senden"-Knöpfchen am Ende einer langen Seite. Im neuen Design liegt ein großer, kontraststarker Button direkt unter den Öffnungszeiten — sichtbar, eindeutig, mit klarem Hover-Effekt. Anfragen verdoppeln sich. Gleicher Inhalt, anderes UI.
Patterns, die in jedem guten UI vorkommen
UI-Design ist kein Wettbewerb in Originalität. Im Gegenteil: Bewährte Patterns funktionieren, weil Nutzer sie kennen. Ein paar davon solltest du in deinem UI immer haben:
- Eindeutige Hover- und Klick-Zustände — der Nutzer muss spüren, dass etwas reagiert.
- Visuelle Hierarchie — Wichtiges groß und kontraststark, Nebensächliches kleiner und ruhiger.
- Konsistente Abstände — gleiches Spacing für gleiche Elementtypen, kein Pixel-Chaos.
- Klare Fehlermeldungen — direkt am Feld, nicht irgendwo am Seitenende.
- Eine Hero Section, die in den ersten zwei Sekunden zeigt, worum es geht.
Häufige UI-Fehler
Zu viele Schriftgrößen und Farben. Wenn jede Überschrift eine andere Größe hat und drei Buttons in drei Tönen prangen, wirkt das Ganze unruhig. Ein UI-System hat in der Regel zwei bis drei Schriftgrößen, eine Hauptfarbe und eine Akzentfarbe.
Buttons ohne klaren Status. Ein Button, der nicht verrät, dass er klickbar ist, wird übersehen. Hover, Active und Disabled müssen unterscheidbar sein.
Schlechter Kontrast. Hellgrauer Text auf hellgrauem Hintergrund sieht "edel" aus, ist aber unlesbar — und scheitert an Barrierefreiheits-Standards.
Inkonsistenz. Auf der Startseite ist der Primär-Button rund, auf der Kontaktseite eckig. Das verwirrt unbewusst und untergräbt Vertrauen.
Design-System — das Rückgrat jedes ernstzunehmenden UI
Sobald eine Website mehr als drei, vier Unterseiten hat, reicht Bauchgefühl nicht mehr. Dann brauchst du ein Design-System: eine dokumentierte Sammlung aller visuellen und funktionalen Regeln — Farben, Schriften, Buttons, Spacings, Icons, alles wiederverwendbar. Shopify (Polaris), IBM (Carbon) und Google (Material) haben ihre Systeme sogar öffentlich dokumentiert.
Zwei Konzepte sind dabei zentral. Atomic Design (von Brad Frost) denkt UI in Ebenen: Atome (Input, Label, Icon) werden zu Molekülen (Suchfeld mit Button), die zu Organismen (komplette Navigation) zusammengebaut werden. Änderst du ein Atom, aktualisieren sich alle Stellen mit. Design Tokens sind die kleinste Einheit davon — benannte Werte wie color-primary oder spacing-md, einmal definiert und überall referenziert. Wenn deine Markenfarbe wechselt, änderst du einen Token, nicht fünfhundert Stellen im CSS.