Differences

This shows you the differences between two versions of the page.

--- teaching:ba:courses:mediadesign-project:wise24-25:user-interface-design [2025/03/21 09:50] – Felix Hardmood Beck
+++ teaching:ba:courses:mediadesign-project:wise24-25:user-interface-design [2025/03/21 11:06] (current) – [Was ist eine User Interface (UI)?] Felix Hardmood Beck
@@ Line 1: / Line 1: @@
-===== User Interface (UI) Design =====
+====== Einführung in User Interface Design (UI Design) ======
-**Definition:**
+User Interface Design, kurz **UI Design**, bezeichnet die visuelle und interaktive Gestaltung der **Benutzerschnittstelle** eines digitalen Systems. Ziel ist es, eine **ästhetisch ansprechende**, **funktionale** und **konsistente** Oberfläche zu schaffen, über die Nutzer*innen mit einem Produkt effizient interagieren können.
-UI Design beschäftigt sich mit der visuellen und interaktiven Gestaltung der Benutzeroberfläche eines Produkts. Es umfasst alle sichtbaren und interaktiven Elemente, die der Nutzer nutzt, um mit einem System zu interagieren.
-**Schwerpunkte:**
+UI Design ist ein zentraler Bestandteil des [[teaching:ba:courses:mediadesign-project:wise24-25:user-experience-design|User Experience Designs]], konzentriert sich jedoch spezifisch auf die **Gestaltung der Oberfläche**, mit der die Nutzer*innen unmittelbar in Kontakt treten.
-  * Gestaltung von Layouts, Buttons, Menüs, Icons, Schriftarten und Farben.
-  * Sicherstellung der visuellen Konsistenz und Ästhetik.
-  * Technische Umsetzung responsiver Designs für verschiedene Geräte.
-**Ziel:**
+**Definition:**  UI Design beschäftigt sich mit der visuellen und interaktiven Gestaltung der Benutzeroberfläche eines Produkts. Es umfasst alle sichtbaren und interaktiven Elemente, die der Nutzer nutzt, um mit einem System zu interagieren.
-Eine ansprechende, intuitive und benutzerfreundliche Oberfläche schaffen.
-**Beispiele:**
-  * Die Platzierung und Gestaltung eines „Kaufen“-Buttons in einer E-Commerce-App.
+===== Was ist ein User Interface (UI)? =====
-  * Die Auswahl von Farben und Typografie, die ein angenehmes Leseerlebnis ermöglichen.
+Ein **User Interface (Benutzerschnittstelle)** ist der Bereich eines Produkts, über den Menschen mit einem System interagieren. Dies umfasst:
+  * **Bildschirmoberflächen** (z. B. Buttons, Menüs, Eingabefelder)
+  * **Textliche Elemente** (z. B. Labels, Fehlermeldungen)
+  * **Icons und grafische Symbole**
+  * **Visuelle Feedbacksysteme** (z. B. Ladeanzeigen, Animationen)
+  * **Touch-, Maus- oder Tastatureingaben**
+Die Qualität der Benutzeroberfläche beeinflusst maßgeblich, wie **schnell, intuitiv und fehlerfrei** Nutzer*innen ein Ziel erreichen können.
+===== Ziele des UI Designs =====
+UI Design verfolgt folgende Kernziele:
+  * **Klarheit und Orientierung**: Nutzer*innen sollen sich sofort zurechtfinden.
+  * **Konsistenz**: Wiedererkennbare Muster und Strukturen erleichtern die Bedienung.
+  * **Effizienz**: Aufgaben sollen mit möglichst wenigen Interaktionen ausführbar sein.
+  * **Ästhetische Gestaltung**: Visuelle Qualität erhöht die Glaubwürdigkeit und das Vertrauen in das Produkt.
+  * **Responsives Verhalten**: Interfaces sollen auf verschiedenen Geräten und Bildschirmgrößen funktionieren.
+===== UI Design im Gestaltungsprozess =====
+UI Design ist eng verzahnt mit dem UX Design-Prozess und erfolgt meist auf Basis folgender Schritte:
+  - **Visuelle Konzeption**: Entwicklung von Styleguides, Designsystemen und Farbkonzepten.
+  - **Layout und Typografie**: Anordnung und Gestaltung von Informationsstrukturen.
+  - **Interaktive Komponenten**: Gestaltung von Buttons, Navigationselementen, Formularen usw.
+  - **Prototyping**: Umsetzung klickbarer Oberflächen zur Simulation der Benutzerführung.
+  - **UI Testing**: Überprüfung auf Verständlichkeit, visuelle Konsistenz und Zugänglichkeit.
+UI Designer*innen arbeiten oft mit Tools wie Figma, Sketch oder Adobe XD und erstellen Systeme, die von Entwicklungsteams technisch umgesetzt werden.
+===== Abgrenzung zu verwandten Disziplinen =====
+UI Design ist nicht gleichzusetzen mit:
+  * **UX Design** – fokussiert auf die gesamte Nutzererfahrung, nicht nur die Oberfläche.
+  * **Graphic Design** – legt den Schwerpunkt auf visuelle Gestaltung, ohne zwingend Interaktion zu berücksichtigen.
+  * **Front-End Development** – setzt UI-Designs technisch um, ist aber nicht Teil der visuellen Konzeptphase.
+UI Design ist dort angesiedelt, wo **Gestaltung und Funktionalität der Mensch-Computer-Interaktion** konkret und sichtbar werden.
+===== Fazit =====
+User Interface Design ist ein entscheidender Faktor für die **Benutzbarkeit und Wahrnehmung digitaler Produkte**. Es schafft visuelle Klarheit, strukturiert Informationen, und ermöglicht zielgerichtete Interaktionen. In Kombination mit UX Design bildet UI Design die Grundlage für **effiziente, zugängliche und ästhetisch hochwertige Benutzererlebnisse**.