UX/UI
Interaktive Lerninfografik
In diesem Projekt geht es um die Konzeption und Entwicklung einer interaktiven, animierten Lerninfografik zur verständlichen Aufbereitung komplexer medizinischer und statistischer Daten. Ziel war es, umfangreiche wissenschaftliche Inhalte in ein exploratives, strukturiertes und visuell zugängliches Informationsformat zu überführen, das sowohl im Web als auch im Messekontext einsetzbar ist.
Rolle:
Didaktische Strukturierung
Konzeption
Illustration & Animation
Prototyping
Medien:
Notebook
iPad
auf Messeständen
Tools:
Figma
Procreate
Lottie (JSON)
Projektdauer:
3 Wochen
Aufgabenstellung
Konzeption und Entwicklung einer interaktiven, schwach animierten Infografik zur verständlichen und strukturierten Aufbereitung komplexer wissenschaftlicher Daten. Ziel war die Entwicklung eines digitalen Informationsformats, das Aufmerksamkeit erzeugt, zum Verweilen einlädt und komplexe Inhalte nachhaltig verständlich macht.
Die Infografik sollte:
umfangreiches Zahlen- und Studienmaterial anschaulich visualisieren
eine klar erkennbare Kernaussage vermitteln
durch interaktive Elemente (Hover, Klick, Navigation) exploratives Lernen ermöglichen
visuelles Storytelling einsetzen, um emotionale Zugänge zu schaffen
detailliert, faktenbasiert und quellentransparent aufgebaut sein
sowohl im digitalen Raum als auch im Messekontext einsetzbar sein
Problem & Zielsetzung
Alkohol wird neben anderen Rauschmitteln gesellschaftlich häufig verharmlost. Fast kein gesellschaftliches Ereignis kommt ohne ihn aus – Hochzeiten, Geburtstage, Trauerfeiern, berufliche Erfolge oder sportliche Ereignisse. Er wird öffentlich in großem Stil beworben und ist gesellschaftlich vollumfänglich anerkannt und normalisiert. Den meisten Menschen ist dabei bewusst, dass Alkohol „schlecht für die Leber“ ist, dabei hat er einen erheblichen negativen Einfluss auf den gesamten Körper, vor allem auf die Psyche – besonders langfristig. Die zugrundeliegenden Daten sind komplex, vielschichtig und wenig einprägsam.
Die zentrale Herausforderung lautete:
Wie lassen sich komplexe, wissenschaftlich fundierte Gesundheitsdaten so strukturieren und visualisieren, dass sie ohne Vorwissen verständlich, interaktiv erfahrbar und nachhaltig lernwirksam vermittelt werden?
Wie lassen sich komplexe, wissenschaftlich fundierte Gesundheitsdaten so strukturieren und visualisieren, dass sie ohne Vorwissen verständlich, interaktiv erfahrbar und nachhaltig lernwirksam vermittelt werden?
Lösung
Mit der vorliegenden interaktiven, animierten Lerninfografik soll darüber aufgeklärt und ein Bewusstsein geschaffen werden, welche Auswirkungen Alkohol auf den menschlichen Körper hat, sowie versucht werden zu überzeugen, weniger bis keinen Alkohol zu konsumieren. Die Infografik verbindet lineare Wissensführung mit optionaler Vertiefung.
Entwicklung eines modular aufgebauten, interaktiven Informationssystems mit:
klarer thematischer Gliederung
selbstgesteuerter Exploration
visueller Hierarchie zur kognitiven Entlastung
gezieltem Einsatz von Animation und Metaphern
differenzierter Diagrammwahl je nach Informationsart
Informationsarchitektur & Nutzerführung
Die Lernlogik folgt dem Prinzip: Wahrnehmung → Vertiefung → Einordnung → Handlungsorientierung. Daher wurden die drei Themen wie in einem Browser in Tabs eingebettet eine chronologische Anordnung von links nach rechts gewählt. Zuerst erfährt der Nutzer, was unmittelbar nach dem Genuss von Alkohol passiert, danach welche Folgen bei langfristigem Konsum eintreten, und am Schluss bei „Empfehlung“ werden konkrete Orientierungswerte zur Prävention gegeben. Die Nutzer können Inhalte selbstständig erschließen, wodurch aktive Informationsverarbeitung und nachhaltigere Wissensaufnahme gefördert werden.
Kurzzeitfolgen-Tab
Der Bereich „Kurzzeitauswirkungen“ dient als bewusst niedrigschwelliger Einstieg in die Thematik. Da viele Menschen die unmittelbaren Effekte von Alkohol aus eigener Erfahrung kennen, ermöglicht dieser Abschnitt einen leichten, alltagsnahen Zugang zum Thema, bevor komplexere Langzeitfolgen vertieft werden. Die Promillestufen werden über eine Weinglas-Metapher interaktiv erschlossen: Mit steigendem Füllstand erhöht sich der Promillewert. Eine leicht animierte Figur unterstützt die Identifikation, während klar strukturierte Icons (z. B. Sehen, Koordination, Sprache) die Auswirkungen systematisch ordnen und schnell erfassbar machen.
Langezeitfolgen-Tab
Im Bereich „Langzeitauswirkungen“ wurde eine sachliche, reduzierte Darstellung des Körpers gewählt, um die medizinischen Inhalte klar und seriös zu vermitteln. Jedes Organ kann einzeln angeklickt werden, wodurch gezielt Informationen, Daten und Diagramme sichtbar werden. Diese explorative Struktur ermöglicht selbstgesteuertes Vertiefen komplexer Inhalte und fördert eine intensivere Auseinandersetzung. Visuelle Metaphern (z. B. verfärbte Organe oder symbolische Elemente) unterstützen das Verständnis und erleichtern die Zuordnung der dargestellten Informationen zum jeweiligen Organsystem.
Empfehlungs-Tab
Im Abschnitt „Empfehlung“ werden die zuvor vermittelten Informationen in konkrete Richtwerte überführt. Der Schwellenwert für riskanten Alkoholkonsum wird visuell einer Auswahl gängiger Standardgetränke gegenübergestellt. Durch die optische Verbindung gleicher Datenkategorien können Nutzer:innen ihren eigenen Konsum schnell einordnen und die abstrakten Mengenangaben besser nachvollziehen. Der Bereich dient damit der praktischen Orientierung und übersetzt komplexe Gesundheitsdaten in verständliche, handlungsleitende Empfehlungen.
Visualisierung komplexer Daten
Unterschiedliche Diagrammtypen wurden funktional eingesetzt. Ziel war es, abstrakte Zahlen in nachvollziehbare Relationen zu setzen.
Liniendiagramme für zeitliche Entwicklungen
Balken- und Säulendiagramme für Häufigkeitsverteilungen
Isotype-Darstellungen zur besseren Einprägsamkeit
gezieltem Einsatz von Animation und Metaphern
Donut-Diagramme für vergleichende Prozentdarstellungen
Technische Umsetzung & Animation
Der Prototyp wurde in Figma konzipiert und durch animierte sowie interaktive Elemente ergänzt. Die Figuren im Bereich „Kurzzeitauswirkungen“ sowie die Illustrationen im Tab „Langzeitauswirkungen“ wurden in Procreate illustriert, als Frame-Animation entwickelt, anschließend in JSON konvertiert und über Lottie integriert. Die Animationen sind in das systematische Screen- und Zustandsmanagement eingebunden und laufen automatisiert im Loop.
Reflexion
Das Projekt zeigt, dass wirksame digitale Wissensvermittlung entsteht durch:
klare Informationsarchitektur
didaktisch fundierte Reduktion
gezielte Interaktion
visuelle Unterstützung komplexer Inhalte
technische Umsetzbarkeit innerhalb modularer Systeme
Erst durch strukturierte Gliederung, gezielte Interaktion und didaktisch begründete Visualisierung wird aus umfangreichem Zahlenmaterial ein verständliches Lernformat. Die Kombination aus eigenständiger Illustration, datenbasierter Aufbereitung und interaktiver Navigation verdeutlicht, wie gestalterische Mittel gezielt eingesetzt werden können, um Lernprozesse zu unterstützen. Das Projekt bildet für mich eine Schnittstelle zwischen Informationsdesign, Instructional Design und digitaler Medienproduktion – und zeigt, wie komplexe Inhalte in zugängliche, explorative Lernformate überführt werden können.
UX/UI
Interaktive Lerninfografik
In diesem Projekt geht es um die Konzeption und Entwicklung einer interaktiven, animierten Lerninfografik zur verständlichen Aufbereitung komplexer medizinischer und statistischer Daten. Ziel war es, umfangreiche wissenschaftliche Inhalte in ein exploratives, strukturiertes und visuell zugängliches Informationsformat zu überführen, das sowohl im Web als auch im Messekontext einsetzbar ist.
Rolle:
Didaktische Strukturierung
Konzeption
Illustration & Animation
Prototyping
Medien:
Notebook
iPad
auf Messeständen
Tools:
Figma
Procreate
Lottie (JSON)
Projektdauer:
3 Wochen
Aufgabenstellung
Konzeption und Entwicklung einer interaktiven, schwach animierten Infografik zur verständlichen und strukturierten Aufbereitung komplexer wissenschaftlicher Daten. Ziel war die Entwicklung eines digitalen Informationsformats, das Aufmerksamkeit erzeugt, zum Verweilen einlädt und komplexe Inhalte nachhaltig verständlich macht.
Die Infografik sollte:
umfangreiches Zahlen- und Studienmaterial anschaulich visualisieren
eine klar erkennbare Kernaussage vermitteln
durch interaktive Elemente (Hover, Klick, Navigation) exploratives Lernen ermöglichen
visuelles Storytelling einsetzen, um emotionale Zugänge zu schaffen
detailliert, faktenbasiert und quellentransparent aufgebaut sein
sowohl im digitalen Raum als auch im Messekontext einsetzbar sein
Problem & Zielsetzung
Alkohol wird neben anderen Rauschmitteln gesellschaftlich häufig verharmlost. Fast kein gesellschaftliches Ereignis kommt ohne ihn aus – Hochzeiten, Geburtstage, Trauerfeiern, berufliche Erfolge oder sportliche Ereignisse. Er wird öffentlich in großem Stil beworben und ist gesellschaftlich vollumfänglich anerkannt und normalisiert. Den meisten Menschen ist dabei bewusst, dass Alkohol „schlecht für die Leber“ ist, dabei hat er einen erheblichen negativen Einfluss auf den gesamten Körper, vor allem auf die Psyche – besonders langfristig. Die zugrundeliegenden Daten sind komplex, vielschichtig und wenig einprägsam.
Die zentrale Herausforderung lautete:
Wie lassen sich komplexe, wissenschaftlich fundierte Gesundheitsdaten so strukturieren und visualisieren, dass sie ohne Vorwissen verständlich, interaktiv erfahrbar und nachhaltig lernwirksam vermittelt werden?
Wie lassen sich komplexe, wissenschaftlich fundierte Gesundheitsdaten so strukturieren und visualisieren, dass sie ohne Vorwissen verständlich, interaktiv erfahrbar und nachhaltig lernwirksam vermittelt werden?
Lösung
Mit der vorliegenden interaktiven, animierten Lerninfografik soll darüber aufgeklärt und ein Bewusstsein geschaffen werden, welche Auswirkungen Alkohol auf den menschlichen Körper hat, sowie versucht werden zu überzeugen, weniger bis keinen Alkohol zu konsumieren. Die Infografik verbindet lineare Wissensführung mit optionaler Vertiefung.
Entwicklung eines modular aufgebauten, interaktiven Informationssystems mit:
klarer thematischer Gliederung
selbstgesteuerter Exploration
visueller Hierarchie zur kognitiven Entlastung
gezieltem Einsatz von Animation und Metaphern
differenzierter Diagrammwahl je nach Informationsart
Informationsarchitektur & Nutzerführung
Die Lernlogik folgt dem Prinzip: Wahrnehmung → Vertiefung → Einordnung → Handlungsorientierung. Daher wurden die drei Themen wie in einem Browser in Tabs eingebettet eine chronologische Anordnung von links nach rechts gewählt. Zuerst erfährt der Nutzer, was unmittelbar nach dem Genuss von Alkohol passiert, danach welche Folgen bei langfristigem Konsum eintreten, und am Schluss bei „Empfehlung“ werden konkrete Orientierungswerte zur Prävention gegeben. Die Nutzer können Inhalte selbstständig erschließen, wodurch aktive Informationsverarbeitung und nachhaltigere Wissensaufnahme gefördert werden.
Kurzzeitfolgen-Tab
Der Bereich „Kurzzeitauswirkungen“ dient als bewusst niedrigschwelliger Einstieg in die Thematik. Da viele Menschen die unmittelbaren Effekte von Alkohol aus eigener Erfahrung kennen, ermöglicht dieser Abschnitt einen leichten, alltagsnahen Zugang zum Thema, bevor komplexere Langzeitfolgen vertieft werden. Die Promillestufen werden über eine Weinglas-Metapher interaktiv erschlossen: Mit steigendem Füllstand erhöht sich der Promillewert. Eine leicht animierte Figur unterstützt die Identifikation, während klar strukturierte Icons (z. B. Sehen, Koordination, Sprache) die Auswirkungen systematisch ordnen und schnell erfassbar machen.
Langezeitfolgen-Tab
Im Bereich „Langzeitauswirkungen“ wurde eine sachliche, reduzierte Darstellung des Körpers gewählt, um die medizinischen Inhalte klar und seriös zu vermitteln. Jedes Organ kann einzeln angeklickt werden, wodurch gezielt Informationen, Daten und Diagramme sichtbar werden. Diese explorative Struktur ermöglicht selbstgesteuertes Vertiefen komplexer Inhalte und fördert eine intensivere Auseinandersetzung. Visuelle Metaphern (z. B. verfärbte Organe oder symbolische Elemente) unterstützen das Verständnis und erleichtern die Zuordnung der dargestellten Informationen zum jeweiligen Organsystem.
Empfehlungs-Tab
Im Abschnitt „Empfehlung“ werden die zuvor vermittelten Informationen in konkrete Richtwerte überführt. Der Schwellenwert für riskanten Alkoholkonsum wird visuell einer Auswahl gängiger Standardgetränke gegenübergestellt. Durch die optische Verbindung gleicher Datenkategorien können Nutzer:innen ihren eigenen Konsum schnell einordnen und die abstrakten Mengenangaben besser nachvollziehen. Der Bereich dient damit der praktischen Orientierung und übersetzt komplexe Gesundheitsdaten in verständliche, handlungsleitende Empfehlungen.
Visualisierung komplexer Daten
Unterschiedliche Diagrammtypen wurden funktional eingesetzt. Ziel war es, abstrakte Zahlen in nachvollziehbare Relationen zu setzen.
Liniendiagramme für zeitliche Entwicklungen
Balken- und Säulendiagramme für Häufigkeitsverteilungen
Isotype-Darstellungen zur besseren Einprägsamkeit
gezieltem Einsatz von Animation und Metaphern
Donut-Diagramme für vergleichende Prozentdarstellungen
Technische Umsetzung & Animation
Der Prototyp wurde in Figma konzipiert und durch animierte sowie interaktive Elemente ergänzt. Die Figuren im Bereich „Kurzzeitauswirkungen“ sowie die Illustrationen im Tab „Langzeitauswirkungen“ wurden in Procreate illustriert, als Frame-Animation entwickelt, anschließend in JSON konvertiert und über Lottie integriert. Die Animationen sind in das systematische Screen- und Zustandsmanagement eingebunden und laufen automatisiert im Loop.
Reflexion
Das Projekt zeigt, dass wirksame digitale Wissensvermittlung entsteht durch:
klare Informationsarchitektur
didaktisch fundierte Reduktion
gezielte Interaktion
visuelle Unterstützung komplexer Inhalte
technische Umsetzbarkeit innerhalb modularer Systeme
Erst durch strukturierte Gliederung, gezielte Interaktion und didaktisch begründete Visualisierung wird aus umfangreichem Zahlenmaterial ein verständliches Lernformat. Die Kombination aus eigenständiger Illustration, datenbasierter Aufbereitung und interaktiver Navigation verdeutlicht, wie gestalterische Mittel gezielt eingesetzt werden können, um Lernprozesse zu unterstützen. Das Projekt bildet für mich eine Schnittstelle zwischen Informationsdesign, Instructional Design und digitaler Medienproduktion – und zeigt, wie komplexe Inhalte in zugängliche, explorative Lernformate überführt werden können.
UX/UI
Interaktive Lerninfografik
In diesem Projekt geht es um die Konzeption und Entwicklung einer interaktiven, animierten Lerninfografik zur verständlichen Aufbereitung komplexer medizinischer und statistischer Daten. Ziel war es, umfangreiche wissenschaftliche Inhalte in ein exploratives, strukturiertes und visuell zugängliches Informationsformat zu überführen, das sowohl im Web als auch im Messekontext einsetzbar ist.
Rolle:
Didaktische Strukturierung
Konzeption
Illustration & Animation
Prototyping
Medien:
Notebook
iPad
auf Messeständen
Tools:
Figma
Procreate
Lottie (JSON)
Projektdauer:
3 Wochen
Aufgabenstellung
Konzeption und Entwicklung einer interaktiven, schwach animierten Infografik zur verständlichen und strukturierten Aufbereitung komplexer wissenschaftlicher Daten. Ziel war die Entwicklung eines digitalen Informationsformats, das Aufmerksamkeit erzeugt, zum Verweilen einlädt und komplexe Inhalte nachhaltig verständlich macht.
Die Infografik sollte:
umfangreiches Zahlen- und Studienmaterial anschaulich visualisieren
eine klar erkennbare Kernaussage vermitteln
durch interaktive Elemente (Hover, Klick, Navigation) exploratives Lernen ermöglichen
visuelles Storytelling einsetzen, um emotionale Zugänge zu schaffen
detailliert, faktenbasiert und quellentransparent aufgebaut sein
sowohl im digitalen Raum als auch im Messekontext einsetzbar sein
Problem & Zielsetzung
Alkohol wird neben anderen Rauschmitteln gesellschaftlich häufig verharmlost. Fast kein gesellschaftliches Ereignis kommt ohne ihn aus – Hochzeiten, Geburtstage, Trauerfeiern, berufliche Erfolge oder sportliche Ereignisse. Er wird öffentlich in großem Stil beworben und ist gesellschaftlich vollumfänglich anerkannt und normalisiert. Den meisten Menschen ist dabei bewusst, dass Alkohol „schlecht für die Leber“ ist, dabei hat er einen erheblichen negativen Einfluss auf den gesamten Körper, vor allem auf die Psyche – besonders langfristig. Die zugrundeliegenden Daten sind komplex, vielschichtig und wenig einprägsam.
Die zentrale Herausforderung lautete:
Wie lassen sich komplexe, wissenschaftlich fundierte Gesundheitsdaten so strukturieren und visualisieren, dass sie ohne Vorwissen verständlich, interaktiv erfahrbar und nachhaltig lernwirksam vermittelt werden?
Wie lassen sich komplexe, wissenschaftlich fundierte Gesundheitsdaten so strukturieren und visualisieren, dass sie ohne Vorwissen verständlich, interaktiv erfahrbar und nachhaltig lernwirksam vermittelt werden?
Lösung
Mit der vorliegenden interaktiven, animierten Lerninfografik soll darüber aufgeklärt und ein Bewusstsein geschaffen werden, welche Auswirkungen Alkohol auf den menschlichen Körper hat, sowie versucht werden zu überzeugen, weniger bis keinen Alkohol zu konsumieren. Die Infografik verbindet lineare Wissensführung mit optionaler Vertiefung.
Entwicklung eines modular aufgebauten, interaktiven Informationssystems mit:
klarer thematischer Gliederung
selbstgesteuerter Exploration
visueller Hierarchie zur kognitiven Entlastung
gezieltem Einsatz von Animation und Metaphern
differenzierter Diagrammwahl je nach Informationsart
Informationsarchitektur & Nutzerführung
Die Lernlogik folgt dem Prinzip: Wahrnehmung → Vertiefung → Einordnung → Handlungsorientierung. Daher wurden die drei Themen wie in einem Browser in Tabs eingebettet eine chronologische Anordnung von links nach rechts gewählt. Zuerst erfährt der Nutzer, was unmittelbar nach dem Genuss von Alkohol passiert, danach welche Folgen bei langfristigem Konsum eintreten, und am Schluss bei „Empfehlung“ werden konkrete Orientierungswerte zur Prävention gegeben. Die Nutzer können Inhalte selbstständig erschließen, wodurch aktive Informationsverarbeitung und nachhaltigere Wissensaufnahme gefördert werden.
Kurzzeitfolgen-Tab
Der Bereich „Kurzzeitauswirkungen“ dient als bewusst niedrigschwelliger Einstieg in die Thematik. Da viele Menschen die unmittelbaren Effekte von Alkohol aus eigener Erfahrung kennen, ermöglicht dieser Abschnitt einen leichten, alltagsnahen Zugang zum Thema, bevor komplexere Langzeitfolgen vertieft werden. Die Promillestufen werden über eine Weinglas-Metapher interaktiv erschlossen: Mit steigendem Füllstand erhöht sich der Promillewert. Eine leicht animierte Figur unterstützt die Identifikation, während klar strukturierte Icons (z. B. Sehen, Koordination, Sprache) die Auswirkungen systematisch ordnen und schnell erfassbar machen.
Langezeitfolgen-Tab
Im Bereich „Langzeitauswirkungen“ wurde eine sachliche, reduzierte Darstellung des Körpers gewählt, um die medizinischen Inhalte klar und seriös zu vermitteln. Jedes Organ kann einzeln angeklickt werden, wodurch gezielt Informationen, Daten und Diagramme sichtbar werden. Diese explorative Struktur ermöglicht selbstgesteuertes Vertiefen komplexer Inhalte und fördert eine intensivere Auseinandersetzung. Visuelle Metaphern (z. B. verfärbte Organe oder symbolische Elemente) unterstützen das Verständnis und erleichtern die Zuordnung der dargestellten Informationen zum jeweiligen Organsystem.
Empfehlungs-Tab
Im Abschnitt „Empfehlung“ werden die zuvor vermittelten Informationen in konkrete Richtwerte überführt. Der Schwellenwert für riskanten Alkoholkonsum wird visuell einer Auswahl gängiger Standardgetränke gegenübergestellt. Durch die optische Verbindung gleicher Datenkategorien können Nutzer:innen ihren eigenen Konsum schnell einordnen und die abstrakten Mengenangaben besser nachvollziehen. Der Bereich dient damit der praktischen Orientierung und übersetzt komplexe Gesundheitsdaten in verständliche, handlungsleitende Empfehlungen.
Visualisierung komplexer Daten
Unterschiedliche Diagrammtypen wurden funktional eingesetzt. Ziel war es, abstrakte Zahlen in nachvollziehbare Relationen zu setzen.
Liniendiagramme für zeitliche Entwicklungen
Balken- und Säulendiagramme für Häufigkeitsverteilungen
Isotype-Darstellungen zur besseren Einprägsamkeit
gezieltem Einsatz von Animation und Metaphern
Donut-Diagramme für vergleichende Prozentdarstellungen
Technische Umsetzung & Animation
Der Prototyp wurde in Figma konzipiert und durch animierte sowie interaktive Elemente ergänzt. Die Figuren im Bereich „Kurzzeitauswirkungen“ sowie die Illustrationen im Tab „Langzeitauswirkungen“ wurden in Procreate illustriert, als Frame-Animation entwickelt, anschließend in JSON konvertiert und über Lottie integriert. Die Animationen sind in das systematische Screen- und Zustandsmanagement eingebunden und laufen automatisiert im Loop.
Reflexion
Das Projekt zeigt, dass wirksame digitale Wissensvermittlung entsteht durch:
klare Informationsarchitektur
didaktisch fundierte Reduktion
gezielte Interaktion
visuelle Unterstützung komplexer Inhalte
technische Umsetzbarkeit innerhalb modularer Systeme
Erst durch strukturierte Gliederung, gezielte Interaktion und didaktisch begründete Visualisierung wird aus umfangreichem Zahlenmaterial ein verständliches Lernformat. Die Kombination aus eigenständiger Illustration, datenbasierter Aufbereitung und interaktiver Navigation verdeutlicht, wie gestalterische Mittel gezielt eingesetzt werden können, um Lernprozesse zu unterstützen. Das Projekt bildet für mich eine Schnittstelle zwischen Informationsdesign, Instructional Design und digitaler Medienproduktion – und zeigt, wie komplexe Inhalte in zugängliche, explorative Lernformate überführt werden können.