Veranstaltungen

Visual Design

Die Methoden und Konzepte des Moduls »Grundlagen der Gestaltung / Visual Design« haben zum Ziel, die Usability und User Experience von User Interfaces systematisch zu untersuchen und zu optimieren. Dies geschieht durch die Betrachtung und Anwendung der gestaltungsrelevanten Parameter Form, Farbe, Fläche, Schrift/Typographie, Bild und Raster bzw. der strukturierenden Parameter Informationsarchitektur, Navigation und visuelle Hierarchie. Die Studierenden sind nach der Veranstaltung in der Lage die grundlegenden Elemente des visuellen Designs theoretisch zu verstehen und praktisch einzusetzen. Sie kennen Analysemethoden zur Beurteilung bestehender interaktiver Systeme hinsichtlich der differenzierenden Gestaltungsansätze, ihrer Organisationsstruktur, Interaktionsmöglichkeiten, deren inhaltlichen Strukturierung und formalen und ästhetischen Realisierung. Die Studierenden kennen elementare Aspekte der visuellen Wahrnehmung und können dieses Wissen in die Designpraxis übertragen. Das darüber hinaus vermittelte Wissen über Usability, User Experience und Designgeschichte befähigt die Studierenden zur Beurteilung bestehender und Konzeption von neuen interaktiven Systemen. Die Studierenden wenden diese Konzepte in einem iterativen Designprozess, zunächst auf Basis von Wireframes, an. Evaluieren diese – und entwickeln eigene funktionale Mock-Ups und Prototypen.

Inhalte & Übungen
  • Visuelle Wahrnehmung und Wahrnehmungstheorie
  • Grundelemente des visuellen Designs (Form, Fläche, Farbe, Schrift und Bild)
  • Methoden und Ansätze zur benutzergerechten Gestaltung
  • Displaytypographie: Funktion, Lesbarkeit, Hierarchien, Ausdrucksmöglichkeiten
  • Strukturelle Merkmale, Layout-Raster, Wireframes und Story Boards
  • Systematische Übungen zur Methodenvermittlung und elementaren Darstellungsprinzipien
  • Grundlegende Techniken der Bildkomposition
  • Grundbegriffe Usability und User Experience
  • Auseinandersetzung mit grundlegenden Interaktionsformen
  • Werkzeuge des visuellen Designs (Adobe Photoshop, Adobe Illustrator)
  • Prototyping (Figma)
  • Grundlagen der Designgeschichte
Verantwortliche Dozenten

Weiterführende Informationen: LSF-Eintrag

Das Modul „Interactive Visual Design / Grundlagen der Gestaltung 2“ baut auf dem Modul „Interactive Visual Design / Grundlagen der Gestaltung 2“ 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 und eines Front-End-Webapplikationsframeworks.
In der zweiten Semesterhälfte werden die zuvor vermittelten theoretischen Grundlagen in einem Projekt vertieft, in dem mittels eines praktischen Beispiels das interaktive visuelle Design einer Anwendung konzipiert und prototypisch mittels Front-End-Webtechnologien umgesetzt wird.
Die Studierenden sind nach der Veranstaltung in der Lage die grundlegenden Elemente des interaktiven visuellen Designs theoretisch zu verstehen und praktisch einzusetzen. Sie sind in der Lage sowohl die visuellen als auch die interaktiven Komponenten beim Benutzungsschnittstellen¬design sowohl aus gestalterischer als auch aus informatischer Sicht zu beurteilen, zu diskutieren, anzupassen und in ein Gesamtkonzept informiert zu integrieren. Sie können dieses Wissen in die Designpraxis übertragen und mit Hilfe von Front-End-Webtechnologien sicher in der Programmierpraxis einsetzen.

Inhalte & Übungen
  • Ringvorlesung zu Information Design
  • Weiterführende Konzepte des Screendesigns
  • Entwurf von Benutzerschnittstellen für Interaktive Systeme
  • Auseinandersetzung mit grundlegenden Interaktionsformen
  • Navigationskonzepte und Informationsarchitektur
  • Analyse und Umsetzung guter Usability & User Experience
  • 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)
  • Projektarbeit
Verantwortliche Dozenten

Weiterführende Informationen: LSF-Eintrag

Die Studierenden sind in der Lage, eine projektorientierte Arbeit im Bereich Interaktiver Systeme detailliert zu planen und durchzuführen. Sie sind vertraut mit der Theorie und Praxis von interaktiven Systemen, sowie mit Methoden zur Gestaltung und Implementierung von Benutzerschnittstellen interaktiver Systeme. Sie sind in der Lage, ihre Ergebnisse angemessen zu dokumentieren und im Rahmen von Vorträgen überzeugend zu präsentieren.

