KonceptProjekt koncepcyjny · serum i kosmetyki, sklep marki
Halda: strona marki serum z formułą, która się odsłania.
To projekt pokazowy ALUK, nie zlecenie. Marka „Halda” nie istnieje. Wymyśliłem ją, żeby pokazać wygląd i animacje, które mieszczą się na stronie marki kosmetycznej. Stronę przewiniesz na halda.madebyaluk.pl, od pierwszego ekranu po stopkę. Taką stronę dla prawdziwej firmy wyceniam indywidualnie, po rozmowie i darmowym szkicu. Jak wyceniam.
01Założenia
Co zobaczysz na stronie.
Marka sprzedaje jedno serum, bez pośredników. Jeden produkt, jedna obietnica. Strona ma zbudować nastrój i wytłumaczyć formułę, zanim pokaże cenę. Klient tu ogląda, nie szuka. Wtedy płynne przewijanie i sekcje, które zostają na ekranie, pomagają.
Założenie: jedna długa strona, bez podstron. Zdjęcia, spot i baner zrobione pod markę. Treść każdej sekcji czyta się bez skryptów. Ruch jest dodatkiem, nie warunkiem.
01Kropla na start.
Logo napełnia się jak butelka, a potem odsłania pierwszy ekran. Tam kropla serum na wideo. Butelka lekko idzie za kursorem. Tekst niżej pojawia się słowo po słowie. Płynne przewijanie rusza dopiero po załadowaniu.
02Trzy składniki formuły.
Ta część zostaje na ekranie przez kilka przewinięć. Butelka obraca się, gdy przewijasz. Przy kolejnych kątach wychodzą opisy trzech składników i pasek postępu. To seria klatek, nie wideo, więc obraz nigdy nie zostaje w tyle.
03Rytuał i liczby z badania.
Kroki wieczornego rytuału przesuwają się w poziomie. Na wejściu zieleń rozlewa się po sekcji. Niżej liczniki z badania dochodzą do wyniku raz. Liczby są wymyślone, jak cała marka.
04Kampania z własnych materiałów.
Spot 10 s, baner i zdjęcie produktu z góry. Wszystko zrobione pod tę markę. Żadnych cudzych reklam ani logotypów w kadrze.
02Prawdziwa strona
Jak zrobię to u Ciebie.
Prezentacja to zwykły HTML. Biblioteka animacji ładuje się z zewnętrznego serwera. Twoją stronę buduję tak, żeby łatwo było ją zmieniać i utrzymać.
Strona gotowa do rozbudowy
Dla prawdziwej firmy dokładam formularz, edycję treści albo sklep. Kod i dostępy są Twoje. Zakres ustalam z Tobą przed startem.
Fonty i media u siebie
Fonty z polskimi znakami leżą na serwerze strony. Obrazy w lekkich formatach (WebP, AVIF). Wideo poniżej 1,5 MB, z obrazkiem na czas ładowania. Przeglądarka pamięta pliki przez rok.
Ruch z wyłącznikiem
Gdy ktoś wyłączył animacje w systemie, widzi od razu gotowe sekcje. Treść każdej części czyta się też bez JavaScriptu.
Telefon z połową efektów
Sekcje zostają na ekranie krócej. Część ozdób znika. Zdjęcie za kursorem nie działa na dotyku. Sprawdzam na ekranie 390 px, nie tylko na laptopie.
03Zastosowanie
Dla kogo jest ten styl?
Ten styl sprzedaje, gdy klient kupuje emocję albo wygląd. Gdy liczy się zaufanie i szybka decyzja, ten sam ruch daje mniej zapytań.
Ten styl pasuje
- marki z jednym produktem: kosmetyki, kawa, odzież
- premiery produktów i kampanie z własnymi zdjęciami lub wideo
- sklep, do którego wchodzi się przez taką stronę
Tu radzę inaczej
- sklepy z dużą ofertą: płynne przewijanie psuje listy, ruch tylko na starcie
- kliniki, gabinety, usługi lokalne: telefon w 3 sekundy, nie ekran ładowania
- strony, na których klient szuka konkretu, na przykład ceny
Fakty: tylko to, co zmierzyłem
Marka jest wymyślona. Nie ma sprzedaży ani zapytań, więc ich nie podaję.- Waga przy pierwszym wejściu (1600×1000, po ekranie ładowania)
- 2,69 MB
- Biblioteki animacji
- GSAP + Lenis
04Kontakt
Taka strona dla Twojej marki?
Napisz, co sprzedajesz i jakie masz materiały. Powiem wprost, czy taki styl ma sens w Twojej branży. Potem dostaniesz zakres, termin i cenę.
- Szkic jest bezpłatny i do niczego nie zobowiązuje
- Raty 30%, 40% i 30%, pierwsza dopiero po akceptacji szkicu
- Domena i hosting na Ciebie, 30 dni poprawek po starcie
Zacznij od darmowego szkicu
Kilka zdań o firmie wystarczy, resztę dopytam. Odpisuję osobiście, tego samego dnia.
Zamów darmowy szkic Umów rozmowę online