Orlen: Web development

case studies

data publikacji

Animacje 3D, nietypowa nawigacja i bezpieczeństwo bez kompromisów? Tak! To strona kampanii "Energia jutra" dla Orlenu.

zadanie

01

Orlen, jesienią 2025 wystartował z nową kampanią pod hasłem “Energia jutra zaczyna się dziś”. Na jej potrzeby zbudowaliśmy, bogatą w animacje stronę wizerunkową, która prezentowała największe inwestycje koncernu. Do projektu zaprosiła nas agencja TWIN - autorzy konceptu, UI, oraz animacje 3D.

 

Pytania z jakimi się mierzyliśmy:

  • Jak sprawić, żeby animacje 3D dostarczone w Spline nie obciążyły strony?
  • Jak najlepiej wdrożyć nietypową mechanikę strony (o tym poniżej)?
  • Jakie wymogi bezpieczeństwa musimy spełnić?

rozwiązanie

02

Nawigacja strony działa na scroll. Każde przewinięcie to nowa kategoria inwestycji Orlenu (wraz z odrębną animacją własną i wspólną animacją przejścia).

 

Podczas przewijania w skrajnych częściach ekranu, tworzących ramę dla głównych treści dostępne są:

  • wszystkie kategorie inwestycji w nawigacji dolnej,
  • wideo wizerunkowe, wysuwające się zza ekranu,
  • powrót do startu, po kliknięciu logotypu,
  • polityka prywatności.

przebieg prac

03

Początkowo koncept nie obejmował nawigowania po stronie poprzez przewijanie (scroll). Odkrywanie kolejnych kategorii miało działać, jak w klasycznej nawigacji, na klik. Kiedy, zgodnie z harmonogramem rozpoczynaliśmy testy, zostaliśmy zapytani czy dalibyśmy radę wprowadzić nawigację poprzez przewijanie w niezmienionym terminie. Daliśmy! 😀

 

Dodatkowym wyzwaniem okazało się zgranie nietypowych animacji z wtyczką obsługującą cookies (Cookiebot by Usercentrics). Wtyczka wysyłała błędy, które wymagały dodatkowych reguł, aby strona działała poprawnie funkcjonalnie i z godnie z wymogami prawnymi. Klient, jako spółka o istotnym znaczeniu dla gospodarki państwa, ma rygorystyczną politykę cyberbezpieczeństwa. W efekcie po zakończeniu prac dewelopersko-testerskich dostarczone pliki ze stroną przechodziły orlenowskie testy bezpieczeństwa. Naturalnie przeszły je bezbłędnie, a strona wystartowała zgodnie z harmonogramem i przy trójstronnym zadowoleniu ze zrealizowanego projektu.