Dom i rodzina: prywatne przedszkole

Witam w dziesiątym, ostatnim 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: strona internetowa prywatnego przedszkola.

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

Kid Garden to założone w 2016 roku prywatne przedszkole ze średniej wielkości byłego miasta wojewódzkiego. Przedszkole posiada prostą stronę na jednym z darmowych serwisów do tworzenia stron internetowych. Pani Janina, założycielka i dyrektor przedszkola, chciałaby opracować coś bardziej profesjonalnego, z możliwością rozbudowy, a przede wszystkim utrzymywanego na własnym hostingu. Przedszkole posiada aktywnie prowadzony profil w serwisie Facebook. Pani Dyrektor chciałby stworzyć stronę "dla rodzica", co oczywiście będzie można zrobić bez problemu. Przedszkole było inicjatywą kilku rodziców na nowym osiedlu, więc było odpowiedzią na realny problem. Teraz, gdy dzieci przechodzą do szkoły podstawowej, przedszkole musi "zawalczyć" o klientów zewnętrznych. Do tego m.in. celu ma służyć nowa, profesjonalna strona internetowa.

Użytkownicy

Bezpośrednio kierujemy ofertę przedszkola do rodziców dzieci w wieku przedszkolnym, ponieważ to oni są osobami decyzyjnymi. Na pewno dobrze będzie, jeśli strona naprawdę będzie wyglądała jak strona internetowa przedszkola.

- Agnieszka jest matką dwójki dzieci, z których jedno uczy się w szkole podstawowe, a drugie w przyszłym roku będzie uczęszczać do przedszkola. Agnieszka zakłada swoją firmę i chciałaby znaleźć przedszkole niedaleko miejsca zamieszkania, dla wygody komunikacyjnej. Interesują ją również kwestie bezpieczeństwa i opieki w przedszkolu - chętnie pozna grono i ofertę zajęć, również dodatkowych. Agnieszka korzysta z komputera stacjonarnego w domu.

- Jacek wraz z żoną poszukują przedszkola w związku z wprowadzeniem się na nowe osiedle w pobliżu miejsca lokalizacji przedszkola Kid Garden. Biorą pod uwagę jeszcze jedną placówkę, ale słyszał już dobre opinie o Kid Garden i jest skłonny skorzystać z oferty przedszkola. Z internetu korzysta na smartfonie lub służbowym laptopie.

Dopasowanie

Potrzebujemy templatki, która wyjściowo jest opracowana z relatywnie zabawowym klimatem. Odbiorcami są rodzice w wieku 25-40, więc prawdopodobnie dobrze zaznajomieni z nowoczesnymi technologiami, dzięki czemu możemy pozwolić sobie na interesujące zestawienia treści.

Komentarz wdrożeniowy

Templatka

Do tego zlecenia wybrałem templatkę przygotowaną dokładnie dla przedszkola. Templatka jest kompatybilna z Joomla 3.2.0-3.6.x (a co za tym idzie, nie powinno być problemu w najnowszej linii, 3.7.x), korzysta z Bootstrapa 3.0 i oczywiście jest responsywna. To będzie łatwa robota!

Architektura informacji

Chcielibyśmy, aby rodzice, którzy biorą pod uwagę skorzystanie z usług Kid Garden, przede wszystkim zauważyli lokalny, przyjazny charakter przedszkola. Kolejna ważna rzecz to przedstawienie kadry i oferty, wyposażenia przedszkola.

Funkcjonalności

Przygotujemy prezentację przedszkola na jednej stronie, kierując odwiedzających w głąb - About. Stały zespół Kid Garden to coś, czym warto się pochwalić, skorzystamy z podstrony Our team. Zbierzemy najczęściej zadawane pytania w sekcji FAQ. Kilka najfajniejszych elementów oferty przedstawimy na stronie Portfolio. Do tego nieduża galeria wysokiej jakości zdjęć. Na końcu formularz kontaktowy.

Propozycja zmian w stylach (CSS)

Kolory Kid Garden to:

• morska zieleń #2FC1B9;
• limonkowa zieleń: #87AA1B;
• biel jako podkład #FFFFFF.

Wybrana templatka ma praktycznie zupełnie inny zestaw kolorystyczny, ale nie będzie to problemem, ponieważ dokonamy odpowiednich zmian w stylach. Często występującym kolorem CTA jest pomarańczowy (#FE6500) i nagłówkowy fiolecik (#554e9f). Zmienimy je na - odpowiednio - limonkową zieleń (#87AA1B) i morską zieleń (#2FC1B9) spośród kolorów brandu Kid Garden.

Dokonujemy zmian w stylach:

• nawigacja

  .icemegamenu>ul>li.active>a.iceMenuTitle, .icemegamenu>ul>li.hover>a.iceMenuTitle {
  background: #87AA1B;
  }
  .icemegamenu>ul>li>a.iceMenuTitle:hover, .icemegamenu>ul>li>a.iceMenuTitle.hover, .icemegamenu>ul>li>a.iceMenuTitle.icemega_active {
  background: #87AA1B;
  }
  

• elementy buttonów, CTA

  .btn, .kbutton {
  background: #87AA1B;
  }
  

• ikonki w sekcji "Why choose us"

  .mod-newsflash-adv.mod-newsflash-adv__type .item>*[class*=material-icons] {
  border: 3px solid #2FC1B9;
  color: #2FC1B9;
  }
  

• nagłówki

  .page-header *[class*=heading-style], .page_header *[class*=heading-style] {
  color: #2FC1B9;
  }
  .mod-article-single .item-title {
  color: #2FC1B9;
  }
  

• podkreślenie pod nagłówkami będziemy musieli niestety przekolorować samodzielnie, ponieważ jest to statyczny obraz

  .page-header *[class*=heading-style]:after, .page_header *[class*=heading-style]:after
  

• co ciekawe, duże obrazy grafik posiadają tło definiowane w stylach i możemy co nieco pozmieniać, np.:

  #showcase {
  background-color: #2FC1B9;
  }
  #mainbottom {
  background-color: #2FC1B9;
  }
  

• tło okruszków

  #breadcrumbs {
  background: url(../images/header-bg.png) center top repeat #2FC1B9;
  }
  

• i skoro tło jest zielonkawo-morskie, to linki w okruszkach mogą być w kolorze bardziej czytelnym niż pomarańczowe

  .breadcrumb a {
  color: #C4FFFC;
  }
  

• ikonki na podstronie "about"

  .mod-newsflash-adv.mod-newsflash-adv__type1 .item>*[class*=material-icons] {
  color: #2FC1B9;
  }
  

• strzałka powrotu do początku strony

  #back-top a {
  color: #87AA1B;
  }
  

• nagłówki-pytania w sekcji FAQ

  .panel-group .panel-heading a {
  color: #87AA1B;
  }
  

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. To już koniec tej serii artykułów. Dziękuję za uwagę!