Anmelden
Melde dich an!
UI — User Interface Design
UI die du in zehn Sekunden bedienst — und in zehn Jahren nicht hasst.
Scrollen zum anschauen
Was die Leistung umfasst
Was UI Design für dein Produkt leistet
UI ist die Oberfläche, an der Nutzer das Produkt tatsächlich anfassen. Sie entscheidet in den ersten Sekunden über Vertrauen — und im täglichen Gebrauch über Effizienz. Schlechte UI ist nicht „hässlich", schlechte UI ist „ich finde den Knopf nicht". Gute UI muss heute drei Dinge gleichzeitig leisten: in 10 Sekunden bedienbar sein (für Neunutzer), in 10 Wochen ohne Aha-Verluste arbeitbar (für Bestandsnutzer) und in 10 Jahren nicht aussehen wie aus der Zeit gefallen.
Ich gestalte Interfaces mit klarer visueller Hierarchie, konsequenter Komponentenlogik und einem Designsystem, das mit dem Produkt wächst. Konkret: Designsystem (Komponenten-Bibliothek mit States, Varianten, Tokens), visuelle Sprache (Typografie, Farbe, Spacing, Schatten, Bewegung), Interaktions-Muster (Hover, Focus, Loading, Error, Empty States) und konkrete Screen-Designs für die wichtigsten Use Cases. Vom Style-Guide bis zur Pixel-Ready-Übergabe an Entwicklung.
Dein Produkt sieht aus wie ein durchdachtes Werkzeug, nicht wie zusammengewürfelte Screens. Nutzer finden sich in zehn Sekunden zurecht. Bestandsnutzer mögen es auch nach zehn Monaten. Und du kannst neue Features ergänzen, ohne dass die UI auseinanderfällt — weil das Designsystem die Erweiterung trägt.
So gehe ich vor
So gehe ich an UI Design
01 — Designsystem-Grundlagen. Typo-System, Farbsystem, Spacing-System, Komponentenarchitektur — auf Markenstrategie und UX-Vorgaben aufgesetzt. Tokens statt Hardcoded-Werte, sodass Anpassungen einfach bleiben.
02 — Komponenten-Bibliothek. Die zwölf bis zwanzig häufigsten UI-Komponenten produzieren (Buttons, Inputs, Cards, Navigation, Modals, etc.) — pro Komponente alle Zustände (Default, Hover, Focus, Disabled, Error). Anwendungsregeln dokumentiert.
03 — Screen-Designs. Die wichtigsten Bildschirme im Detail entwerfen — mit echtem Content, nicht „Lorem ipsum". Edge Cases mitgedacht (lange Texte, leere Listen, Fehler-Zustände). Responsive-Verhalten definiert.
04 — Übergabe & Dev-Begleitung. Designs in Figma sauber strukturiert, Komponenten mit Variablen verbunden, Übergabe-Doku für Entwicklung. Optional: Sprint-Begleitung, sodass die Design-Implementation nicht im Code abdriftet.
Referenz
Hier eine Beispielprojekt von mir
FAQ
Häufig gestellte Fragen
Webdesign ist meistens marketing-orientiert: ein Auftritt, der Aufmerksamkeit erzeugt und Conversion bringt. UI ist produkt-orientiert: eine Oberfläche, die im täglichen Gebrauch funktioniert. Webdesign wird einmal angeschaut, UI wird täglich bedient. Das verändert die Anforderung deutlich — UI muss in zehn Sekunden klar UND in zehn Wochen effizient sein.
Wenn das System bewährt ist und Komponenten sauber dokumentiert sind, reicht oft Erweiterung statt Neubau. Wenn das System aber nur eine Komponenten-Sammlung ohne klare Tokens ist, oder wenn jede neue Feature-Page neu interpretiert wird, fehlt eine UI-Sprache mit Regeln. Im Audit klären wir, was tragfähig ist und was nicht — bevor neu produziert wird.
Mit klarer Komponenten-Bibliothek in Figma, Variablen für Tokens, allen relevanten Zuständen (Hover, Focus, Loading, Error, Empty) und Edge-Cases dokumentiert. Plus Übergabe-Workshop, wo Designer und Entwicklung gemeinsam die Komponenten durchgehen. Optional: Sprint-Begleitung in den ersten Wochen, damit Design-Implementation nicht im Code abdriftet.
Idealerweise ein verantwortlicher Designer oder Frontend-Entwickler in eurem Team. Bei kleineren Teams oft die gleiche Person, die UX/UI macht. Das System muss nicht ständig aktualisiert werden, aber Änderungen müssen koordiniert ablaufen — sonst entstehen Forks und das System fällt auseinander. Klare Verantwortung statt großer Frequenz.
