Kundenauftrag Websites

Website für ein Käsefestival: animierte Landingpage

Eine Landingpage für das Redesign eines Käsefestivals in Kostroma: dreitägiges Programm in Tabs, die Käsereien, Souvenirs, Tickets, Fragen und Antworten sowie ein Geländeplan. Warmes Gelb und Schokoladenbraun aus dem Erscheinungsbild, große Typografie und Animation in jedem Abschnitt. Versionen für Computer und Smartphone, dazu Scroll-Aufnahmen für die Projektpräsentation.

12: Abschnitte auf einer Seite
3: Programmtage in Tabs
2: Versionen: Computer und Smartphone

Ähnliche Aufgabe besprechen Alle Arbeiten: Websites

Website für ein Käsefestival: animierte Landingpage — Eine Aufnahme der Live-Website: Scrollen, Animationen und Übergänge so, wie ein Besucher sie sieht. Wechseln Sie zwischen Computer und Smartphone; die Abschnitte rechts springen an die jeweilige Stelle der Seite. Die Leertaste pausiert, die Pfeiltasten wechseln zwischen den Abschnitten.

Die Aufgabe

Das neue Erscheinungsbild des Festivals auf einer Website zeigen: alles, was Besucher brauchen, auf einer Seite, dazu ein kurzes Video der animierten Website für die Projektpräsentation.

Meine Umsetzung

Eine Landingpage mit zwölf Abschnitten: Über das Festival, Programm, Käsereien, Kostroma, Souvenirs, Fotos der Vorjahre, Tickets, Fragen, Karte und Newsletter
Der Startbereich erwacht zum Leben: Der Käse fällt ins Bild und federt nach, Löcher und Buchstaben erscheinen nacheinander, dann gleiten Daten und Stadt herein
Animation mit GSAP und ScrollTrigger: Blöcke erscheinen beim Scrollen, ein Laufband, Parallax bei den Fotos, der Header wird nach dem Startbereich gelb
Das Dreitagesprogramm in Tabs, aufklappbare Antworten, Karten, die sich unter dem Mauszeiger anheben
Der Geländeplan ist in SVG gezeichnet: Bühnen, Stände, die Uferpromenade und nummerierte Punkte
Die mobile Version: eine Spalte, Burger-Menü, große Buttons
Die Scroll-Aufnahmen sind Bild für Bild aufgezeichnet: Die Uhr der Seite rückt jeweils genau ein Bild weiter, deshalb ruckelt die Animation nie

Nachweis

Die Seite zeigt eine Aufnahme der Website am Computer und auf dem Smartphone; per Klick springen Sie zu jedem beliebigen Abschnitt

Materialien

11 · Zum Vergrößern anklicken

Womit Sie mich außerdem beauftragen können

Eine Landingpage für eine Dienstleistung oder einen Kurs, mit Buchungsformular
Eine Katalog-Website: Arbeiten oder Produkte nach Rubriken, jeweils mit eigener Seite und Bestellformular
Eine von jemand anderem begonnene Website fertigstellen oder neu aufbauen
Formulare einer WordPress-, Tilda- oder Bitrix-Website mit CRM und Telegram verbinden
HTML-E-Mail-Vorlagen für CRM-Mailings
Eine Website beschleunigen, die mobile Version reparieren, ein SEO-Audit durchführen

Ähnliche Aufgabe besprechen