Społeczeństwo i ludzie: templatka dla kandydata na Prezydenta RP

Witam w pią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: p. Dyzma, który pragnie startować w wyborach prezydenckich w 2019 roku.

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

Pan Dyzma reprezentuje jedną z popularnych w Polsce partii. Człowiek, który całe życie zajmował się polityką, postanowił kandydować na urząd Prezydenta w 2019 roku. Chciałby stworzyć stronę internetową, która zaprezentuje jego dokonania, życiorys, sukcesy tak, aby wyborcy mogli poznać swojego ukochanego kandydata. Idealnie, bo w 2019 roku, będzie dokładnie 30 lat kariery politycznej p. Dyzmy. "Cieszy fakt, że Polacy doceniają 27 lat wolności tego kraju" - rozpoczyna opowieść p. Dyzma, gdy pytam go o odbiorców i charakter strony internetowej.

Pan Dyzma ma nakaz bezpośrednio od prezesa partii, by wykorzystywać elementy identyfikacji wizualnej partii.

Użytkownicy

Odbiorcami strony internetowej mają być potencjalni wyborcy i osoby niezdecydowane. Przekrój społeczeństwa jest bardzo szeroki, ale po krótkiej rozmowie z p. Dyzmą, z której nic nie wynikało, zdecydowałem się określić dwie persony, które idealnie reprezentują jego elektorat:

- Żaneta to młoda, wykształcona mieszkanka wielkiego miasta. Żaneta, razem z półtorarocznym dzieckiem i mężem, mieszka w 42-metrowym apartamencie na modnym, wielkomiejskim osiedlu. Do pracy dojeżdża około 70 minut, więc idealnie dla niej będzie, jeśli strona internetowa p. Dyzmy będzie responsywna - tak, by mogła poczytać o polityku podczas przejazdu do i z pracy. Żaneta nie ma czasu czytać, więc oczekuje krótkich opisów dokonań polityka - z pewnością idealnie zadziałają na nią krótkie, populistyczne hasła z obietnicami nie do spełnienia.

- Pan Kazimierz to czekający na emeryturę pracownik państwowej spółki, który nie chciał skorzystać z emerytury pomostowej. Mieszka w średniej wielkości mieście w zagłębiu węglowym. Choć nie pracuje jako górnik, pod ziemią, a całe dnie przesiaduje w klimatyzowanym biurze, nie jest zadowolony z tego, w jaki sposób przebiegają zmiany w kraju od kilku lat. On sam z łezką w oku wspomina czasy, gdy praca była dla każdego, a on sam drukował ulotki propagandowe. Teraz nie może się już doczekać emerytury, by całe dnie przesiadywać w domku nad jeziorem, który wybudował jeszcze na początku lat 90-tych. W wolnych chwilach pan Kazimierz protestuje albo ogląda piłkę nożną.

Dopasowanie

Potrzebujemy templatki, której budowa daje możliwość prezentacji osoby indywidualnej, jednocześnie przedstawiając w sposób hasłowy dokonania i cechy tej osoby. Idealne będą duże obszary, w których umieścimy najlepsze zdjęcia polityka. Potrzebujemy też dużych nagłówków, które będą przemawiały do potencjalnych wyborców językiem prostym, zrozumiałym. Na pewno przyda się formularz kontaktowy, aby odbiorcy mieli wrażenie możliwości nawiązania dialogu z kandydatem. Pan Dyzma chciałby również umieścić blog ze swojej kampanii na nowej stronie internetowej. Wybór padł na #57937, która idealnie odpowiada na nasze potrzeby.

Komentarz wdrożeniowy

Templatka wybrana pod to konkretne wdrożenie jest kompatybilna z najświeższą linią Joomla, korzysta z Bootstrapa w wersji 3.0. Bardzo dobrze wygląda możliwość skonfigurowania pierwszej strony na zasadzie dużych zdjęć i nagłówków, z prostym przekazem, zrozumiałym przez ogół społeczeństwa.

Architektura informacji

Pan Dyzma potrzebuje dobrej strony wejściowej, a do tego jedynie kilka elementów dodatkowych: blog, FAQ i galeria to podstawowe funkcjonalności, których szukamy.

Funkcjonalności

Strona główna to genialne połączenie dużych obrazów i nagłówków. Obrazowy sposób przedstawiania treści kontynuujemy na blogu, a galeria pozwoli zaprezentować najciekawsze wystąpienia pana Dyzmy. Możemy wykorzystać sekcję Portfolio do prezentowania wydarzeń z kampanii prezydenckiej 2019.

Propozycja zmian w stylach (CSS)

Templatka, którą wybrałem, jest relatywnie monochromatyczna, z kolorem złotym jako akcentującym. Zgodnie z wolą pana prezesa, podmieniamy ten złoty (który "wydaje się być zbyt burżujski") na kolor czerwony.

Zestaw kolorów partii, którą reprezentuje p. Dyzma:

• biały: #FFFFFF;
• czerwony: #C62632;
• żółty: #FFF931;

Kolor złoty tej templatki to

#ceb475;

i pojawia się on bardzo licznie. Podmienimy go na czerwony (#C62632;):

.pretext, .category_desc {
color: #C62632;
}
.page-header *[class*=heading-style]:before, .page_header *[class*=heading-style]:before, .page-header *[class*=heading-style]:after, .page_header *[class*=heading-style]:after {
border-top: 2px solid #C62632;
}
#top .mod-article-single:after {
border-bottom: 2px solid #C62632;
}
div#fixed-sidebar-right .moduletable.login>i.fa-user {
background: #C62632;
}

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 "Kultura i sztuka" i pojawi się w marcu.