Sport, przyroda i podróże: templatka dla trenera personalnego

Witam w siódmym 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: Paweł, trener personalny.

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

Paweł Osobisty to "dietetyczno-rozwojowy" projekt Pawła z dużego, wojewódzkiego miasta. "W zdrowym ciele zdrowy duch" jest może oklepane, ale wciąż wielu ludzi wierzy w obustronną pracę - nad ciałem i duszą. Tego typu trenerem jest Paweł, który po kilku latach jako uczestnik wielu zawodów (otarł się nawet o podium Młodzieżowych Mistrzostw Europy), postanowił część swojego czasu poświęcić budowaniu marki osobistej, właśnie Pawła Osobistego. Paweł wysłuchuje potrzeb swoich Klientów i opracowuje plan rozwoju ducha i ciała na kilka miesięcy do przodu, w celu realizacji celów tych Klientów. Bardzo dobrze współpracuje mu się z osobami w wieku 30-45, którzy chcą wejść na zdrową ścieżkę życia.

Użytkownicy

Paweł celuje w dokładnie określony typ klienta - człowiek sukcesu, który kiedyś uprawiał amatorsko jakiś sport, chcący wrócić do zdrowego trybu życia, również businesswoman chcąca wrócić do formy np. po ciąży.

- Bartek to trzydziestoparoletni specjalista IT w korporacji. Jeszcze podczas studiów dużo biegał, ale wraz z urodzinami pierwszego dziecka zaniedbał się. Teraz, gdy jego życie znów jest poukładane, wraz z sukcesem w karierze chciałby wrócić do biegania, docelowo za rok wystartować w półmaratonie w Warszawie. Potrzebuje wsparcia kogoś, kto go zrozumie, postawi cele i podpowie rozwiązania. Bartek przegląda internet o różnych porach dnia, w różnych warunkach - korzysta ze smartfona, tabletu i laptopa.

- Agnieszka po urodzeniu dziecka nie może zgubić kilogramów. Nie czuje się dobrze, jest wiecznie zmęczona, mimo przebywania na urlopie (wychowawczym). Doszła do wniosku, że potrzebuje wsparcia w kimś, kto pomoże Jej utrzymywać rygor diety i regularnych ćwiczeń. Agnieszka internet przegląda podczas niewielu wolnych chwil, wykorzystuje do tego celu smartfon i okazjonalnie laptop męża.

Dopasowanie

Potrzebujemy templatki lekkiej, umożliwiającej zastosowanie dużych zdjęć przedstawiających Pawła podczas pracy z Klientami (posiadamy zgody Klientów na publikację ich zdjęć).

Znalazłem fajną, lekką templatkę dedykowaną studiu jogi, która spełnia nasze oczekiwania.

Komentarz wdrożeniowy

Templatka

Na stronę Pawła wybrałem templatkę, która oryginalnie została przygotowana dla studia jogi. Templatka jest kompatybilna z Joomla 3.2.0-3.6.x, korzysta z Bootstrapa 3.0 i oczywiście jest responsywna. Mamy wszystko, co potrzebne, aby wdrożyć piękną, nową stronę internetową dla Pawła.

Architektura informacji

Tak, jak już pisałem, na nowej stronie Pawła Osobistego "zagramy" pięknymi, dynamicznymi zdjęciami, które pokazują Pawła pracującego z Klientami nad ich psychiką: silną wolą i walką z ich słabościami, a także ciałem: treningi kardio, aerobowe i inne, przeważnie na łonie natury, z wykorzystaniem nowoczesnych technologii. Potrzebujemy także kilku dodatkowych funkcjonalności - o nich napisałem poniżej.

Funkcjonalności

Pawłowi zależy na prowadzeniu bloga dzięki czemu odwiedzający jego stronę będą zawsze na czasie z tym, czym Paweł się aktualnie zajmuje. Przyda się strona opowiadająca historię Pawła.

Paweł ma już ponad 50 zadowolonych Klientów, więc na pewno świetnym pomysłem będzie przedstawienie ich opinii w formie tzw. "testimonials".

Na pewno skorzystamy z możliwości profesjonalnego zaprezentowania oferty wraz z cennikiem.

Na koniec zostawimy formularz kontaktowy.

Propozycja zmian w stylach (CSS)

Oryginalnie w wybranej templatce kolorem akcentującym jest różowy (czy też jego wariacja) - #DC63AF, a także okazjonalny gradient (np. w buttonach). Nie jest to kolor występujący w identyfikacji wizualnej Pawła Osobistego. Przypomnę wybrane kolory Pawła (On określa je kolorami "Ziemi" - pustyni i lasów):

• brązowy #C5984E;
• zielony #7DAA44;
• biały #FFFFFF.

Paweł zadecydował, aby to zielony był kolorem akcentującym elementy aktywne.

Na początek zmienimy kolor elementu aktywnego w menu i hovera w tym obszarze:

.icemegamenu>ul>li>a.iceMenuTitle:hover, .icemegamenu>ul>li>a.iceMenuTitle.hover, .icemegamenu>ul>li>a.iceMenuTitle.icemega_active,
.icemegamenu>ul>li.active>a.iceMenuTitle, .icemegamenu>ul>li.hover>a.iceMenuTitle {
color: #7DAA44;
}

Następnie kropeczka w menu głównym:

.icemegamenu>ul>li+li:before {
background: #7DAA44;
}

i linia na dole hovera lub też elementu aktywnego:

.icemegamenu>ul>li>a.iceMenuTitle:after {
background-image: none;
background: #7DAA44;
}

Tło okruszków:

#breadcrumbs {
background: #7DAA44;
}

Różne ikonki w widoku blogowym:

.item_info .item_info_dl dd .tags:before, .item_info .item_info_dl dd .item_createdby:before, .item_info .item_info_dl dd .item_hits:before, .item_info .item_info_dl dd .item_published:before, .item_info .item_info_dl dd .item_category-name:before, .item_info .item_info_dl dd .kmt-comment:before {
color: #7DAA44;
}

Na stronie pakietów - nagłówki:

.mod-newsflash-adv.mod-newsflash-adv__pricing_simple .item .item_content .item_title {
color: #7DAA44;
}

Podkreślenie pod tymi nagłówkami:

h1.heading-style-5:after, h2.heading-style-5:after, h3.heading-style-5:after, h4.heading-style-5:after, h5.heading-style-5:after, h6.heading-style-5:after {
filter: none;
background-image: none;
background: #7DAA44;
}

Ramka wokół bloków z pakietami:

.mod-newsflash-adv.mod-newsflash-adv__pricing_simple .item .item_content {
border: 1px solid #7DAA44;
}

Usuniemy te fantazyjne gradienty z dużych buttonów CTA:

.btn:hover, .kbutton:hover, .btn:focus, .kbutton:focus, .btn.focus, .kbutton.focus, .btn.active, .kbutton.active, .btn.selected, .kbutton.selected {
filter: none;
background-image: none;
background: #7DAA44;
}

Element ilustrujący cytat:

blockquote:before {
color: #7DAA44;
}

I jeszcze linki:

.mod-newsflash-adv.mod-newsflash-adv__team_home .item .item_content .item_title a {
color: #7DAA44;
}

Na podstronie historii:

• pionowa linia:

.page-category__history .items-row:before {
background: #7DAA44;
}

• tła ikonek na tej linii:

.page-category__history .items-row>div:before {
background: #7DAA44;
}

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 "Moda i uroda" i pojawi się w kwietniu.