====== LU01b - UX-Design / Mockups ======

UX-Design (User Experience Design) ist ein interdisziplinärer Gestaltungsansatz, der sich mit der Nutzererfahrung bei der Interaktion mit digitalen Produkten befasst. Ziel ist es, eine intuitive, effiziente und angenehme Nutzung zu ermöglichen, indem Designentscheidungen auf Basis von Nutzerbedürfnissen, Verhaltensweisen und Erwartungen getroffen werden. UX-Design geht dabei über die rein visuelle Gestaltung hinaus und umfasst psychologische, technische und konzeptionelle Aspekte, die die Benutzerführung optimieren.

Ein zentrales Konzept im UX-Design ist die Nutzerzentrierung. Der Gestaltungsprozess beginnt oft mit der Analyse der Zielgruppe, um deren Anforderungen und Probleme zu verstehen. Methoden wie User Research, Personas und Usability-Tests helfen dabei, relevante Erkenntnisse zu gewinnen, die in den Designprozess einfließen. Dabei geht es nicht nur darum, ein ästhetisch ansprechendes Interface zu schaffen, sondern vielmehr um die Optimierung von Navigation, Informationsarchitektur und Interaktionsmustern.

Ein wesentliches Werkzeug im UX-Design ist das Mockup. Während frühere Phasen des Designs oft durch Wireframes oder Prototypen geprägt sind, stellt ein Mockup eine detaillierte, visuell ausgearbeitete Darstellung des finalen Produkts dar. Es dient dazu, das Design in hoher Genauigkeit zu präsentieren, bevor es in die Entwicklungsphase übergeht. Im Gegensatz zu Wireframes, die primär als schematische Strukturierung der Inhalte dienen, bieten Mockups eine realitätsnahe Darstellung von Farben, Typografie, Icons, Buttons und anderen visuellen Elementen.

Mockups haben im UX-Design mehrere Funktionen. Zum einen ermöglichen sie es, das visuelle Erscheinungsbild und die Markenidentität eines Produkts zu definieren, bevor Code geschrieben wird. Sie erleichtern zudem die Kommunikation zwischen Designern, Entwicklern und Stakeholdern, indem sie eine klare Vorstellung des Endprodukts vermitteln. Dadurch können Designentscheidungen frühzeitig evaluiert und gegebenenfalls angepasst werden, was kostspielige Änderungen in späteren Entwicklungsphasen vermeidet.

Die Erstellung von Mockups erfordert eine enge Verbindung zwischen Ästhetik und Funktionalität. Ein gutes Mockup berücksichtigt nicht nur visuelle Prinzipien wie Kontrast, Hierarchie und Weißraum, sondern integriert auch UX-Prinzipien, die für eine intuitive Nutzung sorgen. So sollten etwa Call-to-Action-Elemente klar hervorgehoben, Texte gut lesbar und Interaktionselemente logisch platziert sein.

Moderne Design-Tools wie Figma, Adobe XD oder Sketch ermöglichen die Erstellung interaktiver Mockups, die nicht nur statische Designs zeigen, sondern bereits erste Klick- und Navigationsmöglichkeiten simulieren. Dies erleichtert die Validierung von Designentscheidungen, bevor das endgültige UI-Design in die Entwicklungsphase übergeht.

===== Unterschied zu UI-Design / Screendesign =====

Bei UX-Design und Mockups geht es um die Frage, welche Elemente und wo sie platziert werden. Dementsprechend arbeitet man auch im Design mit Baukasten und nicht mit definitiven Elementen. 

{{:modul:ffit:portfolio:learningunits:lu01:intro.png?600|}}\\
Quelle: balsamiq