Zadanie
Salon z klasą, w którym łatwo się umówić
Salon fryzjerski z Wrocławia, z którego usług korzystają głównie kobiety. Potrzebował strony, która przyciągnie nowe klientki, pokaże ofertę z cenami i poprowadzi do rezerwacji online w Booksy.
Treści zmieniają się w salonie często: promocje sezonowe, godziny w święta, nowe zdjęcia realizacji, cennik. Celem było, żeby właściciel aktualizował to wszystko sam.
- Dla kogo
- Klientki indywidualne z całego Wrocławia, w tym Panny Młode
- Problem
- Brak strony internetowej; ofertę, ceny i godziny trzeba było przekazywać klientkom ręcznie
- Cel
- Więcej rezerwacji online, elegancki wizerunek i samodzielna aktualizacja treści
- Wykonałem
- Strukturę i treści strony (PL/EN), hasło, system kolorów i typografii, stronę one-page, panel administracyjny, wersję na telefon, wdrożenie na Cloudflare Pages
Marka
Wszystko wyrasta z logo
Logo było punktem wyjścia. Z niego pochodzą kolory, kroje pisma i motyw rombu, który porządkuje całą stronę. Hasło łączy przekorną nazwę z eleganckim charakterem salonu.
- Śliwka
#3B1E2A - Głęboka śliwka
#2A1520 - Brąz
#A07A55 - Jasny brąz
#C9A57E - Krem
#FAF6F0
Hasło: „Nożyczki z charakterem, fryzura z klasą.”
Strona
Od pierwszego wrażenia do rezerwacji
Jedna przewijana strona. Przycisk rezerwacji jest w nagłówku, przy każdej usłudze i w dolnym pasku na telefonie.
Promocje, które same się pojawiają i znikają
Każda promocja ma daty. Strona pokazuje ją tylko w tym okresie, a do końca odlicza czas.
- Odliczanie „Zostało 24 dni” i pasek postępu
- Plakietka promocji na karcie powiązanej usługi
- Przewijany pasek komunikatów nad nagłówkiem
Oferta z ceną i czasem
Karty usług odpowiadają na najczęstsze pytania przed wizytą: ile to trwa i ile kosztuje.
- Zdjęcie, opis, czas i cena od–do
- Plakietki „Nowość”, „Sezon ślubny”, promocja
- Przycisk „Rezerwuję” lub „Zapytanie o termin”
Przejrzysty cennik
Ceny w przedziałach od–do, pogrupowane w tabelach według kategorii.
- Strzyżenie i stylizacja, koloryzacja, upięcia i ślub
- Czas trwania i dopiski przy usługach
- W wersji angielskiej „od” zmienia się na „from”
„Otwarte teraz” na żywo
Status liczy się z godzin otwarcia i dni specjalnych, więc zawsze mówi prawdę.
- „Zamknięte · otwieramy jutro o 9:00”
- Święta i skrócone godziny widoczne z wyprzedzeniem
- Adres, parking, płatności, dostępność i regulamin
Panel administracyjny
Właściciel zmienia stronę sam
Panel otwiera się kłódką w rogu strony. Każda zmiana od razu pojawia się na stronie i zapisuje automatycznie.
Pulpit
Na start widać, co jest teraz na stronie i co zmieni się w najbliższych tygodniach.
- Stan salonu teraz, aktywne i zaplanowane promocje
- Harmonogram promocji i aktualności na osi czasu
- Lista zdarzeń z najbliższych 45 dni
Promocje z terminem
Każda pozycja ma status liczony z dat. Zakończone zostają w archiwum.
- Statusy: aktywna, zaplanowana, zakończona, wstrzymana
- Filtry z licznikami
- Duplikowanie, ukrywanie, kolejność, usuwanie z potwierdzeniem
Edycja w jednym oknie
Formularz z polami po polsku i angielsku obok siebie.
- Daty „pokazuj od / do”, plakietka, powiązana usługa
- Zdjęcie z dysku, zmniejszane automatycznie
- Podpowiedzi i sprawdzanie błędów, np. złej kolejności dat
Godziny dla każdego dnia
Siedem dni z osobnymi godzinami i dni specjalne na święta i urlopy.
- Przełącznik otwarte / nieczynne
- Kopiowanie godzin poniedziałku na cały tydzień
- Podgląd statusu „Otwarte teraz”
W panelu można też zarządzać usługami, cennikiem, galerią, zespołem, opiniami, FAQ, poradami, danymi kontaktowymi i widocznością sekcji. Jest też kopia zapasowa z eksportem i importem.
Telefon
Rezerwacja w zasięgu kciuka
Na telefonie stały dolny pasek z przyciskami Telefon i Rezerwacja, menu rozwijane jednym dotknięciem i tabele cen dopasowane do wąskiego ekranu.
Technika i jakość
Lekko, dostępnie, bez kosztów utrzymania
Dostępność
- Obsługa klawiaturą i widoczny fokus
- Kontrast tekstu zgodny z WCAG AA
- Opisy zdjęć i etykiety pól formularzy
- Animacje wyłączane przy ustawieniu „ogranicz ruch”
Szybkość
- Cała strona z panelem w jednym pliku HTML, ok. 270 kB bez zdjęć
- Bez frameworków i zewnętrznych skryptów
- Zdjęcia ładowane dopiero przy przewijaniu
- Sprawdzona na szerokości 390 px bez przewijania w bok
Bezpieczeństwo i utrzymanie
- Hosting na Cloudflare Pages z HTTPS, bez opłat
- Automatyczne wdrożenie z repozytorium GitHub
- Historia wersji z możliwością przywrócenia
- W tej wersji demonstracyjnej panel zapisuje dane w przeglądarce edytującego; u klienta łączy się z serwerem i logowaniem
Współpraca
Chcesz taką stronę dla swojej firmy?
Projektuję i wdrażam strony dla małych firm we Wrocławiu, z panelem do samodzielnej edycji. Napisz, czym zajmuje się Twoja firma, a zaproponuję rozwiązanie.
Projekt demonstracyjny. Firma i dane są fikcyjne: nazwa, adres, cennik i zespół służą tylko prezentacji. Zdjęcia na stronie pochodzą z Unsplash.