Inhalt

Interaktive Systeme 1 bildet zusammen mit Interaktive Systeme 2 im folgenden Semester das Anwendungsfach Interaktive Systeme im Bachelorstudiengang Medieninformatik.

Interaktive Systeme 1: Grundlagen interaktiver Systeme – UX & User Centered Design (WS 2024/25)

In Interaktive Systeme 1 werden »suboptimale« Interaktionskonzepte bestehender Systeme bezüglich ihrer Usability und User Experience analysiert und in einem Nutzerzentrierten Redesign-Prozess optimiert. Bevor im zweiten Teil des Semesters ein eigenes Redesign umgesetzt wird, werden wir uns zum Einstieg einen kurzen Überblick verschaffen zum aktuellen Stand der Forschung im Bereich UX, User-Centered Design & IxD Patterns. Zu diesem Zweck werden relevante Themen mit direktem Bezug zum Redesign-Projekt in Form von Kurzreferaten erarbeitet und im Plenum vorgestellt und diskutiert.

Es werden konzeptionelle und gestalterische Methoden zur Analyse, Strukturierung und Organisation von Informationen entwickelt. Aufgabenbereiche sind u.a. die Umsetzung von Anwendungen im Bereich der wissenschaftlichen, technischen und didaktischen Kommunikation wie z.b. Lern- und Informationssysteme, Data Driven Documents, Social Media Apps uvm. Die prototypische Umsetzung des Frontends wird zunächst mit Adobe Xd oder Figma simuliert & visualisiert und später mit gängigen Web-Technologien (HTML, CSS, D3 + JS, Frameworks) oder in Java mit Android Studio (bzw. Swift / Objective C für iOS) umgesetzt.

Interaktive Systeme 2: Praxisprojekt (SoSe 2023)

In Interaktive Systeme 2 werden Interaktionskonzepte zu einer eigenen Anwendung konzipiert und prototypisch umgesetzt. Anwendungsbereiche werden gemeinsam erarbeitet und können bspw. sein: Verortung und Organisation von Informationen in vernetzten Informationsräumen, Wissensorganisation in Hypermediasystemen, natürliche Interaktionen (NUIs), Tangible & Gestural User Interfaces, innovative oder experimentelle Interaktionskonzepte, Spielmechaniken & Game Design …

Die Veranstaltung ist in beiden Teilen als problemorientierter Projektunterricht konzipiert, der in Gruppenarbeit erfolgt.

Verantwortliche Dozenten

Weiterführende Informationen: LSF-Eintrag

Die Studierenden sind in der Lage eine projektorientierte wissenschaftliche Arbeit im Bereich Digital Fabrication und Rapid Prototyping detailliert zu planen. Sie erlangen Grundkenntnisse über gängige Arbeitsweisen und Technologien und sind in der Lage sich in tiefergehende Konzepte einzuarbeiten. Dies beinhaltet unter anderem Design-Werkzeuge (3D-Modellierung, CAD, Simulation), additive und subtraktive Fertigungsverfahren (z.B. 3D-Druck, CNC, Laserschnitt) und die Programmierung von Microcontrollern (z.B. Arduino) in Verbindung mit mechanischen Komponenten und Sensorik. Sie können verwandte Arbeiten eigenständig recherchieren und ggf. aufgreifen. Die Studierenden sind zudem in der Lage selbständig im Team und unter Verwendung moderner Methoden neue Lösungen und Konzepte zur Realisierung des Projektthemas zu finden. Sie sind ferner in der Lage, ihre Ergebnisse angemessen zu dokumentieren und im Rahmen von Vorträgen überzeugend zu präsentieren.
 

Inhalte

Die Teilnehmer enthalten zunächst eine Einführung in die gängige Methoden und Technologien von Digital Fabrication. Anschließend sollen sie in kleinen Teams selbständig mit Hilfestellung durch den Dozenten eigene kleine Projekte umsetzen. Diese Arbeit wird ausführlich schriftlich dokumentiert. Die Veranstaltung stellt den ersten Teil des Anwendungsfachs Sketching with Hardware dar. Im Rahmen dieses Anwendungsfaches soll innerhalb eines Jahres ein umfangreiches Projekt aus dem Bereich Digital Fabrication unter Berücksichtigung existierender Arbeiten konzipiert und anschließend praktisch realisiert werden. Folgende Bearbeitungsschritte sind für den ersten Teil der Projekt-Phase vorgesehen:

  • Einführung in moderne Techniken für Rapid Prototyping und Digital Fabrication
  • Anwendung dieser Techniken im Rahmen eines projektorientierten Labors
  • Dokumentation des Fortschritts und Präsentation der Ergebnisse
