Sklep internetowy
Strona inwestycji deweloperskiej
Strona kampanii promocyjnej
Strona restauracji
Strona gabinetu dentystycznego
Immersyjna strona
Strona, którą ogląda się jak film.
Przewijanie odtwarza scenę: produkt się obraca, wnętrze się składa, kamera wjeżdża do środka. Buduję takie strony tak, żeby robiły wrażenie i jednocześnie ładowały się szybciej niż zwykłe strony konkurencji.
Aktywny teraz
Przewiń. To jest strona, nie film.
Każdy ruch kółkiem albo kciukiem wybiera jedną klatkę. W górę cofasz, w dół odtwarzasz.
Od pustej blachy do domu na kołach.
Scena z realizacji dla Ody Sey Van.
900 klatek, ładowanych mądrze.
Najpierw co trzydziesta druga, potem coraz gęściej. Pełna gęstość dociąga się tam, gdzie zwalniasz.
Problemy, które widzę najczęściej. I co z nimi robię.
-
Efekty 3D ważą dziesiątki megabajtów i psują wynik w Google.
Sekwencja klatek z adaptacyjną gęstością: ładuje się tyle, ile widać. Ody Sey Van ma 99/100 w Lighthouse na telefonie.
-
Na telefonie animacja się tnie albo w ogóle nie działa.
Osobny zestaw klatek dla ekranów pionowych i rysowanie na canvasie bez blokowania przewijania.
-
Efekt przykrywa ofertę i nikt nie dzwoni.
Scena prowadzi do jednego celu, a kontakt jest zawsze pod kciukiem.
-
Nie ma materiału, z którego dałoby się zrobić animację.
Pomagam go przygotować: od filmu i zdjęć produktu po dopracowane, wygenerowane ujęcia.
Paralaksa z realizacji Ody Sey Van. Zdjęcie rozłożone na pięć warstw, które przesuwają się w różnym tempie. Waży mniej niż pół megabajta.
Zaznacz, czego potrzebujesz.
Podstawa jest zaznaczona. Dobierz resztę i wyślij mi listę na WhatsApp. Na tej podstawie przygotuję wycenę z limitem na każdy etap.
Omówione przykłady realizacji.
Strona warsztatu zabudów kamperów, którą ogląda się jak film: scena przy przewijaniu z klatek, paralaksa i galeria realizacji.
99/100 w Lighthouse na telefonie
Projekt własny: landing etui ładującego do Apple Watch, w którym element 3D jest rdzeniem strony, a nie ozdobą.
Projekt koncepcyjny
Nietypowy, eksperymentalny design dla startupu organizującego firmowe wyjazdy, podczas których technologia jest wyłączona. Projekt z Zuzią Prygiel.
Pięć kroków, limit budżetu na każdy.
Rozliczam faktyczny czas pracy. Jeśli etap zajmie więcej, niż zakładałem, nie płacisz więcej. Jeśli mniej, płacisz mniej.
- 01
Zapoznanie
Rozmowa o celach, audyt obecnej strony i konkurencji. Przy większych projektach spotykamy się u Ciebie.
- 02
Projekt
Struktura, teksty i design w Figmie. Akceptujesz projekt, zanim powstanie pierwsza linijka kodu.
- 03
Wdrożenie
Własny kod pod Twój design, integracje, szybkość ładowania i SEO techniczne.
- 04
Testy i start
Sprawdzenie na telefonach i komputerach, pomiar konwersji i przepięcie domeny.
- 05
Rozwój
Obserwuję dane po starcie i poprawiam miejsca, w których klienci się zatrzymują.
Często pytacie.
Czy to jest Three.js albo WebGL?
Najczęściej nie. Sekwencja klatek z filmu daje jakość prawdziwego materiału wideo, działa na każdym telefonie i jest lżejsza niż scena 3D renderowana na żywo. Three.js stosuję, gdy produkt ma być interaktywny, na przykład do obracania palcem.
Czy taka strona nie będzie wolna?
Strona Ody Sey Van ma 99/100 w Lighthouse na telefonie i 100/100 na komputerze. Pierwsza klatka ładuje się jako zwykły obraz, a reszta dociąga się w tle, w kolejności, w jakiej będzie potrzebna.
Do jakich branż to pasuje?
Tam, gdzie produkt dobrze wygląda w ruchu albo trzeba pokazać proces: zabudowy, wnętrza, motoryzacja, architektura, premiery produktów, marki premium.
Ile trwa realizacja?
Zwykle 1 do 4 tygodni. Najwięcej czasu zajmuje materiał do sceny, dlatego zaczynamy od scenariusza i sprawdzenia, co już masz.