Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

UI-Design

Definition: UI-Design (User Interface Design; Benutzeroberflächen-Design) bezeichnet die visuelle und interaktive Gestaltung digitaler Benutzeroberflächen – die Disziplin die festlegt wie ein digitales Produkt aussieht, sich anfühlt und auf Nutzeraktionen reagiert. UI-Design-Aufgabenbereiche: Visuelles Design (Farbsystem; Typografie-Hierarchie; Ikonografie; Bildsprache; Illustrationen; visuelle Konsistenz); Komponenten-Design (Buttons; Forms; Cards; Navigation; Modals; Tables; alle wiederverwendbaren UI-Bausteine); Interaktionsdesign (Hover-States; Animationen; Übergänge; Micro-Interactions; Loading-States; Empty-States); Responsive Design (Layout-Anpassung für Mobile/Tablet/Desktop; Breakpoint-Definitionen); Dark-Mode/Theme-Design; Accessibility-Design (Kontrast-Ratio; Fokus-Indikatoren; Touch-Target-Größen). UI-Design vs. UX-Design (Don Norman/Jakob Nielsen; Nielsen Norman Group; Fremont; CA; Unterscheidungs-Erklärung 2014): UX-Design = Erforschung und Gestaltung des gesamten Nutzererlebnisses; Nutzerforschung; Informationsarchitektur; User Flows; Wireframes; quantitative und qualitative Nutzertests; UI-Design = visuelle und interaktive Implementierung der UX-Konzepte; Farbe; Form; Bewegung; der UX-Designer stellt sicher dass die Struktur stimmt; der UI-Designer stellt sicher dass die Oberfläche gut aussieht und sich gut anfühlt; beide Disziplinen überlappen und werden in modernen Teams oft von denselben Personen ausgeführt (Product Designer als Rollenbezeichnung für kombinierte UX+UI-Tätigkeit). UI-Design-Deliverables: Style Guide/Design System; High-Fidelity-Mockups; Interaktive Prototypen; Handoff-Dokumente; Figma-Dateien mit Component Libraries und Design-Tokens.

Erläuterung

Die Geschichte des UI-Designs für Computer beginnt mit den frühen grafischen Benutzeroberflächen bei Xerox PARC: Alan Kay (Xerox PARC; Palo Alto; CA; Erfinder der objektorientierten Programmierung; Smalltalk; «A Personal Computer for Children of All Ages», ACM 1972) und sein Team entwickelten das Alto-System (Xerox Alto; 1973) mit dem ersten vollständigen grafischen Interface: Fenster; Icons; Menüs; Zeiger – WIMP-Interface (Windows Icons Menus Pointer); ein entscheidender konzeptioneller Sprung von Kommandozeilen-Interfaces (CLI); Larry Tesler (Xerox PARC; dann Apple; dann Yahoo; Palo Alto; CA; Erfinder von Copy-Paste; «Cut/Copy/Paste»; 1974) und David Smith (Xerox PARC; Erfinder des Desktop-Metapher-Icons-Konzepts) entwickelten fundamentale UI-Paradigmen die bis heute gelten. Apple Macintosh (24. Januar 1984; Apple Computer; Cupertino; CA; Steve Jobs/Jef Raskin/Bill Atkinson; $2.495 Einführungspreis) popularisierte GUI für breite Öffentlichkeit: HyperCard (Bill Atkinson; 1987) ermöglichte erstmals einfaches Interface-Design ohne Programmierung; Apple Human Interface Guidelines (erste Version 1985; «Apple Human Interface Guidelines: The Apple Desktop Interface») legten verbindliche Standards für Mac-UI-Design fest; diese HIG-Tradition führt bis zu den aktuellen Apple Human Interface Guidelines 2024 für iOS/macOS/visionOS. Die Professionalisierung von UI-Design als eigenständige Disziplin erfolgte mit dem Web-Boom: Hillman Curtis (New York; NY; Flash-Webdesign-Pioneer; «MTIV: Process, Inspiration and Practice for the New Media Designer», New Riders, 2002) und David Siegel («Creating Killer Web Sites», Hayden Books, 1996) definierten frühe Web-Ästhetik; als CSS (Håkon Wium Lie; Opera; Oslo; Norwegen; CSS-Erfinder; 1994; W3C Recommendation 1996) Layout-Kontrolle ohne Tabellen ermöglichte entstanden die ersten echten UI-Designer für das Web. Jef Raskin (Apple; Cupertino; CA; Macintosh-Projektgründer; dann Canon Cat; «The Humane Interface», Addison-Wesley, 2000) war eine der schärfsten Stimmen für nutzerzentriertes Interface-Design: Raskin argumentierte dass Computer-Interfaces der Kognitionspsychologie folgen müssen statt technischen Implementierungs-Logiken; sein «Humane Interface»-Konzept (keine Modi; konsistente Gesten; minimale Lernlast) beeinflusste moderne UI-Design-Prinzipien. Matías Duarte (Google; Mountain View; CA; VP Design; ehemals webOS bei Palm/HP; Sidekick bei Danger) und das Google-Design-Team definierten mit Material Design (Google I/O Mai 2014; material.io) das einflussreichste moderne UI-Design-System: Material Design basiert auf physikalischen Materialien als Metapher (Papier; Tinte; Licht; Schatten; Elevation); definiert 12 Elevation-Ebenen mit entsprechenden Schatten-Werten; «Motion provides meaning» als Animation-Philosophie; Material Design 3 (2021; «You»-Design; Dynamic Color basierend auf User-Wallpaper) als modernste Version. Dan Saffer (Smart Design; San Francisco; CA; «Microinteractions: Designing with Details», O'Reilly, 2013) codifizierte Micro-Interactions als UI-Design-Disziplin: die vier Komponenten einer Micro-Interaction: Trigger (was löst die Interaktion aus); Rules (was passiert); Feedback (wie kommuniziert das System die Reaktion); Loops and Modes (Meta-Regeln über Wiederholung und Zustände); Micro-Interactions sind die Moments of Delight in UI-Design – der Like-Button-Bounce; der Siri-Pulsieren; der «Pull to Refresh»-Mechanismus.

UI-Design-Prozess und Werkzeuge

UI-Design-Trends und Zukunft

Praxistipp: Der häufigste Fehler beim Einstieg ins UI-Design: mit dem visuellen Design beginnen bevor das Farbsystem und die Typografie-Hierarchie definiert sind. Verbringen Sie die ersten 2–3 Stunden eines neuen Projekts mit: (1) Farbpalette definieren (Primärfarbe in 10 Stufen; 3 semantische Farben; 7 Grautöne); (2) Type-Scale festlegen (5–6 Größen-Stufen; je eine Gewichtung pro Ebene); (3) Spacing-Scale dokumentieren (8px-Basis; 5–7 Stufen). Erst dann den ersten Screen öffnen. Diese 2–3 Stunden Vorarbeit sparen Wochen an Inkonsistenz-Korrekturen. Und: jede Entscheidung die Sie vor dem ersten Pixel treffen sollten als Figma-Style oder Variable definiert sein – nicht als Magic Number im Design.