Detaillierter Semesterplan: Interaktives Informationsdesign

Modul 9: Konzipieren – gestalten – programmieren

Modulübersicht

Modul: Interaktives Informationsdesign: Konzipieren – gestalten – programmieren (Modul 9)

Teilmodule:

Schwerpunkt: Gestaltung und Anwendung von Barrierefreiheit, weniger Programmierung

Technische Umsetzung: WordPress, Nicepage, Elementor

Design-Tools: Figma (Einführung)

Semesteraufgabe

Barrierefreies Informationsportal für eine lokale Initiative/Organisation

Die Studierenden sind Teil eines Designteams, das beauftragt wurde, ein barrierefreies Informationsportal für eine lokale gemeinnützige Initiative (z.B. ein Umweltverein, ein Nachbarschaftszentrum, eine Selbsthilfegruppe) zu konzipieren und zu gestalten. Die Initiative hat bisher nur eine rudimentäre oder keine Online-Präsenz und möchte ihre Informationen und Angebote einem breiteren Publikum zugänglich machen. Der Fokus liegt dabei auf der Gestaltung einer benutzerfreundlichen und vor allem barrierefreien Anwendung.

Die Semesteraufgabe besteht aus zwei Teilaufgaben:

  1. Konzeption und Gestaltung eines interaktiven Prototyps (Figma) und Dokumentation (50%)
  2. Umsetzung einer Beispiel-Website mit WordPress/Nicepage/Elementor (50%)

Bewertungskriterien:

Teilaufgabe 1 (50%):

Teilaufgabe 2 (50%):

Terminplan

GKBO 2h
10. April 2025, Donnerstag (19:00-20:30)

Einführung und Grundlagen der Benutzungsoberflächen

Inhalte:

  • Vorstellung des Moduls und der Semesteraufgabe
  • Grundlagen der Gestaltungskompetenz für Benutzungsoberflächen
  • Einführung in die Barrierefreiheit und ihre Bedeutung im UX-Design
  • Überblick über Designprinzipien für Benutzungsoberflächen

Methoden:

  • Impulsvorlesung (30 min): Einführung in das Modul und die Grundlagen der Gestaltungskompetenz
  • Interaktive Diskussion (20 min): Bedeutung von Barrierefreiheit im digitalen Raum
  • Vorstellung der Semesteraufgabe mit Beispielen (20 min)
  • Think-Pair-Share (15 min): Erste Ideen zu möglichen lokalen Initiativen sammeln
  • Q&A-Session (5 min): Klärung offener Fragen zur Semesteraufgabe

Medien:

  • PowerPoint-Präsentation mit visuellen Beispielen
  • Handout zur Semesteraufgabe mit Bewertungskriterien
  • Digitale Pinnwand (z.B. Miro) für kollaboratives Brainstorming

Semesteraufgabe:

  • Vorstellung der Aufgabenstellung, Erläuterung der Anforderungen und Bewertungskriterien
  • Beispiele gelungener Projekte aus früheren Semestern

Hausaufgabe:

  • Recherche zu lokalen gemeinnützigen Initiativen für die Semesteraufgabe
  • Lektüre der Grundlagentexte zur Barrierefreiheit

Ressourcen:

Literatur:

  • Jacobsen, J. & Meyer, L. (2022). Praxisbuch Usability und UX. Rheinwerk Verlag.
  • Krug, S. (2022). Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. New Riders.
  • SH Nr. 056: Gebrauchsfreundlichkeit von Medien, Produkten und Dienstleistungen (Studienheft)

Online-Ressourcen:

Lehrvideos:

Screendesign 2h
23. April 2025, Mittwoch (19:00-20:30)

Einführung in Screendesign

Inhalte:

  • Grundlagen des Screendesigns
  • Geschichte des Hypertextes/-media
  • Unterschiede zu Print-Medien
  • Überblick über HTML5 und CSS3
  • Vorstellung der technischen Anforderungen der Semesteraufgabe

Methoden:

  • Impulsvorlesung (30 min): Geschichte und Grundlagen des Screendesigns
  • Vergleichende Analyse (20 min): Print vs. Digital anhand von Beispielen
  • Live-Demo (15 min): Grundlegende HTML5- und CSS3-Strukturen
  • Gruppenarbeit (15 min): Analyse bestehender Websites von gemeinnützigen Organisationen
  • Präsentation und Diskussion (10 min): Vorstellung der Analyseergebnisse

Medien:

  • PowerPoint-Präsentation mit historischen und aktuellen Beispielen
  • Interaktive Webdemo zur Veranschaulichung von HTML/CSS
  • Arbeitsblatt für die Website-Analyse

