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