BHT Campus Hub ist die zentrale App für Orientierung, Studium und Campusleben an der BHT.
BHT Campus Hub
Übung 08A
Farbe
Entwicklung eines Farbschemas basierend auf dem BHT-Styleguide mit Light- und Dark-Mode
App-Idee in drei Zeilen
BHT Campus Hub
BHT Campus Hub ist der smarte Campus-Begleiter: Wegfinden, Studienorganisation und Services an einem Ort vereint.
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.
BHT Corporate Farbpalette
#555555
Anthrazit
Primär neutral, Text, Borders
#004282
Blau (Primär)
Links, Buttons, Headers
#FFC900
Gelb
Highlights, Badges, Dark Mode
#00A0AA
Petrol
Erfolg, Info-Zustände
#EA3B07
Rot
Fehler, Warnungen, Dringend
Anthrazit-Skala (abgeleitet von #555555)
50#F2F2F2
100#E6E6E6
200#CCCCCC
300#B3B3B3
400#999999
500#555555
600#444444
700#333333
800#222222
900#111111
Zwei Farbschemata im Vergleich
Kontrastprüfung nach WCAG
| Vordergrund | Hintergrund | Ratio | AA | AAA |
|---|---|---|---|---|
#222222 | #FFFFFF | 13.28:1 | Bestanden | Bestanden |
#555555 | #FFFFFF | 7.82:1 | Bestanden | Bestanden |
#004282 | #FFFFFF | 7.15:1 | Bestanden | Bestanden |
#FFC900 | #222222 | 10.70:1 | Bestanden | Bestanden |
#FFFFFF | #222222 | 13.28:1 | Bestanden | Bestanden |
#00A0AA | #FFFFFF | 4.57:1 | Bestanden | Nicht bestanden |
#EA3B07 | #FFFFFF | 4.64:1 | Bestanden | Nicht bestanden |
Interaktionsfarbe & Nutzungsregeln
Light Mode · Interaktionsfarbe
Aa
#004282
Buttons, Links, aktive Tabs
Dark Mode · Interaktionsfarbe
Aa
#FFC900
Buttons, Links, aktive Tabs
Light Mode
- •Gelb #FFC900 nur auf dunklen Hintergründen verwenden
- •Blau #004282 ist die primäre Interaktionsfarbe für Buttons, Links, aktive Tabs
- •Rot #EA3B07 ausschließlich für Fehler und destruktive Aktionen
- •Petrol #00A0AA für Erfolgszustände und informative Highlights
- •Anthrazit-Skala für Text-Hierarchie und Graustufen
Dark Mode
- •Gelb #FFC900 wird zur primären Interaktionsfarbe
- •Weiß #FFFFFF ausschließlich für primären Text, nicht für Hintergründe
- •Anthrazit-Varianten erzeugen Tiefe (dunkelster HG → hellere Cards)
- •Rot #EA3B07 behält seine semantische Fehler-Bedeutung
- •Petrol #00A0AA für Erfolgszustände in beiden Modi
Entscheidung für das Farbschema
Fazit
Warum Light Mode?
Der Light Mode mit weißem Hintergrund und Blau #004282 als alleiniger Interaktionsfarbe ist die robustere Wahl für den Campus-Alltag. Primäre Lese- und Interaktionsfarben erreichen AAA, während Petrol und Rot bewusst nur als semantische Akzentfarben eingesetzt werden. So bleibt die App hell, vertrauenswürdig und im Tageslicht schnell erfassbar.
1
Kontrast
Primäre Lese- und Interaktionsfarben erreichen AAA
#222222, #555555 und #004282 auf Weiß liegen bei 7.15:1 bis 13.28:1. Damit sind Haupttext, Sekundärtext und Buttons klar abgesichert.
2
Farblogik
Petrol und Rot bleiben semantische Akzentfarben
Petrol #00A0AA und Rot #EA3B07 bestehen AA auf Weiß, aber nicht AAA. Deshalb tragen sie Status, Fehler und Hinweise, nicht längere Lesetexte.
3
Interaktion
BHT-Blau als eindeutiger Aktionscode
Blau #004282 ist ausschließlich für Links, Buttons und aktive Navigation reserviert. Dadurch sind tappbare Elemente sofort erkennbar.
Logo, Splashscreen und App-Icon
a) Ladebildschirm
b) App-Icon einzeln
Campus Hub
Eingesetzte Variante: Campus-Hub-Logo hell auf dunklem Hintergrund mit ausreichendem Kontrast und unveränderten Proportionen.
App-Icon auf Homescreen
Wireframes 01
Wireframes 02
Wireframes 03