Semesteraufgabe:

  • Besprechung der recherchierten Initiativen
  • Auswahl und erste Überlegungen zur Zielgruppenanalyse
  • Vorstellung von Methoden zur Zielgruppenanalyse

Hausaufgabe:

  • Zielgruppenanalyse und Informationsbedürfnisse der gewählten Initiative dokumentieren
  • Erste Recherche zu bestehenden Websites ähnlicher Initiativen

Ressourcen:

Literatur:

  • Stapelkamp, T. (2022). Informationsvisualisierung: Web - Print - Signaletik. Springer Vieweg.
  • Hoffmann, M. (2023). Modernes Webdesign - Gestaltungsprinzipien, Webstandards, Praxis. Galileo Press.
  • SH Nr. 264: Screendesign (Studienheft)

Online-Ressourcen:

Lehrvideos:

Weitere 12 Termine sind im vollständigen Semesterplan enthalten.

Vollständigen Semesterplan anzeigen

Umfassende Literatur- und Ressourcenliste

Grundlagenliteratur

  1. Jacobsen, J. & Meyer, L. (2022). Praxisbuch Usability und UX. Rheinwerk Verlag.
  2. Krug, S. (2022). Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. New Riders.
  3. Norman, D. (2023). The Design of Everyday Things. Vahlen.
  4. Stapelkamp, T. (2022). Informationsvisualisierung: Web - Print - Signaletik. Springer Vieweg.
  5. Grünwied, G. (2022). Usability von Produkten und Anleitungen im digitalen Zeitalter. Publicis.

Figma und Design

  1. Rohles, B. (2023). Grundkurs gutes Webdesign. Rheinwerk Design.
  2. Semler, J. (2022). App-Design. Alles zu Gestaltung, Usability und User Experience. Rheinwerk.
  3. Müller-Brockmann, J. (2021). Rastersysteme für die visuelle Gestaltung. Niggli.
  4. Lindauer, M. (2022). Experimentelle Gestaltung: Visuelle Methode und systematisches Spiel. Niggli.
  5. Stankowski, D. (2021). Visuelle Kommunikation: Ein Design-Handbuch. Dietrich Reimer Verlag.

WordPress und Webentwicklung

  1. Cremer, G. (2023). Das WordPress Praxishandbuch. Franzis.
  2. Wolf, J. (2022). HTML5 und CSS3: Das umfassende Handbuch. Rheinwerk.
  3. Bühler, P. & Schlaich, P. (2022). Webdesign. Interfacedesign, Screendesign, Mobiles Webdesign. Springer Vieweg.
  4. Bültge, F. (2023). Das moderne Web. Geräteunabhängige Webentwicklung mit HTML5, CSS3 und JavaScript. dpunkt.verlag.
  5. Hahn, M. (2023). Webdesign. Das Handbuch zur Webgestaltung. Rheinwerk Design.

Barrierefreiheit und Inklusion

  1. Henry, S. L. (2022). Just Ask: Integrating Accessibility Throughout Design. Lulu.com.
  2. Horton, S. & Quesenbery, W. (2023). A Web for Everyone: Designing Accessible User Experiences. Rosenfeld Media.
  3. Kirkpatrick, A. (2022). Accessibility for Everyone. A Book Apart.
  4. Pickering, H. (2021). Inclusive Design Patterns. Smashing Magazine.
  5. Pullin, G. (2022). Design Meets Disability. MIT Press.

Online-Ressourcen

  1. Web Content Accessibility Guidelines (WCAG) 2.1
  2. A11Y Project - Ressourcen zur Barrierefreiheit
  3. Inclusive Design Principles
  4. WebAIM: Web Accessibility In Mind
  5. Figma Learning Center
  6. WordPress Accessibility Team
  7. MDN Web Docs - Umfassende Dokumentation zu HTML, CSS und JavaScript
  8. Smashing Magazine - Artikel zu Webdesign und UX
  9. Nielsen Norman Group - UX-Forschung und Best Practices
  10. Axe DevTools - Barrierefreiheits-Testing-Tool

Lehrvideos

  1. Introduction to Web Accessibility - W3C Web Accessibility Initiative
  2. Inclusive Design: Designing for Accessibility - Google Design
  3. Figma Tutorial for Beginners - DesignCourse
  4. WordPress for Beginners - WPBeginner
  5. Elementor Tutorial for Beginners - WPCrafter
  6. Creating Accessible Websites with Elementor - Elementor
  7. Advanced Prototyping in Figma - Figma
  8. Responsive Web Design Tutorial - Traversy Media
  9. Design Systems: Step-by-Step Guide - DesignCourse
  10. How to Present Design Work - The Futur