Stadttunnel
2025
Im Rahmen des Moduls «Visual Design» (Frühjahrssemester 2025) bestand die Aufgabe darin, eine Landingpage zur Eröffnung des Zürcher Stadttunnels zu gestalten. Der Fokus lag dabei auf einer emotionalisierenden, visuell aktivierenden Gestaltung gemäss «Design with an intention» rund um das Velofest am 22. Mai. Neben funktionalen Inhalten wie Agenda, Tickets und FAQs sollte die Seite auch zentrale Themen wie urbane Mobilität, Gemeinschaft und den Eventcharakter widerspiegeln. Die Umsetzung erfolgte im Format Desktop 1440 × 1024 px mit Scrollführung. Die Landingpage verfügt über eine Sprungnavigation und einem aufklappbaren Menü zu sämtlichen Webseiten der verschiedenen Sponsoren des Velofests.
Der Aufbau der Landingpage ist modular und logisch gegliedert: Ein plakatives Hero-Modul setzt den Startpunkt, gefolgt von Event-Highlights wie Veloparade, Agenda, Partner-Slider und einem prominenten Ticket-CTA. Visuelle Bewegung entsteht durch schräge Trenner, reduzierte Illustrationen, kontextbezogene Piktogramme und eine moderne Farbstimmung in Violett-, Gelb- und Grüntönen. Die Kombination aus städtischer Grafik und klarer Typografie verankert den Auftritt visuell im urbanen Kontext, während die Bildsprache Gemeinschaft und Dynamik vermittelt. Inhaltlich wird nicht nur informiert, sondern auch aktiviert – mit direkter Verlinkung zu externen Angeboten wie Ticketing und Eventpartnern.
Die Umsetzung erfolgte vollständig in Figma, inklusive Gestaltung aller UI-Elemente, Layout, Typografie und responsivem Aufbau. Besondere Aufmerksamkeit galt der modularen Struktur, die flexibel erweiterbar ist und sowohl auf Desktop als auch anderen Formaten adaptierbar bleibt.
Details
Ziele der Landingpage
Vermittlung einer einladenden, lebendigen Stimmung rund um das Velofest
Visualisierung der Themen Spass, Gemeinschaft und nachhaltige Mobilität
Klare Nutzerführung zu Ticketkauf, Event-Highlights, FAQs und Partnerinfos
Gestaltung einer scrollbar aufgebauten Eventseite mit aktivierenden Elementen
Meine Aufgaben
Strukturierung und Gestaltung der gesamten Landingpage in Desktop-Format
Visuelle Übersetzung der Event-Intention in ein urbanes, dynamisches Screendesign
Auswahl und Integration geeigneter Farben, Illustrationen, Typografie und Icons
Umsetzung eines klickbaren Figma-Prototyps mit Fokus auf Informationsarchitektur und Nutzeremotion
