Rozrywka, gry i życie nocne: templatka dla małej sieci escape room’ów

Witam w dziewiątym 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: Scare Scape, mała sieć escape room'ów.

W tym artykule opiszę przypadek stworzenia nowej strony internetowej dla małej sieci escape room'ów.

Scare Scape to sieć escape room'ów (aktualnie: 3 miejscówki) w dużym mieście wojewódzkim. Pierwszy escape room powstał 5 lat temu i od początku nie ma sobie równych na lokalnym terenie. Każda z miejscówek ma trzy tego typu pokoje, wszystkie zorientowane na fantastyczne, intensywne przeżycia bywalców. Targetem firmy są ludzie młodzi, w wieku 18-35 lat, szukający grupowych doznań na wysokim poziomie jakościowym. Właściciele Scare Scape, bracia Grzegorz i Rafał, myślą o dalszej rozbudowie sieci, a także analizują możliwości otwarcia 2-3 miejscówek w Stolicy. Dotychczas Scare Scape miał tylko witrynę w serwisie Facebook, ale potrzeba spójnego, jednolitego przekazu i zaprezentowania oferty na profesjonalnej stronie internetowej skierowała właścicieli do mnie.

Użytkownicy

Głównymi zainteresowanymi tego typu rozrywkami są ludzie młodzi lub w wieku średnim, często "paczki", które świetnie się rozumieją i spotykają się cyklicznie.

- Tomek jest tegorocznym maturzystą i ma fajną paczkę znajomych, z którymi spotyka się 2-3 razy w tygodniu. Często spotykają się w popularnych miejscach w rodzinnym mieście. Tomek najczęściej przegląda internet na smartfonie, często również na swoim starym, wysłużonym laptopie. Tomka interesują zdjęcia escape room'ów i opisy atrakcji. Chętnie dokonałby rezerwacji online.

- Kamila pracuje jako menadżer w firmie spedycyjnej. Razem ze znajomymi lubią ciekawe wyzwania "na poziomie". Kamila jeszcze nie była w escape room'ie, ale słyszała dobre opinie o Scare Scape wśród znajomych w serwisie Facebook. Kamila korzysta ze smartfona i laptopa. Dokładnie nie wie, czego oczekiwać od escape room'ów, dlatego przyda się dokładniejszy opis usług Scare Scape.

Dopasowanie

Potrzebujemy templatki, która pozwoli zaprezentować pokoje Scare Scape w możliwie jak najefektywniejszy sposób, prezentując zdjęcia oddające klimat, ale nie zdradzające wszystkich niespodzianek czekających na śmiałków podejmujących wyzwanie. Dla osób podejrzliwych i mających jakiekolwiek obawy, musimy przygotować więcej informacji o naturze escape room'ów.

Komentarz wdrożeniowy

Templatka

Do tego zlecenia wybrałem templatkę dla... klubu nocnego. Świetnie sprawdzi się ciemny klimat templatki, a także fakt, że bardzo dobrze wyglądają w niej kolory, które Scare Scape posiada w swoim brandzie. Templatka jest kompatybilna z Joomla 3.2.0-3.6.x, korzysta z Bootstrapa 3.0 i oczywiście jest responsywna. To będzie łatwa robota!

Architektura informacji

Musimy przedstawić istotę escape room'ów tak, aby rozwiać wątpliwości odwiedzających - posłużą do tego strony statyczne i FAQ z listą pytań najczęściej zadawanych przez potencjalnych klientów. Na pewno skorzystamy z galerii. Nic nie pomaga w podjęciu decyzji tak, jak polecenia, więc będziemy chcieli umieścić kilka wypowiedzi uczestników pasjonujących wydarzeń w Scare Scape. Do tego standardowo - cennik, który zaprezentuje również promocje dla grup.

Funkcjonalności

Przede wszystkim chcemy opowiedzieć czym są escape room'y tak, by rozwiać wątpliwości wahających się, potencjalnych odwiedzających. Do tego celu posłużą podstrony "about" i FAQ z najczęściej zadawanymi pytaniami.

Skorzystamy z podstrony "our team" do zaprezentowania oferty pokoi. Opinie o usłudze są bardzo ważne, dlatego na pewno wykorzystamy podstronę "testimonials".

Ofertę dopełnimy galerią.

Bardzo fajnie wygląda podstrona cennika i kontaktu.

Propozycja zmian w stylach (CSS)

Templatka wyjściowo jest całkiem ciemna, co nam oczywiście nie przeszkadza (a nawet pomaga w budowaniu klimatu), do tego wprowadzimy jeden tzw. kolor akcentujący. Kolory Scare Scape to:

• bordowy #82220C;
• ciemnawy żółty: #C9A700;
• bardzo ciemny szary #161616.

Wybrana templatka ma już kolor akcentujący zbliżony do naszego ciemnawo-żółtego, jest to pomarańcz (#e89200). Przede wszystkim zamienimy wszystkie potrzebne jego instancje na nasz ciemnawy żółty. Kolor bordowy będzie pojawiał się na zdjęciach, ponieważ wiele pokoi posiada klimat pseudo krwisty.

Dokonujemy zmian w stylach:

• kolor linków:

  a:hover, a:focus {
  color: #C9A700;
  }
  

• nagłówki:

  .mod-article-single.mod-article-single__custom .item_introtext .header .title {
  color: #C9A700;
  }
  

• ikonki społecznościowe:

  .nav.menu.social li a {
  color: #C9A700;
  }
  

• nagłówek, np. przy tych ikonkach:

  .moduletable.inline .module_container *[class*=heading-style] {
  color: #C9A700;
  }
  

• inne nagłówki:

  h1.title, h2.title, h3.title, h4.title, h5.title, h6.title {
  color: #C9A700;
  }
  

• link powrotu do początku strony:

  #back-top a {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: block;
  font: 60px/60px 'FontAwesome';
  color: #C9A700;
  }
  

• elementy rozwijania w FAQ:

  .panel-group .panel-heading a:before {
  background: #C9A700;
  }
  

• bullety listy wypunktowanej:

  ul.list li:before {
  color: #inline;
  }
  

• przyciski:

  .btn, .kbutton {
  color: #C9A700;
  }
  

• aktywny element w okruszkach ścieżki powrotu:

  .breadcrumb li.active span {
  color: #C9A700;
  }
  

• szeroki pas koloru nad stopką:

  .copyright {
  background: #C9A700;
  }
  

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.

Ostatni artykuł z cyklu będzie poświęcony szablonowi z branży "Dom i rodzina" i pojawi się w 30. maja.