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