Kurzdokumentation: Redesign der Veranstaltungsübersicht (HoPS)

Projektauftrag & Zielsetzung

Das Ziel des diesjährigen Projekts bestand darin, die bestehende Veranstaltungsübersicht der Fakultät grundlegend neu zu gestalten. Der Fokus dieses Designs bestand darin, das eine klare intuitive Benutzerführung mit einem langlebigen, modernen Standard vereint.

Design-Systematik & Sprache

1. Design-Sprache & Vision

Wir haben uns für eine Symbiose aus Material Design und Elementen von Apple Liquid Glass entschieden.

• Warum? Diese Kombination nutzt die klaren Richtlinien führender Betriebssysteme als Standard, um eine sofort verständliche und vertraute Designsprache zu bieten.
• Langlebigkeit: Durch die Orientierung an aktuellsten Design-Standards bleibt die Anwendung zukunftssicher.

2. Visuelle Identität & Komponenten

• Branding: Das offizielle TH Orange wurde konsistent als Primärfarbe eingesetzt, um die Corporate Identity der TH Köln zu wahren.
• Iconografie: Verwendung von Material Icons. Diese sind universal gängig, barrierefrei interpretierbar und bieten durch ihre weite Verbreitung eine hohe “Recognition” beim Nutzer.

UI & UX-Strategie

1. Minimalistischer Design - (Cluterless)

Um eine saubere Orientierung zu gewährleisten, wurde ein minimalistischer Ansatz verfolgt. Durch die Reduktion von visuellem noise (“Clutter”) steht der Inhalt im Vordergrund.

2. Interaktionsstufen (No Action / One Action)

Wir haben die Informationsdichte in zwei Ebenen unterteilt:

• No Action: Alle ausschlaggebenden Informationen sind auf einen Blick (“at a glance”) ohne Interaktion sichtbar.
• One Action: Die Detaillierte Zusatzinformationen werden erst durch gezielte Handlung (Click) zugänglich gemacht, um kognitive nicht zu überlasten.

  3. Responsive Balance (Desktop vs. Mobile)

  Trotz verschiedener Geräteklassen bieten wir den vollen Funktionsumfang:

• Desktop: Fokus auf Informationsdichte. Der Platz wird genutzt, um viel Inhalt gleichzeitig darstellbar zu machen.
• Mobile: Optimierte Ansicht für die mobile Nutzung, bei der die Nutzbarkeit im Vordergrund steht, ohne den inhaltlichen Umfang zu beschneiden.

Barrierefreiheit & Accessibility

• Kontraste: Strenge Einhaltung von Kontrastwerten für gute Lesbarkeit.
• Systematik: Logische Hierarchien ermöglichen eine einfache Navigation auch für Menschen mit Einschränkungen.

Fazit

Das Ergebnis ist ein durchdachtes Mockup, das zeigt, wie komplexe Hochschul-Systeme durch eine Kombination aus bewährten Standards (Material Design) und modernen UI-Trends (Liquid Glass) funktional und ästhetisch aufgewertet werden können.