~~NOCACHE~~

====== CT203 Grundlagen User Interface Design ======

Der Kurs //Grundlagen User Interface Design// führt in die grundlegenden Prinzipien der Gestaltung digitaler Benutzeroberflächen ein. Im Mittelpunkt steht die Frage, wie digitale Interfaces so strukturiert und gestaltet werden können, dass Inhalte verständlich, Funktionen nachvollziehbar und Interaktionen intuitiv nutzbar werden.

Aufbauend auf den im ersten Semester erworbenen Grundlagen zu digitaler Mediengestaltung, Wahrnehmung und Medientechnik beschäftigen sich die Studierenden mit der systematischen Entwicklung von Benutzeroberflächen. Dazu gehören Informationsarchitektur, visuelle Hierarchien, Layout, Typografie, Farbe, Iconografie sowie grundlegende Interaktionsmuster und Zustände digitaler Systeme.

Ein besonderer Schwerpunkt liegt auf dem Übergang von der Idee zum funktionierenden Interface. Die Studierenden entwickeln Informationsstrukturen, User Flows, Wireframes und Mockups und setzen diese schrittweise in interaktive Prototypen um. Dabei werden unterschiedliche Nutzungssituationen, Geräteklassen und Bildschirmgrößen ebenso berücksichtigt wie Usability und Barrierefreiheit.

Der seminaristische Unterricht und das Praktikum sind thematisch eng miteinander verzahnt. Im **seminaristischen Unterricht** werden grundlegende Konzepte, Prinzipien und Beispiele des User Interface Designs vorgestellt, analysiert und diskutiert. Im **Praktikum** werden diese anhand konkreter Aufgabenstellungen praktisch erprobt und schrittweise auf einen eigenen Interface-Demonstrator übertragen.

-----

^**Modulbezeichnung:**      |CT203 Grundlagen User Interface Design / [[Download Modulbeschreibung]]|
^**Angebot für folgende Studiengänge:**   |B.Sc. Creative Technologies|
^**Kategorie:**   |Pflichtmodul (2. Semester)|
^**Leistungspunkte (Credits):**   |5 CP|
^**Kursdauer:**   |16 Wochen|
^**Kontaktzeit (Zeitstd./Woche):**   |4 Std./Woche|
^**Selbststudium (Zeitstd./Woche):**   |6 Std./Woche|
^**Workload gesamt:**   |150 Std.|
^**Sonstiges:**   |-|

-----

\\

===== SoSe 2027 =====

{{tabinclude>teaching:ba:create:ct203:semester-schedule:sose_27-seminar, teaching:ba:create:ct203:semester-schedule:sose_27-praktikum, teaching:ba:create:ct203:semester-schedule:exercises, teaching:ba:create:ct203:semester-schedule:demonstrator}}


===== Kursstruktur =====

Jedes Kurstreffen gliedert sich in //Praktikum// und //seminaristischen Unterricht//. Beide beschäftigen sich mit zusammenhängenden Themen, übernehmen dabei jedoch unterschiedliche Funktionen.

Im **seminaristischen Unterricht** werden grundlegende Prinzipien des User Interface Designs vorgestellt, anhand bestehender Interfaces untersucht und gemeinsam diskutiert. Dabei geht es nicht allein um die visuelle Gestaltung einzelner Screens, sondern insbesondere um die Frage, wie Informationen strukturiert, Funktionen organisiert und Interaktionen verständlich gestaltet werden können.

Im **Praktikum** werden diese Inhalte praktisch angewendet. Anhand kompakter Übungen werden Methoden, Werkzeuge und typische Arbeitsschritte des Interface Designs erprobt. Die Studierenden entwickeln unter anderem Informationsarchitekturen, User Flows, Wireframes, Mockups und interaktive Prototypen und lernen, diese systematisch weiterzuentwickeln.

Die einzelnen Übungen führen schrittweise von der Analyse bestehender Interfaces über die Strukturierung von Informationen und Funktionen bis zur Gestaltung und Evaluation eines eigenen interaktiven Systems. Dabei werden unterschiedliche Geräte, Bildschirmgrößen und Nutzungssituationen berücksichtigt.

Ein zentraler Bestandteil des Kurses ist die iterative Arbeitsweise:

**analysieren → strukturieren → entwerfen → prototypisieren → testen → überarbeiten**

Interfaces werden dabei nicht als statische grafische Oberflächen verstanden, sondern als Systeme aus Information, visueller Gestaltung, Verhalten und Interaktion. Zustände, Übergänge, Feedback und Mikrointeraktionen sind daher ebenso Bestandteil des Entwurfs wie Typografie, Farbe, Layout oder Iconografie.

Im Verlauf des Semesters entwickeln die Studierenden einen eigenen **Interface-Demonstrator**. Dieser dient dazu, die im Kurs behandelten Methoden und Prinzipien zusammenzuführen und anhand eines konkreten interaktiven Systems anzuwenden. Die Entwicklung erfolgt schrittweise über Informationsstruktur, Wireframes und Mockups bis zu einem interaktiven Prototyp.

Der Demonstrator wird mehrfach vorgestellt, getestet und überarbeitet. Methoden der Usability-Evaluation wie heuristische Analyse, //Think-Aloud// und einfache User Tests helfen dabei, gestalterische Entscheidungen nicht ausschließlich aus der eigenen Perspektive zu beurteilen, sondern systematisch zu überprüfen.

Der Prozess wird fortlaufend dokumentiert. Neben dem finalen Interface sollen insbesondere Entwicklungsschritte, Varianten, Entscheidungen, Tests