Moda i uroda: templatka dla salonu fryzjerskiego

Witam w ósmym artykule cyklu dla webmasterów pt."UX-owe podejście do doboru templatki", dzięki któremu będziecie mogli nauczyć się jak sprawnie przepracować fazę koncepcyjną z Klientem i wdrożyć templatkę do dowolnego CMS-a. Metodologia tutaj zaprezentowana czerpie garściami z tzw. "podejścia UX-owego" (ja tak to nazywam), w którym centralną częścią jest Użytkownik (tzw. User-Centered Design), a wybory, których dokonujemy jako Wdrożeniowiec, zorientowane są na podniesienie efektywności działań tego Użytkownika w drodze do osiągnięcia sukcesu.

Kolejny nasz Klient: HairStars, salon fryzjerski

W tym artykule opiszę przypadek stworzenia nowej strony internetowej dla salonu fryzjerskiego.

HairStars to salon fryzjerski z miasta wojewódzkiego w południowo-zachodniej Polsce. Salon jeszcze kilka lat temu był kolejnym, nudnym zakładem fryzjerskim w małym lokum, "z typowym wystrojem i kiczowatymi fryzurami", jak to określa szefowa. Wszystko zmieniło się 3 lata temu, gdy po ślubie szefowa zdecydowała się doinwestować zakład. Opracowano wtedy nową identyfikację wizualną, zmieniono miejscówkę na modną dzielnicę i odświeżono ofertę. Salon specjalizuje się w skomplikowanych fryzurach dla pań. W tym samym okresie okazało się również, że ważnym punktem oferty usługowej stała się pielęgnacja brody. Są to dwa główne obszary usług HairStars, generujące do 80% przychodów salonu. Właścicielka postanowiła dokonać kolejnego skoku jakościowego, tym razem w internecie. HairStars do tej pory miał starą, kiczowatą stronę internetową, a główną komunikację z klientami prowadził przez serwis Facebook. Teraz ma się to zmienić. Szefowej marzy się system rezerwacji i porządna prezentacja wykwalifikowanej, stałej kadry pracowniczej. Niska rotacja pracowników to kolejny sukces HairStars.

Użytkownicy

Głównymi odbiorcami usług salonu HairStars są panie oczekujące wysokiej jakości usług i panowie pielęgnujący brodę.

- Ania to kierownik sprzedaży w lokalnej firmie. Jest również matką wspaniałej córeczki, co powoduje, że ma jeszcze mniej czasu dla siebie. Ania może sobie pozwolić na wysoką jakość usług, szczególnie, jeśli jest to miejsce polecane przez znajomych. Ze względu na stanowisko, Ania musi wyglądać profesjonalnie i odwiedza fryzjera co drugi miesiąc. Zanim wybierze salon, śledzi poczynania firmy w internecie, przede wszystkim na Facebooku. Ania nie jest wielką fanką technologii, przegląda strony internetowe za pomocą laptopa.

- Radek to student ostatniego roku ekonomii na lokalnej Politechnice. Wielką pasją Radka jest jego broda, o którą stara się dbać, jak tylko może, choć właśnie teraz jest na etapie poszukiwania profesjonalnego salonu pielęgnacji tej części owłosienia. Radek szuka dobrej oferty polując na promocje w serwisach społecznościowych, które przegląda najczęściej na smartfonie.

Dopasowanie

Potrzebujemy templatki, która pozwoli zaprezentować salon HairStars w możliwie jak najefektywniejszy sposób. Wymagany jest czysty, jasny przekaz, wraz z prezentacją zdjęć fryzur spod ręki mistrzów w nim pracujących.

Komentarz wdrożeniowy

Templatka

Do tego zlecenia wybrałem templatkę faktycznie dedykowaną salonowi fryzjerskiemu. Świetny balans między tekstem i zdjęciami, masa potrzebnych funkcjonalności, a także czysty, przejrzysty design to jest to, czego oczekuje szefowa. Templatka jest kompatybilna z Joomla 3.2.0-3.6.x, korzysta z Bootstrapa 3.0 i oczywiście jest responsywna. Zabieramy się do pracy!

