Lepsza Energia: filmowa opowieść o energii

Lepsza Energia działa w OZE od 2003 roku. Buduje farmy fotowoltaiczne na trackerach horyzontalnych z panelami dwustronnymi, magazyny energii, elektrownie wodne i wiatrowe, a do odczytu liczników ma własną iEnergię24. Strona nie mówiła o tym nic. Była z 2020 roku: podstrona oferty, podstrona systemów fotowoltaicznych i stopka „LepszaEnergia 2020”.

Firma pracuje z dwóch lokalizacji: siedziba i magazyn przy ul. Rzecznej 16 w Dwikozach w świętokrzyskiem oraz biuro w Niepołomicach pod Krakowem. Nie było formularza kontaktowego ani mapy, a działy wypisano jako ścianę numerów telefonów.

W briefie, który odesłaliśmy, wypisaliśmy, czego na nowej stronie nie będzie: zdjęć stockowych, uśmiechniętych rodzin na tle paneli i eko-klisz w rodzaju listków, żarówek czy „zielonych” tapet. Odpadło też wszystko, co wygląda jak „katalog instalatora”, bo tak wyglądają strony wszystkich konkurentów.

Dokument koncepcyjny postawił jeden cel: strona ma działać jak interaktywny film dokumentalny o nowoczesnej infrastrukturze energetycznej. Odwiedzający nie przegląda podstron, tylko przechodzi przez jeden ekosystem: od wschodu słońca nad farmą, przez magazyny energii, po zarządzanie energią i ładowanie pojazdów.

Punkty odniesienia nazwaliśmy otwarcie: Apple, Tesla Energy, Stripe, Vercel, Linear, SpaceX. Celowaliśmy w ten sam rejestr: minimalizm, kinowość, techniczną precyzję i spokój.

Cała podróż ma jedno ujęcie zamykające, zapisane w koncepcji, zanim powstała pierwsza linia kodu: ujęcie z lotu ptaka, które pokazuje skalę zrealizowanych projektów, potem ciepły zachód słońca nad siedzibą firmy i zaproszenie do kontaktu.

Znak powstał razem ze stroną, nie po niej. Trzy pochylone pastylki układają się w literę „E”: złoto fotowoltaiki i światła poranka, zieleń marki i działania, błękit magazynów energii. Środkowa belka jest krótsza i dzięki temu sylwetkę czyta się jako „E”.

Pochylenie wynosi −8°, więc strumienie pochylają się do przodu, jakby były w ruchu. Pastylki są w pełni zaokrąglone, tym samym promieniem co karty i przyciski serwisu, więc znak i interfejs mają jedną geometrię.

Te same kolory oznaczają rozdziały serwisu. Zieleń marki pojawia się tylko tam, gdzie można coś kliknąć: na przyciskach, linkach i w aktywnej nawigacji. Każdy rozdział ma za to własny akcent tematyczny.

Powstało dziewięć podstron. Każda otwiera się własną kinową pętlą hero i kończy przejściem „Energia płynie dalej” do kolejnego rozdziału. Przewijanie prowadzi przez opowieść bez twardych cięć, a ujęcie zatrzymuje się na ostatniej klatce, zamiast wracać do początku.

Na podstronie fotowoltaiki działa interaktywny symulator „Dzień z życia trackera”. Przewijając stronę, prowadzi się słońce nad farmą, a stoły zachowują się jak na prawdziwej: o świcie leżą płasko, otwierają się na wschód w rytmie backtrackingu, żeby rząd nie zacieniał sąsiada, śledzą słońce do mechanicznego limitu wychylenia i wieczorem kładą się z powrotem. Pod spodem strona liczy rzeczywistą geometrię słońca dla współrzędnych farmy.

Klient poprawił nas przy tych materiałach i miał rację. Pierwsze ujęcia pokazywały stoły trackerów o świcie w ruchu, którego prawdziwe nie wykonują. Przegenerowaliśmy oba: stoły płasko o pierwszym świetle, rzędy w osi północ-południe, obrót w stronę wschodzącego słońca dopiero pod koniec ujęcia. Zaznaczyliśmy uczciwie, że to nadal materiał generowany przez AI (Higgsfield/Seedance), więc stuprocentowej fizycznej precyzji nie gwarantujemy.

Część materiałów od klienta nie trafiła na stronę i powiedzieliśmy dlaczego. Surowe zrzuty ekranu SCADA i diagramy dostawcy w obcym brandingu wyglądałyby na ciemnej, spójnej stronie jak wklejka z ulotki, a praw do publikacji nie byliśmy pewni. Treść z nich weszła na stronę, opisana naszymi słowami i narysowana w stylu serwisu.

Zakres wyszedł poza sam serwis. Razem ze stroną powstał nowy znak z księgą znaku, wizytówki, komplet materiałów do mediów społecznościowych, szablony dokumentu i prezentacji oraz stopka e-mail.

Dwie rzeczy z tego kompletu to narzędzia. Generator wizytówek składa wizytówkę dla dowolnej osoby w firmie, więc dla nowego pracownika nie trzeba zamawiać projektu u grafika: wystarczy wpisać dane i wysłać PDF do drukarni. Generator postów zamienia wpisany tekst w gotowy post w identyfikacji marki, w trzech formatach i czterech motywach zgodnych z rozdziałami serwisu.

Oba generatory to zwykłe strony pod adresem serwisu, z wbudowanymi fontami marki. Działają na telefonie tak samo jak na komputerze. Celowo nie ma ich w menu i są zablokowane dla wyszukiwarek.

Serwis ruszył pod adresem lepszaenergia.pl jako w pełni statyczny eksport na hostingu współdzielonym home.pl. Bez bazy danych i CMS-a niewiele da się tu zaatakować. Eksport jest serwowany jako zwykłe pliki, bo ten serwer ignoruje reguły przepisywania adresów.

Dane firmy, oferta i struktura menu są opisane w jednym pliku konfiguracyjnym, więc zmiana numeru telefonu czy nazwy usługi aktualizuje wszystkie podstrony naraz. Liczba lat w OZE wylicza się przy każdej publikacji od roku 2003, więc nikt nie musi jej poprawiać co styczeń.

Dwanaście realizacji na stronie to prawdziwe inwestycje klienta z jego zdjęciami i opisami technicznymi, z filtrowaniem po kategoriach i mapą zasięgu. Wszystkie przykładowe realizacje usunęliśmy przed premierą.