Mediendesign Grundlagen SoSe26

BHT Campus Hub

Übung 07

Icons und Buttons

Dokumentation des Icon-Sets, der Button-Hierarchie und der aktuellen App-Screens

Yasir Jumaah, Philipp Krenke, Tanalp Sekil

BHT Campus Hub

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

01

BHT Campus Hub ist die zentrale App für Orientierung, Studium und Campusleben an der BHT.

02

Dashboards und Inhalte passen sich Rolle, Standort und Tageskontext an.

03

So finden Studierende, Lehrende und Gäste schnell Räume, Fristen, Services und Kontakte.

MDI-Name	Bedeutung / Einsatz	MDI-Name	Bedeutung / Einsatz
home	Home-Tab	person	Study-Tab
email	Social-Tab	wrench	Services-Tab
map-search	Karte, Navigation und Orte	food-fork-drink	Mensa und Gastronomie
file-document-edit	Anzeige Icon für News Feed Artikel	clock	Zeit, Dauer und Aktualität
calendar-blank	Kalender und Datum	location	Standort und Raum
navigate-next	Nächster Schritt / Detail öffnen	house-bulb-outline	Raum, Gebäude und Ausstattung
newspaper-variant-multiple	News Feed und Meldungen	favorite-box-multiple	Favoriten und Merklisten
train-bus	ÖPNV und Anreise	plant-outline	Vegetarisch / vegan
food-outline	Gericht und Speise	flask	Labor und Versuch
wc	WC und Sanitärräume	building	Campusgebäude
check	Bestätigen / erledigt	directions	Wegbeschreibung starten
robot	KI-Assistent	pencil-outline	E-Mail verfassen
cog	Einstellungen	arrow-back	Zurück navigieren
plus-circle-outline	Hinzufügen / erstellen	food-drumstick	Fleischgericht

Klassifikation	App-Einsatz	Hierarchie / Gestaltung	Interaktionsregel
Textbutton mit Icon Badge	Hybride Kartenaktion	[Text] [Icon im Badge-Kreis]	Gesamter Button ist die Touch-Fläche
Circular Icon Button	Compose / neue Nachricht	Runder Button mit Hintergrund	Icon-only, 44–48 px Touch Target
Icon-only Button ohne Hintergrund	Expand / Mehr informationen anzeigen	Das Plus-Kreis-Icon ist der Button	Unsichtbarer Touch Target um das Icon
Pill-shaped Icon Button	E-Mail als erledigt markieren	Pill-Fläche mit Check-Icon	Icon-only, 44–48 px Touch Target
Icon-only Button ohne Hintergrund	Wegbeschreibung starten	Directions-Icon ohne Button-Fläche	Unsichtbarer Touch Target um das Icon
Icon-only Button ohne Hintergrund	Einstellungen	Cog-Icon ohne Button-Fläche	Header-Touch-Target mindestens 44 px
Icon-only Button ohne Hintergrund	Zurück	Back-Icon ohne Button-Fläche	Header-Touch-Target mindestens 44 px
Rounded Text-/Icon-Button	Weiterführende Information	[Text] [Navigate-next-Icon]	Leicht gerundet, gesamte Fläche tappbar