Verantwortliche Dozenten

Weiterführende Informationen: LSF-Eintrag

Die Entwicklung von Benutzungsschnittstellen für Fahrzeuge ist eine der herausforderndsten Gebiete in der Mensch-Computer-Interaktion, welcher insbesondere durch aktuelle Entwicklungen (autonomes Fahren, Digitalisierung und Elektromobilität) einem starken Wandel unterliegt. Nach erfolgreicher Teilnahme an dem Modul besitzen die Studierenden ein strukturiertes Verständnis der grundlegenden Konzepte, Theorien, Methoden, Technologien und Werkzeuge für die Konzeption, Gestaltung, Entwicklung und Evaluation automobiler Benutzungsschnittstellen. Die hierbei vermittelten Inhalte werden interdisziplinär und sowohl anwendungs- als auch forschungsnahvermittelt und beruhen auf Erkenntnissen aus Psychologie, Informatik, Design, Ingenieurswissenschaften und Ethik.

Vorlesungsinhalt

In den Vorlesungen werden folgende Lerninhalte vermittelt:

  • Psychologische Grundlagen (z.B. Situationsbewusstsein, Perzeption und Kognition, Fahrer-Fahrzeug-Kooperation oder Funktionsallokation)
  • Primäre, Sekundäre und Tertiäre Aufgabenkontexte in der Fahrer-Fahrzeug-Interaktion
  • Grundlegende Interaktionskonzepte und Interaktionshardware, verfügbare Eingabe- und Ausgabemodalitäten, Multimodale Interaktion, explizite und implizite Interaktionskonzepte
  • Entwicklungsprozess von automobilen Benutzungsschnittstellen basierend auf dem nutzerzentrierten Designprozess (Fokussierung auf Herausforderungen bei Evaluation und bei der Definition der Ziele hinsichtlich Benutzbarkeit, Sicherheit und Fahrzeugführung)
  • Richtlinien, Prinzipien und Standards bei der Entwicklung automobiler Benutzungsschnittstellen
  • Gestalterische Aspekte bei der Konzeption automobiler Benutzungsschnittstellen
  • Trends, Forschungsfragen und Konzepte hinsichtlich Fahrerassistenz, autonomes Fahren (Übernahmeszenarien aus kognitiver und technischer Sicht), neuen Informations- und Kommunikationsanwendungen und Integration von mobilen und tragbaren Endgeräten in die Interaktion mit dem Fahrzeug
  • Überblick über nach innen und nach außen gerichtete Fahrzeugsensorik zur Unterstützung des autonomen Fahrens, Fahrerassistenz und expliziter / impliziter Interaktion
  • Herausforderungen, Trends und Visionen bei automobilen Benutzungsschnittstellen (Langeweile vs. Stress, Sicherheit vs. Spaß, Sicherheit vs. Interaktion, Datenschutz, neue Mobilitätskonzepte, Unterhaltung, mobile Endgeräte, etc.)
  • Ethische, rechtliche und gesellschaftliche Fragestellungen

Die Übung vertieft die theoretischen Aspekte der Vorlesungen und erlaubt deren praktische Anwendung. Dies erfolgt auf Basis von Unity. Die Studenten erhalten einen Überblick über die Konzepte und Schnittstellen in Unity und entwickeln zunächst eine einfache Verkehrssimulation. Im weiteren Verlauf wird den Studierenden ermöglicht eigene Use Cases und Interaktionskonzepte zu designen, iterieren und funktionell zu implementieren. Diese werden am Ende der Übung präsentiert.

Verantwortlicher Dozent

Weiterführende Informationen: LSF-Eintrag

Die Veranstaltung bildet einen Rahmen, um den Prozess des Design Thinkings am Beispiel eines Projekts zu erlernen. Insbesondere soll sich dieses Projekt mit der Entwicklung und Erweiterung neuartiger Interaktionstechniken befassen. Ziel ist jeweils, ein lauffähiges, prototypisches System zu schaffen und zu evaluieren. Das über zwei Semester laufende Projekt kann als Anwendungsfach oder erweitert als Projekt absolviert werden.
Design Thinking startet  zunächst mit einer Einführung in die Denkweise und dazugehöriger Methoden. Desweiteren werden aktuelle Technologien vorgestellt und praktisch erfahrbar gemacht.

Design Thinking umfasst die folgenden Schritte:

  • Empathize
  • Define
  • Ideate
  • Prototype
  • Test
Verantwortliche Dozentin

Weiterführende Informationen: LSF-Eintrag

Nach oben scrollen