Projekt koncepcyjny — nie realizacja kliencka

Lumière Beauty Studio — prototyp strony salonu kosmetycznego

Lumière to mój drugi projekt koncepcyjny — sześciostronicowa witryna salonu kosmetologii estetycznej. Powstała, żeby sprawdzić, jak daleko można pchnąć wrażenie luksusu przy pomocy samej typografii, przestrzeni i ruchu, bez sięgania po gotowy motyw ani po bibliotekę JavaScript.

Uwaga: Lumière Beauty Studio nie jest istniejącym salonem. Nazwy zabiegów, ceny, sylwetki zespołu i dane kontaktowe są fikcyjne, a formularz nie rezerwuje terminu. Informuje o tym plakietka przypięta na każdej podstronie.

HTML

CSS

JavaScript

Netlify

Bez frameworków

Zobacz stronę na żywo

Kompozycja z prototypu strony Lumière: zdjęcia zabiegów na gradiencie w kolorach lawendy i beżu

6 podstron

Strona główna, oferta, galeria, zespół, kontakt i własna strona 404.

0 zależności

Żadnej biblioteki, żadnej paczki z npm. Dwa pliki poza treścią.

95 kB

Tyle waży pierwsze wejście razem ze zdjęciami w sekcji powitalnej.

Statyczny hosting

Wdrożenie na Netlify — bez bazy danych i bez kosztów utrzymania.

Punkt wyjścia

Branża, w której łatwo osunąć się w tandetę

Strony salonów kosmetycznych mają wspólną słabość: próbują sygnalizować luksus złotymi gradientami, skryptami i migającymi banerami z promocjami. Efekt bywa odwrotny do zamierzonego. Chciałem sprawdzić, czy wrażenie klasy da się zbudować wyłącznie typografią, przestrzenią i spokojnym ruchem.

Drugim celem było zbudowanie komponentów, których salony realnie potrzebują, a które zwykle dokłada się wtyczkami: cennika z czasami zabiegów, filtrowanej galerii metamorfoz i suwaka porównującego stan przed zabiegiem i po nim.

Luksus w internecie to nie złoto na czarnym tle. To oddech między elementami i brak rzeczy zbędnych.

Trzy rzeczy do rozwiązania

Zero użytecznych zdjęć

Wyjściowa makieta odwoływała się do 21 obrazów pod tymczasowymi adresami — wszystkie martwe. Z pięciu zrzutów ekranu tylko jeden zapisał się w pełnej szerokości.

Suwak wymaga prawdziwych par

Porównanie przed i po nie zadziała na jednym złożonym obrazku. Potrzebne są dwie osobne, dokładnie wyrównane klatki tego samego kadru.

Luksus bez fotografii

Salon sprzedaje efekt wizualny, a my mieliśmy cztery zdjęcia po 360 pikseli. Ciężar wrażenia musiała przejąć typografia i kompozycja.

Zakres prac

Co zostało zrobione

Sześć elementów, które złożyły się na kompletną, gotową do wdrożenia witrynę.

System designu od zera

Paleta ciepłych beży ze stonowaną lawendą, para krojów Hanken Grotesk i Plus Jakarta Sans, miękkie promienie i lekkie cienie. Celowe przeciwieństwo poprzedniej realizacji.

Hero z animowaną aurorą

Trzy rozmyte plamy światła dryfujące niezależnie w tle, wielka lekka typografia z odręcznym podkreśleniem rysowanym po wejściu i kompozycja z obróconych kart ze zdjęciami.

Suwak przed i po

Autorski komponent porównania: przeciąganie myszą i palcem, kliknięcie w dowolne miejsce oraz obsługa strzałkami z klawiatury. Bez żadnej biblioteki.

Cennik, który się czyta

Siedemnaście zabiegów w czterech kategoriach, każdy z opisem, czasem trwania i ceną. Na telefonie układa się w czytelne wiersze zamiast ściskać kolumny.

Galeria z filtrowaniem

Metamorfozy dzielone na kategorie zabiegowe, z licznikiem widocznych pozycji i komunikatem dla pustej kategorii. Do tego akordeon z pytaniami klientek.

Dostępność i wdrożenie

Obsługa klawiaturą, widoczny focus, poprawne atrybuty ARIA i respektowanie ograniczonego ruchu. Publikacja na Netlify z adresami bez rozszerzeń i blokadą indeksowania.

Dwie klatki zabiegu Aquarelle Lips zestawione obok siebie: stan przed zabiegiem i po nim

Detal techniczny

Jak powstały klatki do suwaka

Materiał źródłowy zawierał jedno zdjęcie złożone z dwóch połówek twarzy — lewa przed zabiegiem, prawa po. Suwak potrzebuje dwóch pełnych kadrów, więc każdą połowę odbiliśmy lustrzanie do kompletnej klatki, a wtopiony w obraz uchwyt wycięliśmy. Powstała para, którą można przesuwać w obie strony bez przeskoków.

Przy drugiej metamorfozie ta sama metoda zawiodła: obie połowy pochodziły z zupełnie różnych ujęć, o innym kadrze i skali. Zamiast wstawiać suwak, który przeskakiwałby między niepasującymi zdjęciami, pokazujemy je jako dyptyk z podpisami. Komponent zostaje gotowy na prawdziwe pary zdjęć klienta.

Dlaczego tak, a nie inaczej

Co takie podejście daje salonowi

Otwiera się natychmiast

Klientka szukająca terminu na telefonie nie czeka na wczytanie frameworka. Cała strona waży mniej niż jedno typowe zdjęcie z Instagrama.

Wygląd, którego nie ma konkurencja

Projekt powstaje pod markę, a nie przez podmianę kolorów w szablonie kupionym przez pięćset innych salonów.

Rezerwacja bez tarcia

Cennik z czasami zabiegów i formularz z wyborem terminu odpowiadają na pytania, zanim ktokolwiek podniesie słuchawkę.

Utrzymanie bliskie zeru

Strona statyczna nie ma bazy danych ani wtyczek do aktualizowania. Nie ma się co zepsuć i nie ma czego zhakować.

Stan na dziś

Efekt

Sześć podstron, cennik siedemnastu zabiegów, filtrowana galeria, działający suwak porównawczy i formularz rezerwacji — wszystko w dwóch plikach poza treścią: jednym arkuszu stylów i jednym skrypcie. Układ przełamuje się na trzech szerokościach, a typografia płynnie skaluje się między nimi, więc nie ma miejsca, w którym strona wygląda na przypadkową.

Czysty HTML5

Autorski CSS

Vanilla JS

Zdjęcia WebP

Netlify

Lumière Beauty Studio jest projektem koncepcyjnym. Nazwa salonu, zabiegi, ceny, sylwetki zespołu i dane teleadresowe zostały wymyślone na potrzeby prezentacji.

Zobacz stronę na żywo

Prowadzisz salon i chcesz taką stronę?

To samo podejście — własny projekt zamiast szablonu, lekki kod zamiast wtyczek — stosuję przy realizacjach komercyjnych. Opowiedz mi o swoim salonie podczas bezpłatnej konsultacji.

Umów bezpłatną konsultację

Zobacz ofertę stron internetowych