BRIDGEKID ist eine scenario-basierte, browserbasierte und mobile-first Learning Experience für neu nach Deutschland gekommene Kinder und Jugendliche. Der Case zeigt nicht nur visuelles Design, sondern den kompletten Weg von Problemdefinition und Action Mapping über Instructional Design und Learning Experience Design bis zu einem konsistenten High-Fidelity-Interface.
Der Reference Skill A4 „Nichtverstehen ausdrücken“ wird hier nicht nur als Screenshot gezeigt. Audio, Entscheidung, konstruktives Feedback, eigener Sprachversuch und Real-World Transfer bilden einen zusammenhängenden browserbasierten Lernpfad — ohne Backend.
Ein sprachlich kleiner Chunk besitzt ein großes Handlungspotenzial. Der Golden Path verbindet HEAR → TRY → FEEDBACK → ACT: Die Phrase wird gehört, in einer konkreten Situation ausgewählt, mit begründetem Feedback gefestigt und anschließend in einen eigenen Satz sowie eine reale Mission überführt.
Wähle die Handlung, die dir in dieser Situation tatsächlich weiterhilft.
Neu angekommene Jugendliche müssen Schulräume finden, Anweisungen verstehen, Hilfe holen, Kontakte eröffnen oder Bus und Bahn nutzen, bevor ausreichende Deutschkenntnisse aufgebaut sind. BRIDGEKID behandelt diese Lücke als Performance Gap und trainiert nur das, was durch Training tatsächlich veränderbar ist.
Die zentrale Lücke besteht nicht nur aus fehlendem Sprachwissen. Es fehlen funktionale Sprach-Chunks, Orientierungsstrategien, Situationserkennung und geschützte Handlungserfahrung. Gleichzeitig werden Nicht-Lernursachen wie institutionelle Barrieren, mangelnde reale Kontakte oder Gerätezugang bewusst nicht fälschlich als Trainingsproblem behandelt.
BRIDGEKID verbindet Scenario-based Learning, Guided Practice, Microlearning, Scaffolding/Fading, konkretes Feedback und Performance Support. Der Help Mode ist kein zusätzlicher Lernbereich, sondern ein querschnittlicher Zugang für akute Situationen. Ziel ist Transfer: Lernen soll in selbstständiges Handeln außerhalb der Plattform übergehen.
Stundenplan, Schulorte, Lehrkraft, Nichtverstehen, Hilfe, Routinen und Unterrichtsanweisungen.
Kontakt eröffnen, vorstellen, teilnehmen, Gespräch fortführen, Peer-Hilfe und soziale Signale.
Weg, Einkauf, Bestellung, Freizeit, Unterstützung sowie Bus und Bahn.
Verlorengehen, dringender Hilfebedarf, geeignete Hilfe und elementare Notfallkommunikation.
Die Learning Engine ist die wiederholbare Logik hinter den einzelnen Screens. Sie macht die Plattform skalierbar: Eine Situation wird sichtbar, die relevante Kommunikation wird gehört und verstanden, anschließend geschützt ausprobiert, mit weniger Hilfe erneut bewältigt und schließlich in einer neuen Situation bzw. realen Aufgabe angewendet.
Fortschritt wird nicht primär über Prozentzahlen verstanden. Die Mastery-Logik fragt stattdessen: Was kann die lernende Person inzwischen tatsächlich tun? Daraus entstehen die Zustände Entdeckt → Gelernt → Sicher; reale Anwendung kann zusätzlich als Transfer reflektiert werden.
Die folgenden Screens sind in derselben Reihenfolge organisiert wie in der finalen „Visuelles Design & UI“-PDF. Die Reihenfolge macht die Entwicklung nachvollziehbar: Projekt → Moodboard → Design System → Bildsprache → Cover → Lernscreen → Fragen → Feedback → Abschluss → Zustände → Zusatzscreens → Quellen.
Der Einstieg definiert Zielgruppe, Lernorte und Kernbedürfnisse: 10–16 Jahre, vom ersten Tag bis etwa zum ersten Jahr in Deutschland, browserbasiert und audio-gestützt. Wichtig ist die Positionierung: Orientierung, Sprache zum Handeln und Mut für den nächsten Schritt.
Kurze Projektvorstellung + klare Zielgruppe
Das Moodboard verbindet echte Alltagssituationen mit einer jugendgerechten Produktwelt. Fotografie, Audio, leuchtender Lernpfad und Diamond Anchor bilden die visuelle Metapher: Der digitale Raum führt nicht von der Realität weg, sondern zurück in eine konkrete Handlung.
Visuelle Richtung und Stimmung klar auf Thema/Zielgruppe abgestimmt
Die zweite Moodboard-Stufe übersetzt die emotionale Richtung in ein kontrollierteres Interface-System: hellere Off-White-Flächen, Organic Glass, Bridge Arc, Diamond Anchor und ein klareres Verhältnis zwischen Foto, UI und Lernpfad. Das schafft die Brücke zum späteren Styleguide.
Moodboard als belastbare Designgrundlage
Poppins für Headline und Body, feste Größen, das definierte Farbsystem, Icon-Logik, Motion mit ruhigen 180–240 ms, sichtbarer Fokus, Reduce Motion, audio-first Sprache und die drei Signaturen Organic Glass, Bridge Arc und Diamond Anchor bilden ein konsistentes System.
Farben · Schriften · Icons · Zustände · Accessibility konsistent
Die Bildsprache wird dokumentarisch, warm und inklusiv definiert: natürliches Tageslicht, weiche Kontraste, sichtbare Handlung und echte Orte. BRIDGEKID-Farben erscheinen als Akzent, nicht als künstlicher Neon-Look. Hero-, Detail-, Portrait- und UI-Overlay-Formate werden separat festgelegt.
Bildstil ist Bestandteil des StyleguidesDie Coverseite verdichtet das Konzept auf wenige starke Elemente: Marke, Nutzenversprechen, Zielgruppe und eine reale Ankommenssituation. Der leuchtende Pfad führt sichtbar aus dem Interface in die Schule — die zentrale Projektidee wird damit bereits im Hero visuell erzählt.
Thema klar, einladend und styleguide-konform eingeführt
Die Seite kombiniert ein KI-generiertes Szenenbild mit einem CC-lizenzierten Klassenraumfoto. Beide Bilder erfüllen eine Funktion: Das KI-Bild zeigt die Handlung, das CC-Bild verankert sie in einem realen Kontext. Quellen und Lizenzinformationen werden direkt im Layout sichtbar dokumentiert.
1 KI-Bild + 1 CC-Bild + Text + vollständige Quellen
Die Frage wird als konkrete Schulsituation formuliert. Die Interaktion zeigt eine eindeutige Single-Choice-Logik, eine klare visuelle Auswahl und eine einzige primäre Aktion. Die richtige Handlungsstrategie ist sprachlich und situativ direkt anschlussfähig.
Single Choice klar von Multiple Choice unterschieden
Der Help Mode fragt nicht nach isoliertem Wissen, sondern nach sinnvollen Unterstützungsformen: Zielphrase, Audio und Hilfssprache können gleichzeitig nützlich sein. Die Checkbox-Logik macht Mehrfachauswahl sofort erkennbar.
Checkboxen, klare Bedienung und konsistente Styleguide-Anwendung
Das grüne Completion-Signal wird bewusst nur für Erfolg verwendet. Die Rückmeldung benennt die Handlung, zeigt den Skill „Hilfe holen“ und führt mit „Weiter“ in den nächsten Schritt. Motivation entsteht aus Kompetenzzuwachs, nicht aus einer abstrakten Punktzahl.
Motivierend, eindeutig und verständlich
Das Retry-Feedback erklärt, warum die gewählte Handlung nicht weiterhilft, gibt einen konkreten Audio-Tipp und öffnet sofort einen erneuten Versuch. Coral markiert den Retry Cue, ohne Fehler aggressiv oder beschämend zu inszenieren.
Hilfreicher Hinweis + erneuter Versuch statt Sackgasse
Die Gratulation wird direkt mit dem Mastery-Status verbunden. Danach folgt keine bloße Endkarte, sondern eine Real-World Mission. Der Lernpfad endet damit nicht im Kurs, sondern öffnet den Transfer in die reale Situation.
Professioneller, motivierender Abschluss
„Du bist fast da“ vermeidet eine defizitorientierte Sackgasse. Die Seite zeigt 2/3 sicher, bewahrt den bisherigen Fortschritt, gibt einen konkreten Tipp und bietet eine zielgerichtete Wiederholung nur der unsicheren Situation.
Konstruktiv formuliert und zur Wiederholung motivierend
Die Zustände sind als System definiert, nicht spontan pro Screen. Sichtbarer Fokus, Hover-Glow, Completion Cue und Locked State unterstützen Tastaturbedienung, Orientierung und konsistente Nutzerführung. Farbe steht nie allein: Icon, Kontur und Text tragen die Bedeutung mit.
Mindestens zwei Zustände gefordert — systematisch deutlich erweitert
Der Zusatzscreen macht die Scaffolding-Idee konkret: Die Phrase bleibt kurz, Audio kann normal oder reduziert abgespielt werden und die Handlung führt direkt in „Jetzt üben“. Unterstützungsoptionen sind sichtbar, aber die Entscheidung auf dem Screen bleibt einfach.
Audio-first + klare Aktion pro Screen
„Sag es heute einmal selbst.“ übersetzt den gelernten Skill in eine reale Aufgabe. Audio bleibt als freiwilliger Performance Support verfügbar. Damit wird die digitale Plattform bewusst zur Brücke und nicht zum Endpunkt des Lernens.
Learning + Performance Support + Transfer
Die abschließende Seite dokumentiert die beiden Bildquellen der Text-Bild-Seite getrennt: KI-generiertes Material sowie das CC-lizenzierte Bild inklusive Lizenzart und Quellenpfad. Damit ist die Herkunft nicht nur intern bekannt, sondern im Projekt sichtbar nachvollziehbar.
Quellen und Lizenzbedingungen vollständig dokumentiertDie Oberfläche nutzt Off-White als ruhige Bühne. Cyan und Coral steuern Fokus, Interaktion und Retry; Growth Green bleibt bewusst für Erfolg und Completion reserviert. Dadurch bleibt das System klar und die Glass-Ästhetik übernimmt nie die semantische Führung.
Navy #073B5C · Petrol #0B708C · Turquoise #12A5B5 · Coral #FF684E · Growth Green #47B94C · Off-White #F8F5EC.
Organic Glass bildet die weiche Oberfläche. Der Bridge Arc verbindet und leitet. Der Diamond Anchor markiert aktiven Fokus bzw. den nächsten Schritt. Hover und Focus erhalten mehr Cyan-Glow; Green wird nur bei sicherem Abschluss eingesetzt.
Die Schritt-für-Schritt-Anleitung verlangt Projektdefinition, Moodboard, Styleguide, Cover, Text-Bild-Seite, zwei Fragetypen, zwei Feedbacks, zwei Abschlussfolien und interaktive Zustände. Die QCL bewertet zusätzlich Klarheit, Konsistenz, Bedienbarkeit und rechtliche Dokumentation. BRIDGEKID übersetzt diese Anforderungen in ein zusammenhängendes Produktsystem.
Eigenes Thema definiert und den realen Performance Gap für neu angekommene 10–16-Jährige beschrieben.
Farbwelt, Bildmotive, Produktästhetik und Real-Life-Transfer als visuelle Richtung verdichtet.
Farben, Poppins-Typografie, Bildsprache, Icons, Motion, Accessibility und Glass-System festgelegt.
Visuell reduzierte Einstiegsszene entwickelt, die Marke, Zielgruppe und Transferidee direkt zeigt.
KI-generiertes Bild und CC-Bild kombiniert, lerninhaltlich begründet und Lizenzierung sichtbar dokumentiert.
Radiobuttons und Checkboxen bewusst getrennt und als konsistente Interaktionsmuster ausgearbeitet.
Positives und konstruktives Feedback funktional differenziert: Green = Completion, Coral = Retry Cue.
Bestanden und noch nicht bestanden als zwei motivierende Pfade mit Mastery- bzw. Retry-Logik gestaltet.
Normal/Hover nicht nur erfüllt, sondern um Focus, Pressed, Completed, Disabled und Locked erweitert.
Umsetzung: Die gewünschte Stimmung wird nicht nur ästhetisch, sondern über Arrival, Understanding und Real-Life Transfer mit dem Thema verknüpft.
Umsetzung: Farben, Schrift, Bildstil, Icons, Motion, Accessibility, Sprache und wiederkehrende UI-Signaturen sind fest definiert.
Umsetzung: Single und Multiple Choice unterscheiden sich eindeutig; Feedback erklärt die Handlung und öffnet einen sinnvollen nächsten Schritt.
Umsetzung: Komponenten folgen demselben Styleguide und besitzen klar erkennbare Hover-, Focus-, Pressed-, Completion- und Disabled-States.
Umsetzung: Erfolg wird wertschätzend als Mastery kommuniziert; Nicht-Bestehen erhält Fortschritt und führt gezielt in den Retry.
Umsetzung: KI-generierte und CC-lizenzierte Bilder sind getrennt gekennzeichnet und die Lizenzinformationen sind Bestandteil der visuellen Dokumentation.
Die Website ist die kuratierte Portfolio-Ebene. Die ausführlichen Dokumente bleiben separat verfügbar — für didaktische Tiefe, Bewertungslogik und vollständige Projektbegründung.
29 Seiten · Ausgangssituation, Zielgruppe, Rolle, Tools, Didaktik, Produktarchitektur, Prozess, Output, Nutzen und Learnings.
6 Seiten · Project Canvas, Bedarf/Zielgruppe, Aufgabenanalyse, Lernziele, Constructive Alignment und Action Map.
17 Seiten · finale Reihenfolge von Projekt und Moodboard bis Interaktionszuständen, Zusatzscreens und Quellen.
Bewertungskriterien für Moodboard, Styleguide, Cover, Text-Bild, Fragen, Feedback, Abschluss, States und Quellen.
Aufgabenbasis der visuellen Gestaltung und User Interface Challenge.
