Der Projekthintergrund

Dieses Print2Mobile-Projekt wurde im Rahmen des Masterstudiengangs Interactive Technologies an der FH St. Pölten umgesetzt. Ziel war es, Nutzer*innen von einem physischen Medium mithilfe eines QR-Codes nahtlos in die digitale Welt zu begleiten.

Besonders wichtig ist dabei die Einhaltung bestimmter Gestaltungs- und Usability-Regeln, damit der Übergang verständlich, niederschwellig und für alle Endgeräte geeignet ist. Mein Ansatz war es, dieses Konzept in Form eines digitalen Adventskalenders umzusetzen.

Das Projekt

Die Idee des Adventskalenders war es, vom 1. bis 24. Dezember jeden Tag einen Tipp oder eine Information rund um das Thema Veganismus bereitzustellen. Anders als bei klassischen Adventskalendern habe ich bewusst darauf verzichtet, den Zugriff auf einzelne Tage zu beschränken. So bleiben die Inhalte im Sinne der Lehrveranstaltung jederzeit verfügbar, da Nutzer*innen unabhängig vom Datum auf alle Inhalte zugreifen können.

Ziel des Projekts war es, nicht nur Rezepte zu teilen, sondern auch das Bewusstsein für die Vorteile eines veganen Lebensstils zu fördern und leicht verständliche Informationen zu vermitteln.

Das Poster

Kernstück des Print2Mobile-Projekts ist ein Poster, auf dem 24 nummerierte QR-Codes abgebildet sind. Durch das Scannen eines Codes gelangt man direkt zum jeweiligen Türchen im digitalen Adventskalender.

Alternativ zum Poster lassen sich die Codes auch ausschneiden und individuell in einen physischen Adventskalender integrieren.

Die Umsetzung

Die Webanwendung wurde mit React und Tailwind CSS entwickelt. Für Türchen 2 habe ich ein interaktives Diagramm mit ApexCharts eingebunden.

Darüber hinaus bietet die App einen Light/Dark/System-Mode, der sich an den Einstellungen des Betriebssystems orientiert und im Local Storage gespeichert wird. Nicht nur Hintergrund- und Textfarben, sondern auch die SVG-Grafik auf der Startseite passen sich dynamisch an den gewählten Modus an.

Weitere Informationen zum Projekt und den Quellcode findest du auf GitHub.

Meine Learnings

Besonders spannend war, dass ich im Rahmen dieses Projekts erstmals mit Tailwind CSS gearbeitet habe. Der Einstieg war erstaunlich einfach, und die Arbeit mit Variablen insbesondere für Dark- und Light-Mode hat mir sehr gefallen. Auch die Implementierung des Themeswitchers war eine neue Erfahrung, die sich als unkompliziert und zugleich lehrreich herausgestellt hat.

Eine weitere Herausforderung bestand darin, die „10 Regeln für QR-Codes“ einzuhalten. Außerdem war das Generieren von 24 individuellen QR-Codes für das Poster aufwendig, dennoch hat mich die Idee überzeugt, da dadurch ein direkter und spielerischer Zugang zur Web-App ermöglicht wird.