Witam w drugim 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: szkoła językowa dla dzieci i młodzieży
W tym artykule opiszę przypadek stworzenia nowej strony internetowej dla szkoły językowej dla dzieci, mieszczącej się w średniej wielkości mieście, tzw. "byłej stolicy województwa". HappySQL to nieduża szkoła językowa zorientowana przede wszystkim na nastolatków (w ofercie brak zajęć dla pełnoletnich odbiorców), choć właścicielka bardzo poważnie zastanawia się nad wprowadzeniem zajęć dla najmłodszych (w wieku 3-6 lat). Szkołę cechuje nowoczesność metod (duże wykorzystanie multimediów, internetu i urządzeń mobilnych) i ukierunkowanie na młodszego odbiorcę. Aktualnie szkoła nie posiada strony internetowej, a całość komunikacji odbywa się za pomocą Facebook-a. Właścicielka chciałaby w przyszłości zaoferować funkcjonalności dla swoich uczniów (obecnych i potencjalnych), docelowo np. o możliwość logowania do strefy ucznia, czy też strefy rodzica.
HappySQL to szeroka oferta kursów językowych na różnych poziomach, dla dzieci różnego wieku, również przygotowujących się do certyfikatów językowych. W Szkole aktualnie nauczane są następujące języki: angielski, niemiecki, hiszpański, francuski, fiński i norweski. Właścicielka szkoły chciałaby skorzystać z elastycznego rozwiązania CMS, które pozwoli w przyszłości na rozbudowę funkcjonalności dostępnych po zalogowaniu.
Aktualnie Szkoła prowadzi komunikację marketingową za pomocą profilu w serwisie Facebook. Głównym odbiorcą produktów i usług firmy są dzieci i młodzież w wieku 7-17 lat, uczęszczający na kursy językowe, również przygotowujący się do egzaminów językowych. Zajęcia odbywają się przeważnie w godzinach popołudniowych, w weekendy praktycznie przez cały dzień. Szkoła jest zamknięta w niedziele i święta. Szkoła jest zlokalizowana w mieście 150-tysięcznym, z niewielką konkurencją w tym pułapie oferty. Firma posiada logo, które trzeba przerobić - aktualne wykonała właścicielka firmy w darmowym programie graficznym.
Dotychczasowe logo HappySQL było bardzo leciwym projektem. Budżet nie zakładał przeprojektowania identyfikacji wizualnej, ale dla dobra projektu trzeba zaproponować przynajmniej delikatne odświeżenie.
Przy okazji okazało się, że kolory brandu nie są aż takie złe - zieleń w ciekawy sposób można połączyć z niebieskim w głębi fioletu. Do tego oszczędnie z bielą, raczej zamglona szarość.
Użytkownicy
Mamy tutaj dwie główne grupy odbiorców: dzieci i młodzież, a także rodziców. Powinniśmy zaadresować przekaz przede wszystkim do osób decyzyjnych, czyli rodziców, ale biorąc pod uwagę fakt, że bardzo często są oni pod wpływem nacisku zakupowego ze strony swoich dzieci, strona musi zachęcać ("działać") również na młodszych użytkowników. Nie chcemy jednak uzyskać efektu zbyt dziecinnego, trywialnego. Określimy sobie zatem 2 persony w bardzo różnym wieku:
Dopasowanie
Nie chcemy skorzystać z templatki, która będzie zbyt dziecinna - efekt przyjazności uzyskamy raczej za pomocą kolorów i grafik. Oferta HappySQL nie jest aż tak ogromna, więc przyda się sporo światła i poukładane treści. Chcemy podkreślić wyjątkowość szkoły dzięki komunikacji z konkretną grupą odbiorców. Zależy nam również na responsywności (RWD). Wybór padł na jedną z templatek z kategorii "Edukacja i książki", a mianowicie #58047.
Komentarz wdrożeniowy
Nasz wybór padł na templatkę kompatybilną z najświeższą linią Joomla, korzystającą ze starszej wersji Bootstrapa, a mianowicie 2.3.1. Na pewno dopracowania wymagać będzie kolorystyka. Trzeba będzie również zakupić kilka obrazków stockowych, ponieważ templatka idealnie nadaje się do wzmocnienia przekazu za pomocą bloków z obrazami.
Architektura informacji
Nasza wybrana templatka sama w sobie nie wydaje się być przesadnie dziecinna, bo przecież nie o taki efekt nam chodziło. Jest to często popełniany błąd przy tego typu projektach - wyjątkiem są może przedszkola, których strony internetowe faktycznie wydają się być częścią ekosystemu danej placówki i tam zastosowanie np. Comic Sans-a nie razi aż tak. Przy okazji HappySQL, projekt jest już zbyt poważny, stąd m.in. przeprojektowanie logo szkoły. Sama templatka oferuje dużo przestrzeni i obszarów treści, w których można zawrzeć teksty o charakterze marketingowym, a te z kolei - w połączeniu z obrazkami wysokiej jakości - z pewnością będą działać na wyobraźnię naszych odwiedzających.
Funkcjonalności
Potrzebujemy następujące funkcjonalności:
- szkoła to przede wszystkim nauczyciele, a nasza templatka posiada możliwość ciekawej prezentacji zalet i plusów kadry lektorskiej, system newsowy, czyli blog;
- formularz kontaktowy;
- dobrym pomysłem będzie pochwalenie się nowoczesnym charakterem szkoły w postaci galerii.
Propozycja zmian w stylach (CSS)
Nasza templatka jest w kolorach odcieni szarości, z akcentującym kolorem żółtym. Ten ostatni podmienimy na zielony, który jest bardzo przyjaznym i kojącym kolorem. Wykorzystamy więc możliwość nadpisania styli CSS i podmienimy kolorki na stronie. Pamiętajcie, by zmiany zapisywać do pliku custom.css tak, by nie stracić zmian np. przy aktualizacji templatki.
Kolory naszego brandu w heksach to:
- szary #D8D8D8;
- zielony #79A519;
- niebieski z zabarwieniem fioletu #4D74C1.
Kolor żółty, który przewija się przez całą stronę to #FFE719. Znajdziemy go w obszarze Call-To-Action na stronie głównej, a także w linkach i dacie na obrazkach:
.camera_caption > div .item_published {
color: #79A519;
}
.camera_prev:before, .camera_next:before {
border: 2px solid #79A519;
color: #79A519;
}
.mod-newsflash-adv.vertical .item .image_content {
background: #79A519;
}
Do tego kolorki przycisków w dolnej części:
.btn-info {
color: #FFFFFF;
background: #79A519;
}
Zielony na hoverze nagłówków może być troszkę nieczytelny, dlatego pozostawimy je białymi:
.mod-newsflash-adv.custom .item_img .image_content:hover .item_title {
color: #FFFFFF;
}
W powyższym przykładzie, jeśli skorzystacie z ciemnych zdjęć, można zastosować #79A519.
Tak samo tutaj:
.mod-newsflash-adv.articles .item .item_img .image_content > div .item_title {
color: #FFFFFF;
}
Przyda się jeszcze dopracować hover dla linków w nagłówkach i paginację na stronie np. http://livedemo00.template-help.com/joomla_58047/index.php/blog:
h1 a:hover {
color: #79A519;
}
.pagination ul li > .pagenav, .pagination ul li > .hasTooltip {
background: #79A519;
}
Zostało jeszcze kilka drobniejszych zmian, np. kolor hovera dla linka "wróć do góry":
#back-top a:hover {
background: #79A519;
}
Kolory ikon w kontakcie:
.contact_details .icons-marker {
color: #79A519;
}
Kolor lupki na hoverze w galerii:
.jg_catelem_txt ul li a:hover {
color: #79A519;
}
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.
Wszystkie znaki firmowe i marki, nazwy firm i osoby zostały wymyślone na potrzebę tego artykułu. Jakiekolwiek podobieństwa z tworami ze świata realnego są niezamierzone i przypadkowe.
Głosowanie zostało zamknięte. Zapraszamy pod koniec grudnia - kolejny artykuł z cyklu będzie poświęcony templatce z branży "Jedzenie i restauracja".