01
Napis ścinany maszynką
Na wejściu linia maszynki przejeżdża przez nazwę od dołu i zostawia za sobą płynny fade, jak przejście nasadek przy karku. Obok status liczony z godzin otwarcia: otwarte do 20:00 albo kiedy otwieramy.
Nasadka
Strona barbershopu, na której klient sprawdza cenę i czas strzyżenia, wybiera fason ze schematem nasadek i konkretnego barbera, a termin bierze w Booksy jednym kliknięciem. Pięć podstron, bez własnego formularza. Nazwa i logo zaprojektowane od zera, strona w czystym HTML, CSS i JavaScript.
Po co to powstało
Większość barberów zapisuje klientów przez Booksy i to działa. Kłopot zaczyna się wcześniej: ktoś wpisuje w Google „barber Wrzeszcz” i trafia na listę, na której wszystkie zakłady wyglądają tak samo. Ciemne zdjęcie, złote logo, cennik bez czasu strzyżenia. Wybiera ten, który był pierwszy.
Nasadka to zakład fikcyjny. Wymyśliłem nazwę, zaprojektowałem logo, napisałem całą treść i ułożyłem cennik na poziomie gdańskich barberów. Strona nie ma własnego formularza, bo barber nie potrzebuje drugiego kalendarza. Każdy przycisk prowadzi do Booksy, ale z kontekstem: z wybraną usługą albo od razu do kalendarza konkretnej osoby.
Klient barbera nie pyta o „rytuał” ani „tradycję”. Pyta, ile kosztuje skin fade, ile to trwa, kto robi dobre kręcone włosy i czy da się wpaść bez zapisu. Strona odpowiada na to wprost, a zamiast zdjęć z banku pokazuje schematy fryzur z numerami nasadek.
Przewiń
Ekran obok przewija się razem z tekstem. Czytasz o sekcji, a strona sama do niej dojeżdża.
Na wejściu linia maszynki przejeżdża przez nazwę od dołu i zostawia za sobą płynny fade, jak przejście nasadek przy karku. Obok status liczony z godzin otwarcia: otwarte do 20:00 albo kiedy otwieramy.
Osiem usług z czasem na fotelu i ceną. Paragon drukuje się przy przewijaniu, a kliknięcie w pozycję otwiera Booksy od razu na tej usłudze.
Low fade, crop, taper i reszta: przy każdym zdjęciu schemat głowy z numerami nasadek. Klient pokazuje go na fotelu i nie musi tłumaczyć, o co mu chodzi.
Trzy osoby, przy każdej ulubiona nasadka, specjalność i dla kogo jest. Przycisk Umów u Kuby otwiera w Booksy kalendarz Kuby, a nie pierwszy wolny termin.
Z bliska
System
Kolory wziąłem z wnętrza zakładu: kafle na ścianie, czarna peleryna i niebieski płyn do dezynfekcji grzebieni, który stoi na każdym blacie. Czerwień tylko przy cenach.
W logo napis od góry jest pełny, a w dolnej części płynnie jaśnieje, jak przejście od dłuższych włosów do skóry. Ten sam fade wraca w wielkim napisie na stronie. Do haftu na fartuchu i pieczątki jest wersja z coraz cieńszych linii, bo tam gradientu się nie da.
Warsztat
Każdy przycisk prowadzi do profilu w Booksy. Przy pozycji cennika z wybraną usługą, przy barberze od razu do jego kalendarza. Nie ma drugiego kalendarza do pilnowania.
Cennik, fasony, ekipa, godziny i pytania są w jednym skrypcie, który składa pięć podstron. Zmiana ceny skin fade zmienia ją w cenniku i przy każdym fasonie naraz.
Schemat głowy przy każdym fasonie to grafika wektorowa generowana z kilku liczb: gdzie zaczyna się która nasadka. Nowy fason to nowe liczby, a nie zamawianie ilustracji.
Status „otwarte do 20:00” albo „otwieramy jutro o 10:00” liczy się z godzin otwarcia w czasie polskim. W tabeli godzin zaznaczony jest dzisiejszy dzień.
Trzy kroje przycięte do znaków ze strony ważą razem 37 KB i ładują się z tego samego serwera. Zdjęcia w WebP w dwóch rozmiarach, pobierane chwilę przed tym, zanim pojawią się na ekranie.
Animacje przesuwają tylko warstwy i zmieniają przezroczystość, więc telefon liczy je na karcie graficznej. Przy ustawionym ograniczeniu ruchu wyłączają się same.
Telefon
Na telefonie strona ma zrobić jedno: doprowadzić do Booksy bez szukania przycisku. Po przewinięciu pierwszego ekranu na dole pojawia się bilet „Umów w Booksy” z informacją, do której dziś otwarte. Chowa się dopiero przy stopce.
Paragon na telefonie zostaje paragonem: każda linijka to duże pole do stuknięcia palcem. Menu otwiera się na całą szerokość, a fasony układają się jeden pod drugim ze schematem w rogu zdjęcia.
Uczciwie
Chcesz podobną stronę? Zobacz strony dla barberów oraz tworzenie stron internetowych.
Prowadzisz barbershop?
Taki układ pasuje do barberów, fryzjerów męskich i salonów, które zapisują klientów przez Booksy. Odpowiedz na kilka pytań o swój zakład, a odpowiem z wyceną i terminem.
Wyceń projekt