Mediendesign Grundlagen · SoSe26

BHT Campus Hub

Vom Campusproblem zum Produktsystem

Konzept, Gestaltung und interaktiver Prototyp in einer gemeinsamen Entwicklung

Warum die Campus Hub App?

Viele Wege. Viele Systeme. Ein gemeinsamer Alltag.

Zwischen Raumwechseln, Stundenplan, Mensa und Campus-Services entstehen täglich kleine Reibungsverluste. Unser Ausgangspunkt war deshalb eine einfache Frage: Wie wird aus vielen Einzelangeboten ein verständlicher Begleiter?

Orientierung soll ohne Umwege funktionieren.
Studieninformationen gehören in einen klaren Tageskontext.
Services müssen dort auffindbar sein, wo sie gebraucht werden.

Die Idee in einem Satz

BHT Campus Hub ist der smarte Campus-Begleiter: Wegfinden, Studienorganisation und Services an einem Ort vereint.

Drei Campus-Situationen als Leitplanken

Jakob

Orientierung

Erstsemester, neu auf dem Campus

Amira

Effizienz

Masterstudium zwischen Campus und Arbeit

Prof. Thomas

Service

Lehrbeauftragter, punktuell vor Ort

Informationsarchitektur

Erste Wege auf Papier

Papier-Wireframe des Dashboards. — Dashboard

Papier-Wireframe für Navigation und Orte. — Navigation & Orte

Papier-Wireframe des Studienbereichs. — Mein Studium

Erste digitale Iteration

Digitaler Wireframe des Dashboards. — Dashboard

Digitaler Wireframe für Navigation und Orte. — Navigation & Orte

Digitaler Wireframe des Studienbereichs. — Study

Logo und App-Icon im Einsatz

a) Ladebildschirm

b) App-Icon einzeln

Campus Hub

Eingesetzte Variante: Campus-Hub-Logo horizontal hell auf dunklem Hintergrund mit ausreichendem Kontrast und unveränderten Proportionen.

App-Icon auf Homescreen

iPhone-Homescreen mit BHT Campus Hub App-Icon

BHT Typografie als klare Hierarchie

H1 Screen Title

Aa

Familie / Schnitt: BHT Case Micro · Bold
Größe / Zeilenhöhe: 28 px / 34 px

Seitentitel wie Study, Social und Service

H2 Section Title

Aa

Familie / Schnitt: BHT Case Micro · Regular
Größe / Zeilenhöhe: 20 px / 26 px

Abschnitte innerhalb eines Screens

Body

Aa

Familie / Schnitt: BHT Case Text · Regular
Größe / Zeilenhöhe: 16 px / 24 px

Lesetext und Erklärungen

UI Button

Aa

Familie / Schnitt: BHT Case Text · Bold
Größe / Zeilenhöhe: 16 px / 20 px

Primäre und sekundäre Aktionen

Caption Meta

Aa

Familie / Schnitt: BHT Case Micro · Regular / Bold
Größe / Zeilenhöhe: 12 px / 16 px

Labels, Status und Zeitangaben

Icon-Inventar: Navigation und Orientierung

Navigation und Konten

Icon	Name	Einsatz
	home / home-outline	Start aktiv / inaktiv
	person / person-outline	Profil aktiv / inaktiv
	email / email-outline	E-Mail aktiv / inaktiv
	arrow-left	Zurück navigieren
	settings	Einstellungen
	keyboard-arrow-right	Weiter öffnen
	open-in-new	Extern öffnen

Orte und Mobilität

Icon	Name	Einsatz
	map-search / map-search-outline	Orte aktiv / inaktiv
	location	Standort
	building	Gebäude
	house-bulb-outline	Smarte Räume
	elevator-passenger	Aufzug
	wc	WC
	train-bus	ÖPNV

Icon-Inventar: Campus und Studienalltag

Campus und Verpflegung

Icon	Name	Einsatz
	pot-steam	Mensa
	food-fork-drink	Mensa
	food-outline	Mensa
	meat-outline	Fleischgericht
	plant-outline	Vegetarisch
	flask	Labor
	newspaper-variant-multiple	Campus-News

Planung und Studium

Icon	Name	Einsatz
	calendar-blank	Kalender
	timetable	Stundenplan
	calendar-clock	Termin mit Zeit
	clock-outline	Zeitangabe
	identification-card	Studierendenausweis
	file-certificate	Notenübersicht
	clipboard-text	Aufgaben / Abgaben

Icon-Inventar: Inhalte, Aktionen und Services

Inhalte und Dokumente

Icon	Name	Einsatz
	file-document-edit	Prüfungsplan / Dokument bearbeiten
	file-document-multiple	Formulare und Dokumente
	attachment-vertical	Anhang
	filter	Filtern
	star-plus	Favorit setzen/bearbeiten
	favorite-box-multiple	Favoritenliste
	frequently-asked-questions	FAQ

Aktionen und Assistenz

Icon	Name	Einsatz
	wrench / wrench-outline	Service aktiv / inaktiv
	pencil	Verfassen
	tick	Bestätigen
	person-search	Personensuche
	people-group	Lerngruppen
	chat-ai-fill (Remix)	AI Campus Assistant
	theme-light-dark	Theme wechseln