SVEDRA
Strona marki domów szkieletowych z konfiguratorem, w którym cena jest widoczna od pierwszego kliknięcia, a nie po rozmowie z handlowcem. Cztery modele, osiem decyzji, bryła w 3D obok. Całość w czystym HTML, CSS i JavaScript, bez frameworka i bez buildera.
PageSpeed Insights · widok desktop
Po co to powstało
Producenci domów modułowych i szkieletowych prawie zawsze chowają cenę za formularzem kontaktowym. Klient przechodzi przez rozmowę, wycenę i tydzień czekania, zanim dowie się, czy w ogóle go stać. Chciałem sprawdzić, jak wygląda strona, która odwraca tę kolejność.
SVEDRA i seria ALVIK to marka fikcyjna. Wymyśliłem nazwę, cztery modele od 35 do 110 metrów, całą treść i cały cennik. Wymyślone są dane, nie mechanika. Konfigurator liczy naprawdę, bryła renderuje się naprawdę, a interfejs działa tak, jak działałby w wersji produkcyjnej.
Konfigurator ma sens tylko wtedy, gdy produkt jest powtarzalny. Dlatego wymyślona marka składa domy z tych samych elementów, a każda decyzja użytkownika ma przypisaną kwotę. To jedyny warunek, przy którym cena może pojawić się przed projektem, a nie po nim.
Przewiń
Ekran obok przewija się razem z tekstem. Czytasz o sekcji, a strona sama do niej dojeżdża.
Pierwszy ekran to zdjęcie domu i jedno zdanie o tym, że dom jest policzony co do złotówki. Bez sloganu o spełnianiu marzeń, bo w tej branży mówi tak każdy.
Seria ALVIK od 35 do 110 metrów. Każdy model prowadzi prosto do konfiguratora, z wybranym już wariantem w adresie linku.
Warstwa po warstwie, z podanym współczynnikiem. To sekcja dla osoby, która porównuje oferty i zna pojęcie U, a nie tylko ogląda zdjęcia.
Konfiguracja, wycena i projekt, prefabrykacja, montaż. Każdy krok z jednym zdaniem konkretu i własnym zdjęciem.
Z bliska
System
Zamiast zestawiać dwa kroje pisma, oparłem hierarchię na kontraście grubości i skali. Mniej elementów w systemie, mniej okazji, żeby strona wyglądała przypadkowo.
Ziarno nałożone filtrem SVG na całą stronę zdejmuje z niej sterylność, którą ma prawie każdy render domu. Kosztuje jeden element w DOM i zero kilobajtów obrazu.
Warsztat
Każda z ośmiu osi ma przypisane kwoty, a suma przelicza się przy zmianie dowolnej opcji. Bez przeładowania i bez zapytania do serwera.
Dom generowany proceduralnie w Three.js, obracany myszą i palcem. Zmiana elewacji albo dachu podmienia materiał, nie cały model.
Stan konfiguratora ląduje w URL, więc każdy wariant ma własny link do wysłania albo odłożenia na później.
Dwa suwaki i natychmiastowe rozbicie na wkład, kwotę kredytu i ratę. Decyzja o budżecie zapada na stronie, nie po telefonie.
Obsługa klawiatury, poprawne role przy grupach wyboru i komunikaty aria-live przy każdej zmianie ceny.
Vite składa pliki z hashem w nazwie, obrazy w WebP, hosting bez bazy danych. Nie ma czego łatać.
Telefon
Konfigurator z podglądem 3D to najtrudniejszy element do przełożenia na telefon. Na desktopie bryła stoi obok specyfikacji, na ekranie o szerokości 390 pikseli nie ma na to miejsca.
Zamiast zmniejszać wszystko o połowę, rozdzieliłem te dwie rzeczy. Bryła siada na górze ekranu i zostaje widoczna podczas przewijania, a pasek z ceną trzyma się dołu. Wybierasz opcję, widzisz obie zmiany naraz, bez skakania po ekranie.
Uczciwie
Chcesz podobną stronę? Zobacz tworzenie stron internetowych oraz strony dla producentów domów.
Masz produkt, który da się skonfigurować?
Konfigurator z ceną na żywo działa wszędzie tam, gdzie klient składa produkt z opcji: domy, meble na wymiar, ogrodzenia, fotowoltaika. Odpowiedz na kilka pytań o swoim produkcie, a odpowiem z wyceną i terminem.
Wyceń projekt