Lernziele

Das Modul »Grundlagen der Gestaltung 1« hat zum Ziel die Usability und User Experience von interaktiven Systemen durch die strukturierte Betrachtung von Form, Fläche, Farbe, Schrift, Bild, Displaytypographie, Layout-Raster, Wireframes, Informationsarchitektur und Navigation zu unterstützen. Die Studierenden sind nach der Veranstaltung in der Lage die grundlegenden Elemente des visuellen Designs theoretisch zu verstehen und praktisch einzusetzen.

Die Studierenden kennen elementare Aspekte der visuellen Wahrnehmung und können dieses Wissen in die Designpraxis übertragen. Hierzu können sie sowohl Werkzeuge zur Erstellung von visuellen Designs als auch für die Entwicklung von Prototypen sicher einsetzen.

Inhalte & Übungen

• Visuelle Wahrnehmung und Wahrnehmungstheorie
• Grundelemente des visuellen Designs (Form, Fläche, Farbe, Schrift und Bild)
• Displaytypographie: Funktion, Lesbarkeit, Hierarchien, Ausdrucksmöglichkeiten
• Strukturelle Merkmale, Layout-Raster, Wireframes und Story Boards
• Werkzeuge des visuellen Designs und Prototyping (Adobe Photoshop, Illustrator und XD)
• Grundbegriffe Usability und User Experience
• Grundlagen der Designgeschichte

Lernziele

Das Modul »Grundlagen der Gestaltung 2« baut auf dem Module »Grundlagen der Gestaltung 1« auf hat zum Ziel die Usability und User Experience von interaktiven Systemen durch die strukturierte Betrachtung von gestalterischen Aspekten des Informationsdesigns, weiterführenden Konzepten des Screendesigns, Navigationskonzepten und -Architekturen, Suchfunktionen, Konzepte zum Filtern von Informationen, Formular- und Dialoggestaltung, weiterführende Konzepte der Displaytypografie und die Betrachtung von individuelle Bedürfnissen bei der Benutzungsschnittstellengestaltung zu unterstützen.

Parallel zur Vermittlung der theoretischen Inhalte erfolgt die strukturierte praktische und angewandte Einführung in Webtechnologien (JavaScript, CSS, HTML) und eines Front-End-Webapplikationsframeworks (z.B. D3).

Inhalt

• Ringvorlesung zu Gestaltungsfragen
• Weiterführende Konzepte des Screendesigns
• Entwurf von Benutzerschnittstellen für Interaktive Systeme
• Navigationskonzepte und -Architekturen
• Suchfunktionen und Konzepte zum Filtern von Informationen
• Formular- und Dialoggestaltung
• Weiterführende Konzepte der Displaytypografie
• Funktionale und formal-ästhetische Entwurfspraxis
• Systematische Entwurfsmethodik
• Gestalterische Aspekte des Informationsdesigns
• Webtechnologien (JavaScript, CSS, HTML) 
• Front-End-Webapplikationsframeworks (z.B. D3)

Lernziele

Die Studierenden sollen grundlegende Kenntnisse zum Entwurf interaktiver Systeme erwerben (Fachkompetenzen). Durch die Diskussion von Aspekten der Wahrnehmung und der Kognitionswissenschaften, der Betrachtung von Techniken unterschiedlicher Generationen von Interaktionsmetaphern sowie die Anwendung verschiedener formaler Methoden zur Notation und Analyse von Interaktionsmechanismen werden Studierende befähigt, bestehende Lösungen zu bewerten und neue Ansätze für die Schnittstellenentwurf zu entwickeln (Methodenkompetenz).

Inhalt

1. Einführung
2. Gedächtnis und Aufmerksamkeit
3. Kognition und Aktion
4. Wahrnehmung und Navigation
5. Affekt und soziale Interaktion
6. Motorische Aktivitäten
7. Paradigmen und Metaphern
8. Technische Parameter
9. Eingabegeräte
10. Interaktionsstile
11. Kognitive Modelle

Lernziele

Die Teilnehmer beherrschen die grundlegenden Konzepte der Verarbeitung, Speicherung, Präsentation und Kommunikation medialer Daten in computerbasierten Systemen. Sie sind in der Lage, die wichtigsten Algorithmen zu den verschiedenen Medientypen zu nutzen und selbst zu implementieren. Sie sind ferner befähigt, die jeweiligen Vor- und Nachteile bestimmter Verfahren zu analysieren und zu bewerten. 

Inhalt

• Grundlagen: Digitale Repräsentation, Kapazitätsanforderungen digitaler Medien, Kodierung und Kompression
• Text: Schrift und Alphabet, Kodierungsstandards, Schriftart, Fortgeschrittene Textrepräsentationen
• Grafik: 2D Formen und Operationen, Animation, 3D Formen und Operationen, Realismus
• Bild: Bildkompression, Bildverarbeitung
• Video: Analoges Video, Digitales Video, Videokompression
• Audio: Physikalische und physiologische Grundlagen, Audiokodierung und Kompression, Repräsentation von Musik