Architektura informacji

Oferta HairStars dzieli się na dwa główne nurty: szykowne fryzury dla pań i pielęgnacja brody dla mężczyzn. Podstron nie będzie zbyt wiele, ale zawartość musi być naprawdę wysokiej jakości. Szefowa chciałaby prowadzić bloga, na którym będą prezentowane sukcesy salonu, informacje o szkoleniach pracowników i ciekawostki ze świata fryzjerstwa. Kolejnym pomysłem jest sekcja pytań i odpowiedzi dotyczących pielęgnacji włosów po różnych zabiegach (klientki często pytają o wskazówki).

Funkcjonalności

Odwiedziny na stronie salonu zaczniemy od strony głównej, więc już tam chcielibyśmy wywrzeć dobre pierwsze wrażenie.

Ekipę mistrzów fryzjerstwa zaprezentujemy na podstronie "Our team".

Jest również miejsce na bloga.

Do prezentacji fryzur wykorzystamy galerię.

Sekcję pytań i odpowiedzi zbudujemy na bazie podstrony FAQ.

Propozycja zmian w stylach (CSS)

Templatka wyjściowo jest relatywnie monochromatyczna, choć wprowadzimy jeden tzw. kolor akcentujący. Kolory HairStars to:

• granat z dodatkiem fioletu #25244F;
• piaskowy żółty #D3C953;
• biały #FFFFFF.

Ciemny, prawie czarny, szary z templatki zamienimy na granat. Kolor piaskowy żółty w ciemniejszej wariacji można wykorzystywać zamiennie z granatem (docelowo: #AEA42D).

• główna nawigacja serwisu:

  .icemegamenu>ul>li>a.iceMenuTitle {
  color: #25244F;
  }
  

• hover w nawigacji na ciemniejszy żółty piaskowy:

  .icemegamenu > ul > li > a.iceMenuTitle:hover, .icemegamenu > ul > li > a.iceMenuTitle.hover, .icemegamenu > ul > li > a.iceMenuTitle.icemega_active {
  color: #AEA42D;
  }

• kolor nagłówków:

  h1, h2, h3, h4, h5, h6 {
  color: #25244F;
  }
  

• przyciski, np. "read more":

  .btn, .kbutton {
  color: #25244F;
  }
  .btn.btn-info:focus, .kbutton.btn-info:focus, .btn.btn-info:hover, .kbutton.btn-info:hover {
  background: #25244F;
  border-color: #25244F;
  }
  

• prawie czarne, duże pola (boksy) z linkami:

  .moduletable.link .mod-article-single {
  background: #25244F;
  }
  

• linki w serwisie:

  a, a:visited {
  color: #25244F;
  }
  

• paginacja - aktualna strona:

  .pagination ul li>span.pagenav {
  background: #25244F;
  color: #ffffff;
  }
  

• tagi:

  .tags .label {
  background: #25244F;
  }
  

Nie są to oczywiście wszystkie poprawki, które powinniśmy wprowadzić, ale dzięki tej próbce z pewnością będziecie w stanie dokonać dalej idących zmian, a przede wszystkim podpasować kolorystykę templatki pod Wasz konkretny przypadek wdrożeniowy.

Podsumowanie

To by było na tyle. Oczywiście nie wyczerpałem tematu - ten artykuł to jedynie "zajawka" do tego, byście samodzielnie mogli spojrzeć na templatki z innego poziomu: bardziej analitycznie, profesjonalnie, dobierając rozwiązania pod konkretne potrzeby. Do zobaczenia w następnym artykule.

Głosowanie zostało zamknięte. Kolejny artykuł z cyklu będzie poświęcony szablonu z branży "Rozrywka, gry i życie nocne" i pojawi się 9. maja.