Kultura i sztuka: templatka dla teatru alternatywnego “alte atr”

Witam w szóstym 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: teatr alternatywny.

W tym artykule opiszę przypadek stworzenia nowej strony internetowej dla teatru alternatywnego.

Teatr "alte atr" to założony w 2010 roku, niezależny, awangardowy teatr poszukujący nowych środków wyrazu. Podczas przedstawień widzowie mają okazję poznać ciekawe sposoby budowania scenografii, napięcia, komunikacji z widzem. Teatr wystawia spektakle dwa-trzy razy w tygodniu, jest doceniany przez młodzież i studentów, szczególnie tych uczących się na lokalnej ASP. Dotychczasowa strona teatru była zbudowana na Joomla 1.5 i właściciel podjął decyzję o jej "zaoraniu" i stworzeniu nowej. Teatr nie prowadzi profilu w serwisie Facebook ze względu na przesłanki ideologiczne.

Użytkownicy

Na przedstawieniach teatru "alte atr" bywa dużo młodzieży, a także studentów i to głównie do nich kierowana będzie nowa strona internetowa.

- Sara to tegoroczna maturzystka, mieszka w internacie, marzy o pracy przy tworzeniu lalek na potrzeby teatru lalek. Uwielbia alte atr ze względu na to, że inny rodzaj sztuki pozwala jej "naładować akumulatory" i czerpać inspiracje do własnej pracy manualnej. Sara ma smartfona i laptopa, na którym najczęściej sprawdza informacje takie, jak repertuar teatru. Sara czasem sprawdza godzinę spektaklu już podczas podróży do teatru, w autobusie, korzystając ze smartfona.

- Janusz jest studentem Akademii Sztuk Pięknych w tym samym mieście, w którym mieści się teatr. Nie jest częstym bywalcą alte atru, ale razem ze swoją "paczką" znajomych starają się obejrzeć jakiś ciekawy i zaskakujący spektakl przynajmniej raz na kwartał. Janusz posiada smartfon, tablet i laptop, który również podłącza do zewnętrznego monitora.

Dopasowanie

W ofercie Template Monster znajdziemy templatki, które idealnie nadają się na stronę teatru. Kolory teatru to głęboki, ciemny brąz, seledynowo-niebieskawy i biały.

Komentarz wdrożeniowy

Templatka

Wybrałem templatkę #60082, która faktycznie jest przeznaczona dla teatru. Właścicielowi alte atru szczególnie spodobała się wszechobecna ciemność i ciekawy font. Templatka jest kompatybilna z najnowszą linią Joomla, korzysta z Bootstrapa w wersji 3.0, jest w pełni responsywna.

Architektura informacji

Chcemy przedstawić ofertę teatru, jego historię, ludzi, którzy stanowią o klimacie i wnętrza, które w zależności od potrzeb - stanowią niesamowitą dekorację wydarzeń scenicznych. Będziemy potrzebowali systemu newsów lub nawet mikrobloga, a także ciekawie wyglądającą galerię.

Funkcjonalności

Strona główna daje możliwość krótkiego zaprezentowania czym jest alte atr, a także rozbicia ścieżki odwiedzającego w zależności od spektaklu.

O teatrze poczytamy w prostym artykule.

Fajnie wygląda przedstawienie ekipy, choć czerwień linków na pewno zmienimy.

Właścicielowi spodobał się timeline historii - na pewno skorzystamy z tego rozwiązania.

Podstrona "careers" idealnie nada się jako miejsce na ogłoszenia o przesłuchaniach i castingach.

Mamy wreszcie blog, na którym świetnie zadziałają piękne, duże zdjęcia.

Na koniec została galeria, którą zapewne podzielimy na podkategorie.

Propozycja zmian w stylach (CSS)

Wybrana templatka jest czarna, z delikatnym, wygaszonym czerwonym jako kolorem akcentującym. Na pewno zamienimy ten kolor na seledynowo-niebieskawy. Resztę zostawimy jak w oryginale.

Zestaw kolorów alte atru to:

• głęboki, ciemny brąz: #383633;
• seledynowo-niebieskawy: #27C4B5;
• biały: #FFFFFF;

Kolor czerwony tej templatki to

#cb4752;

i pojawia się on bardzo licznie. Podmienimy go na nasz seledynowo-niebieskawy (#27C4B5;):

Zmienimy globalnie kolor linków:

a, a:visited [
color: #27C4B5;
}

Ostatni okruszek z linkiem:

.breadcrumb li.active span {
color: #27C4B5;
}

Aktualny element i hover w menu, wraz z ramką i elementem strzałeczki w dół:

.icemegamenu>ul>li.active>a.iceMenuTitle, .icemegamenu>ul>li.hover>a.iceMenuTitle {
color: #27C4B5;
}
.icemegamenu>ul>li>a.iceMenuTitle:hover, .icemegamenu>ul>li>a.iceMenuTitle.hover, .icemegamenu>ul>li>a.iceMenuTitle.icemega_active {
color: #27C4B5;
border-color: #27C4B5;
}
.icemegamenu>ul>li>a.iceMenuTitle:hover:before, .icemegamenu>ul>li>a.iceMenuTitle.hover:before, .icemegamenu>ul>li>a.iceMenuTitle.icemega_active:before {
border-color: #27C4B5 transparent transparent transparent;
}

Do tego kilka nagłówków:

h1.title, h2.title, h3.title, h4.title, h5.title, h6.title {
color: #27C4B5;
}
h1.heading-style-5, h2.heading-style-5, h3.heading-style-5, h4.heading-style-5, h5.heading-style-5, h6.heading-style-5 {
color: #27C4B5;
}

Link copyright niestety ma ikonkę graficzną w kolorze czerwonym, ale kolor tekstu możemy zmienić:

#copyright ul li a {
color: #27C4B5;
}

I jeszcze parę drobiazgów:

Kółeczka z numerkami na głównej stronie:

.swiper-pagination-bullet-active {
background: #27C4B5;
}

i ikonka przypięta do prawej strony:

div#fixed-sidebar-right .moduletable.login>i.fa-user {
background: #27C4B5;
}

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 "Sport, przyroda i podróże" i pojawi się w końcu marca.