Tim Maurer
Tim Maurer
07.02.2026

html und css: Webentwicklung und 3D-Design im Rahmen einer Crossmedia Campaign

Im Rahmen des Moduls Crossmedia Campaign bestand die Aufgabe darin, eine Markenidee crossmedial zu konzipieren und digital umzusetzen. Für unser Projekt "Prana Rin" (unser eigenes Elektrolyten-Getränk) entwickelten wir die dazugehörige Launch-Kampagne. Ziel war es, nicht nur ein visuelles Konzept zu entwickeln, sondern die Website inklusive 3D-Animation, Programmierung und Hosting eigenständig zu realisieren.

Bildschirmfoto 2026 01 25 um 23 12 25

Im Rahmen des Moduls Crossmedia Campaign bestand die Aufgabe darin, eine Markenidee crossmedial zu konzipieren und digital umzusetzen. Für unser Projekt "Prana Rin" (unser eigenes Elektrolyten-Getränk) entwickelten wir die dazugehörige Launch-Kampagne. Wir entschieden uns bewusst dafür, den Fokus nicht nur auf das inhaltliche und gestalterische Konzept zu legen, sondern auch die technische Umsetzung vollständig selbst zu übernehmen. Ziel war es, eine eigenständige Website zu entwickeln, deren Struktur, Gestaltung und Funktionalität nachvollziehbar aus eigener Arbeit entstanden sind.

Ausgangspunkt bildete die Markenidee Prana Rin, die durch eine umfängliche crossmediale Kampagne bekannt gemacht wird. Um diese Anforderungen umzusetzen, widmete ich mich dem gesamten Teilprojekt der Webseite. Ich verzichtete bewusst auf Website-Baukästen und Templates und eignete mir stattdessen die notwendigen Grundlagen der Webentwicklung selbst an. Dazu gehörten insbesondere HTML, CSS und JavaScript sowie der Umgang mit einer Entwicklungsumgebung. Als zentrales Arbeitswerkzeug kam Adobe Dreamweaver zum Einsatz, da es die Arbeit mit Code und eine direkte visuelle Kontrolle des Ergebnisses verbindet. Durch iteratives Arbeiten konnte ich Änderungen unmittelbar überprüfen und mein technisches Verständnis kontinuierlich vertiefen.

 
Bildschirmfoto 2026 01 25 um 23 41 04

Parallel zur Webentwicklung begann ich, mich mit 3D-Modelling auseinanderzusetzen. Ziel war es, eine eigenes 3D-Getränkedose zu erstellen, das als zentrales visuelles Element auf der Website eingesetzt wird. Hierfür arbeitete ich mit der Software Blender, in der ich grundlegende Kenntnisse in den Bereichen Modellierung, Materialgestaltung, Lichtsetzung und Animation erlernte. Die animierte, rotierende Dose wurde dabei zum zentralen Gestaltungselement, das der Website räumliche Tiefe und visuelle Dynamik verleiht.

Eine besondere Herausforderung stellte die Integration der 3D-Animation in die Website dar. Das Objekt sollte nicht als statisches Bild zu sehen sein, sondern als webbasiertes 3D-Element, welches sich in einem Loop dreht. Dafür setzte ich mich zusätzlich mit der Optimierung von 3D-Inhalten für den Einsatz im Browser auseinander und berücksichtigte Aspekte wie Dateigrösse, Performance und Kompatibilität. Dieser Schritt verdeutlichte die enge Wechselwirkung zwischen Gestaltung und technischer Umsetzung.

 
 
Bildschirmfoto 2026 01 25 um 13 05 17
Bildschirmfoto 2026 01 24 um 16 21 27

Nach Abschluss der gestalterischen und technischen Arbeiten erfolgte die Veröffentlichung der Website. Auch das Hosting, die Domain-Einrichtung sowie die Liveschaltung übernahm ich eigenständig. Die Website ist unter https://www.pranarin.ch erreichbar und stellt das Ergebnis eines durchgängigen Lern- und Umsetzungsprozesses dar.

Rückblickend ermöglichte mir das Projekt im Modul Crossmedia Campaign, digitale Inhalte ganzheitlich zu betrachten. Neben der gestalterischen Konzeption konnte ich mir grundlegende Kompetenzen in Webentwicklung und 3D-Design aneignen und diese in einem konkreten Anwendungsfall umsetzen. Das Projekt zeigte, wie wichtig das Zusammenspiel von Konzept, Design und Technik für die Realisierung zeitgemässer digitaler Markenauftritte ist.