OKTAM, projekt koncepcyjny
Wielostronicowy serwis dealera aut używanych z segmentu premium. Sześć aut w hali zamiast pięćdziesięciu na placu, karta auta z pełną teczką i kalkulator raty, który liczy się na miejscu. Front w czystym HTML, CSS i JavaScript - bez frameworka i buildera, podstrony generowane skryptem w Pythonie.
PageSpeed Insights · widok desktop
Po co to powstało
OKTAM nie jest zleceniem. To projekt zbudowany po to, żeby sprawdzić, jak powinna wyglądać strona komisu aut premium, kiedy przestaje być katalogiem, a zaczyna być narzędziem sprzedaży.
Dealerzy w tym segmencie mają wszyscy ten sam problem. Auto za czterysta tysięcy sprzedaje się na zaufaniu, a typowa strona komisu potrafi pokazać wyłącznie zdjęcie, cenę i przycisk „zadzwoń”. Klient, który ma wydać tyle pieniędzy, chce wiedzieć, skąd auto pochodzi, ile realnie przejechało, czy było na torze i co się stanie, jeśli za pół roku posypie się skrzynia. Tego nie da się zmieścić w ogłoszeniu.
Dlatego cała struktura stoi na jednym założeniu: mała flota, za to każda pozycja opisana tak dokładnie, że rozmowa telefoniczna zaczyna się od terminu jazdy próbnej, a nie od pytania „a jaki ma przebieg”.
Przewiń
Ekran obok zmienia się razem z tekstem. Czytasz o sekcji, a strona pokazuje dokładnie ten fragment.
Zamiast hasła o pasji do motoryzacji od razu pada liczba: sześć aut w hali. Pod nagłówkiem stoi pasek filtrów, więc ktoś, kto szuka konkretnego nadwozia albo ma sufit na racie, wchodzi do oferty jednym kliknięciem.
Auta przewijają się w bok, każde z numerem, przebiegiem, mocą i ratą. Na końcu pasa czeka panel dla tych, którzy nie znaleźli swojego modelu, z propozycją sprowadzenia na zamówienie.
Sekcja o salonie tłumaczy, dlaczego mała hala to zaleta, i podpiera to czterema liczbami: lata w tym samym miejscu, auta z pełną teczką, punkty kontroli i średni czas sprowadzenia.
Kalkulator leasingu z trzema suwakami i wyliczeniem na żywo. Klient sam sprawdza, jak zmienia się rata przy innym wkładzie własnym, więc rozmowa zaczyna się od gotowej kwoty w głowie.
Z bliska
Serce projektu
Każdy egzemplarz dostaje własny adres i komplet informacji, których normalnie trzeba szukać przez telefon.
To tutaj rozstrzyga się sprzedaż. Podstrona zaczyna się od ceny i raty, potem idzie galeria, opis konkretnego egzemplarza, pełna specyfikacja, raport z kontroli i kalkulator ustawiony już na cenę tego auta. Formularz jazdy próbnej ma model wpisany z góry, więc zostaje podać imię, telefon i termin.
Reszta serwisu
Każda zaczyna się tym samym blokiem: okruszki, nadtytuł, nagłówek i jedno zdanie kontekstu po prawej. Dzięki temu dodanie kolejnej to kwestia treści, nie projektowania od zera.
System
Ciemne tło, jedna barwa akcentu i jasne sekcje wpuszczane tam, gdzie trzeba dać oczom odpocząć.
Niebieski nie jest tu ozdobą. Dostają go tylko przyciski, kwoty rat i aktywne elementy, więc wzrok sam wie, gdzie kliknąć. Jasne sekcje przerywają ciemność dokładnie tam, gdzie trzeba coś policzyć albo przeczytać dłuższy tekst.
Mono robi tu robotę, której nie zrobi ładny nagłówek: sygnalizuje, że liczba jest liczbą. Przebiegi, moce i raty od razu czytają się jak dane z dokumentu, a nie jak marketing.
Warsztat
GSAP ScrollTrigger odpala sekcje wtedy, gdy wchodzą w kadr. Karuzela floty jedzie w bok razem ze scrollem, zamiast czekać na kliknięcie strzałki.
Dane każdego auta siedzą w jednym pliku, a skrypt w Pythonie składa z nich karty i podstrony. Dołożenie siódmego egzemplarza to kilka linii, nie kopiowanie całego szablonu.
Schema.org na karcie auta, w pytaniach i w danych salonu. Google dostaje cenę, rocznik i przebieg w formie, którą rozumie bez zgadywania.
Trzy suwaki, wynik przeliczany w locie, bez zapytań do serwera. Na karcie auta startuje od ceny tego egzemplarza, a nie od wartości domyślnej.
Karuzela zamienia się w listę, filtry układają się w kolumnę, cięższe efekty znikają. Ten sam materiał, inny sposób podania.
Statyczne pliki na serwerze. Nie ma czego aktualizować, nie ma co się zepsuć i nie ma abonamentu za utrzymanie.
Telefon
Poziomy pas ze zdjęciami wygląda świetnie na monitorze i fatalnie na telefonie, gdzie walczy z gestem przewijania strony. Dlatego na dotyku flota rozkłada się w pionową listę, a każda karta dostaje pełną szerokość ekranu.
Filtry z pierwszego ekranu układają się jeden pod drugim, menu chowa się pod przyciskiem, a kalkulator zachowuje suwaki, bo akurat ten element działa palcem lepiej niż myszą.
Uczciwie
Chcesz podobną stronę? Zobacz tworzenie stron internetowych oraz strony dla salonów samochodowych.
Podoba się ten styl?
Odpowiedz na kilka pytań o swoim pomyśle, a odpowiem z konkretną wyceną i terminem. Bez zobowiązań.
Wyceń projekt