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.

ScareScape - logo

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 - 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 - 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.

ScareScape - kolory

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!

Szablon Joomla! 60106

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.

Jeśli znalazłeś błąd ortograficzny, prosimy o poinformowanie nas o tym, wybierając odpowiedni fragment tekstu i naciskając Ctrl + Enter .

Zgłoś błąd w pisowni

Poniższy tekst zostanie przesłany do naszej redakcji: