B-Vitamine: Bedeutung, Wirkung und Versorgung im Überblick

von

Nahrungsergänzungsmittel sind in der heutigen Zeit allgegenwärtig – häufig werden ihnen viele positive Eigenschaften zugesprochen. Doch wie wirksam sind sie wirklich und für wen sind sie tatsächlich relevant?

Im Mittelpunkt dieses Projekts standen die B-Vitamine. Sie spielen bei vielen Körperfunktionen eine wichtige Rolle und können vor allem für bestimmte Gruppen wie Schwangere, Vegetarier*innen, Veganer*innen oder sportlich aktive Personen besonders relevant sein. Aufgrund von besonderen Lebensumständen, Ernährungsformen oder körperlicher Belastung kann ihr Bedarf an B-Vitaminen erhöht sein.

Das Ziel des Projekts war, Informationen rund um die B-Vitamine anschaulich und ansprechend aufzubereiten. Als Anwendungsidee dafür entstand ein Packaging-Konzept für einen Hafer-Drink – ein milchfreies Produkt, das sich gut in eine pflanzenbasierte Ernährung integrieren lässt und zunehmend auch von der breiteren Bevölkerung genutzt wird. Die Verpackung enthält einen QR-Code, der zu einer informativen Website über B-Vitamine führt.

Vorgehen

Zu Beginn recherchierte ich mithilfe von klassischen und digitalen Quellen, um mir ein Grundwissen anzueignen. Daraus entstand die Idee, die recherchierten Inhalte nicht nur informativ, sondern auch visuell ansprechend und alltagsnah darzustellen.

Als Anwendungsbeispiel entwickelte ich ein Packaging-Konzept für einen Hafer-Drink, dessen Verpackung einen QR-Code enthält, der direkt zur begleitenden Projekt-Website führt. Die Verpackung wurde zuerst in Adobe Illustrator gestaltet und anschliessend in Photoshop weiterbearbeitet.

Für die Website erstellte ich verschiedene Layout-Entwürfe in Figma. Die technische Umsetzung des Layouts erfolgte dann in Visual Studio Code mit HTML, CSS und JavaScript. Das Coden machte Spass und bot die Gelegenheit, das im Studium Gelernte praktisch anzuwenden und zu vertiefen.

Visuelle Inhalte wie Fotos oder GIFs entstanden in Photoshop und wurden anschliessend mit After Effects animiert, um der Website mehr Dynamik zu verleihen.

Ein komplett neuer Bereich war für mich die Arbeit mit Blender. Ziel war es, ein interaktives 3D-Modell einer Pille zu erstellen, das sich auf der Website in 360° bewegen lässt. Die Einarbeitung hat etwas Zeit und Geduld gebraucht, aber Tutorials konnten helfen. Schliesslich konnte das Modell erfolgreich auf den passenden Unterseiten eingebunden werden.

Ein zusätzlich eingebauter Scroll-Effekt mit CSS sorgte dafür, dass die Website dynamischer wirkt.

Hier ein paar Einblicke:

Die Projekt-Website kannst du unter folgendem Link besuchen: Überblick zu den B-Vitaminen

(vha)

Besonders gefiel mir, gleichzeitig mit so vielen verschiedenen Programmen zu arbeiten: Photoshop, Illustrator, After Effects, Figma, Blender und Visual Studio Code kamen zum Einsatz. Diese Vielfalt ermöglichte Einblicke in unterschiedliche Arbeitsweisen und war sehr motivierend.

Die grösste Herausforderung stellte der Einstieg in Blender dar. Die Benutzeroberfläche war neu für mich und erforderte eine gewisse Einarbeitungszeit. Tutorials konnten dabei gut weiterhelfen.

Auch beim Programmieren konnten wertvolle Erkenntnisse gewonnen werden, wobei vor allem kleinere CSS- Animationen mein Interesse geweckt haben.

Eine wichtige Erkenntnis war der Umgang mit GIFs: Durch die vielen Einzelbilder und die begrenzten Möglichkeiten zur Komprimierung wurden die Animationen grösser als erwartet, was sich negativ auf die Ladezeit der Website auswirkte. Um die Dateigrösse in einem vertretbaren Rahmen zu halten, mussten die Dateien deshalb optimiert und neu exportiert werden. Das möchte ich bei zukünftigen Projekten von Anfang an besser berücksichtigen.

Für den Scroll-Effekt nutzte ich die CSS-Funktion «animation-timeline: view();», die Inhalte dynamisch beim Scrollen animiert. Visuell gefiel mir der Effekt sehr, jedoch stellte sich später heraus, dass er nicht von allen Browsern (Firefox und Safari) unterstützt wird. Da ich während der gesamten Entwicklung mit Chrome gearbeitet habe, habe ich das Problem erst spät entdeckt. Für zukünftige Projekte möchte ich deshalb stärker darauf achten, Effekte zu wählen, die möglichst browserübergreifend funktionieren.

Rückblickend war es für mich ein grosses Highlight, Blender auszuprobieren, da ich mich schon lange dafür interessiert hatte. Die Kombination aus Recherche, Design und Programmierung brachte viel Abwechslung in den Arbeitsprozess, was sehr spannend und lehrreich war.

Hier noch meine Learnings in Kürze:

  • Animationen sollten hinsichtlich der Dateigrösse optimiert werden, um die Ladezeit zu minimieren. Dasselbe gilt für Bilder.
  • CSS-Animationen und Scroll-Effekte verleihen der Website Dynamik, sollten aber zuerst überprüft werden, ob sie mit allen Browsern kompatibel sind.
  • Die Hauptseite muss zwingend «index.html» heissen und HTML-Dateinamen sollten keine Grossbuchstaben enthalten.
  • Das Zeitmanagement sollte nicht unterschätzt werden, besonders bei der Einarbeitung in neue Programme. Realistische Zeitpuffer helfen, Stress zu vermeiden.