Okkra
Strona salonu kosmetycznego, na której klientka sprawdza cenę, ogląda efekt i rezerwuje termin bez dzwonienia. Cztery specjalności, cennik z czasem każdego zabiegu, efekty przed i po oraz rezerwacja w trzech krokach. Marka i logo zaprojektowane od zera, strona w czystym HTML, CSS i JavaScript.
Po co to powstało
Strona salonu kosmetycznego często odsyła klientkę gdzie indziej: cennik w PDF, zdjęcia na Instagramie, zapisy przez telefon w godzinach pracy. Tymczasem ktoś, kto wieczorem szuka laminacji brwi, chce w jednym miejscu sprawdzić, ile to kosztuje, jak wygląda efekt i kiedy jest wolny termin.
Okkra to marka fikcyjna. Wymyśliłem nazwę, zaprojektowałem logo, napisałem całą treść i ułożyłem cennik. Salonu nie ma, ale mechanika działa: cennik, podstrony zabiegów, suwaki przed i po oraz panel rezerwacji zachowują się tak, jak w wersji produkcyjnej.
O wyborze salonu decyduje zaufanie, a nie hasło. Dlatego strona mówi wprost to, o co klientki pytają przed pierwszą wizytą: ile trwa zabieg, czy boli, co jeśli nie jest dla mnie i jak odwołać termin.
Przewiń
Ekran obok przewija się razem z tekstem. Czytasz o sekcji, a strona sama do niej dojeżdża.
Nagłówek, jedno zdjęcie i dwa przyciski. Pod nagłówkiem zdanie, które przed pierwszą wizytą uspokaja najbardziej: każdą wizytę zaczynamy od rozmowy i analizy skóry, a zabieg dobieramy dopiero potem.
Pielęgnacja twarzy, brwi i rzęsy, laser, masaż. Każda karta ma cenę startową i prowadzi do podstrony zabiegu, więc o koszt nie trzeba pytać przez telefon.
Rozmowa 15 minut, zabieg od 30 do 90, bezpłatna kontrola po 14 dniach. Dla kogoś, kto pierwszy raz idzie do nowego salonu, to ważniejsze niż kolejne ładne zdjęcie.
Trzy najbliższe wolne godziny z przyciskiem Zarezerwuj. Klientka, która doczytała do końca, nie musi wracać do menu, żeby się umówić.
Z bliska
System
Jedynym mocnym kolorem jest ochra, ta sama co w logo. Reszta to atrament i ciepła biel, więc na pierwszym planie zostają zdjęcia zabiegów.
W logo litera „o” jest kroplą pigmentu z odbiciem światła. Ta sama kropla wraca na stronie w przyciskach i w ikonie karty przeglądarki. Ochra na jasnym tle ma za słaby kontrast na tekst, więc pojawia się tylko w dużych elementach.
Warsztat
Zabieg, termin i dane w trzech krokach, w panelu wysuwanym nad stroną. Przycisk Umów przy pozycji cennika otwiera go z wybranym już zabiegiem.
Cennik, karty zabiegów, podstrony i rezerwacja czytają z tego samego pliku. Zmiana ceny w jednym miejscu zmienia ją na całej stronie.
Zwykłe pole suwaka pod spodem, więc porównanie działa myszą, palcem i klawiaturą. Każda para zdjęć ma opis dla czytników ekranu.
Nagłówek, menu i stopka są w jednym miejscu, a skrypt w Pythonie składa z nich wszystkie podstrony. Poprawka w menu nie wymaga edycji sześciu plików.
Link do pominięcia nawigacji, zaznaczona bieżąca strona w menu, komunikaty błędów w formularzach i kontrast tekstu sprawdzony według WCAG.
Animacje nagłówków i sekcji wyłączają się same, jeśli ktoś ma w systemie ustawione ograniczenie ruchu. Treść jest wtedy widoczna od razu.
Telefon
Na telefonie strona ma zrobić jedno: doprowadzić do rezerwacji bez szukania przycisku. Dlatego po przewinięciu pierwszego ekranu na dole pojawia się przycisk Umów wizytę i zostaje tam do końca strony.
Panel rezerwacji na telefonie wysuwa się od dołu, na całą szerokość ekranu. Duże pola, kalendarz z dniami do stuknięcia palcem i podsumowanie zabiegu na dole, tak jak na komputerze.
Uczciwie
Chcesz podobną stronę? Zobacz strony dla salonów kosmetycznych oraz tworzenie stron internetowych.
Prowadzisz salon albo gabinet?
Taki układ pasuje do salonów kosmetycznych, gabinetów kosmetologii, stylistek paznokci, fryzjerów i barberów. Odpowiedz na kilka pytań o swój salon, a odpowiem z wyceną i terminem.
Wyceń projekt