Grafika i projektowanie: templatka dla decoupażystki

Witam w czwartym 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: Ania, która zajmuje się decoupagem.

W tym artykule opiszę przypadek stworzenia nowej strony internetowej dla decoupażystki.

Ania zawsze wszystko robiła na serio, ale dopiero od niedawna przedstawia efekty swojej pracy poza najbliższą rodzinę i znajomych. Ania zajmuje się przygotowywaniem zdobionych elementów życia codziennego: pudełek, bombek, wieszaczków, ozdób, wisiorków. Teraz chciałaby zacząć budować swoją obecność w internecie, bez nacisku na komercjalizację swoich wytworów. Przynajmniej jeszcze nie teraz. Zależy Jej na zaprezentowaniu swojego dotychczasowego dorobku, a także znalezienie potencjalnych odbiorców swoich prac. Liczy, że z biegiem czasu być może zainteresuje swoim rękodziełem jakąś manufakturę. Warto wtedy, na tym etapie, posiadać już działającą aktywnie stronę internetową.

Ania nie posiada opracowanej identyfikacji wizualnej, nie czuje, aby na tym etapie potrzebowała tego typu narzędzi, również logo. Wśród ulubionych kolorów wylicza zielony i fioletowy. W takich barwach przygotuję templatkę.

Użytkownicy

Decoupage to sztuka zdobienia, więc odbiorcami tego typu produktów będą osoby wrażliwe estetycznie - jest to dość rozmyte pojęcie, dlatego mimo wszystko należałoby określić przynajmniej dwie grupy użytkowników zainteresowane tego typu usługami. Zdecydowałem się na:

- Dariusz jest właścicielem trzech małych cukierni w dużym mieście wojewódzkim. To rodzinny biznes, który stawia na jakość, nie ilość. W przyszłe Święta Wielkanocne planuje zaoferowanie swoim Klientom serię specjalnie zaprojektowanych opakowań do ciast świątecznych. W związku z tym, poszukuje dwóch-trzech osób zajmujących się decoupagem do wykonania łącznie 100 pudełek kartonowych z oryginalnymi grafikami świątecznymi.

- Katarzyna właśnie wprowadziła się do nowego mieszkania, ma za sobą podstawowy remont. Teraz planuje dalsze urządzenie i doszła do wniosku, że dobrym pomysłem będzie ozdobienie łazienki w oryginalny sposób, zgodny z Jej naturą. Kasia szuka artysty/artystki, który/a przygotuje elementy łazienki ozdobione zgodnie z Jej marzeniami.

Dopasowanie

Potrzebujemy templatki, której budowa daje możliwość prezentacji zdjęć i galerii w ciekawy sposób. Od razu w oko wpadła mi #61256.

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 ciekawie wygląda przede wszystkim pierwsza strona - możliwość użycia dużego zdjęcia i miniaturek prowadzących w głąb strony.

Architektura informacji

Ania potrzebuję przede wszystkim poukładanej strony wejściowej, rozbudowanej galerii i bloga.

Funkcjonalności

Bardzo fajnie wygląda galeria i blog. Przejrzysty i czysty układ pozwoli odbiorcy skupić się na zdjęciach prac Ani.

Propozycja zmian w stylach (CSS)

Templatka, którą wybrałem do tego wdrożenia, jest praktycznie monochromatyczna. Jedyny rzucający się w oczy kolor to hover dla linków (czerwony). Spróbujemy podrasować kolorki tak, aby przygotować środowisko do wrzucania zdjęć prac Ani.

• "Świecący" zielony: #90FF5D;
• "Świecący" fiolet: #B18AFF;

Zmienimy przede wszystkim kolor linków:

a, a:visited {
color: #B18AFF;
}

Nagłówek zrobimy zielonkawy, z linkami nawigacji głównej w ciemniejszej zieleni. Ulubiona zieleń Ani jest troszkę zbyt żarówiasta, więc wyciszymy tło:

.headerContent {
background: #D1F2C2;
}

Kolory linków w nagłówku:

.icemegamenu > ul > li > a.iceMenuTitle {
color: #638752;
}

I kolor ramki dolnej, znikającej po najechaniu myszką:

.icemegamenu>ul>li>a.iceMenuTitle {
border-bottom: 2px solid #638752;
}

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.

Ania zajmuje się decoupagem naprawdę! Zdjęcia prac wykorzystane w tym artykule są autentyczne, a ja zapraszam Was na stronę na której znajdziecie zdjęcia prac Anny.

Głosowanie zostało zamknięte. Kolejny artykuł z cyklu będzie poświęcony szablonu z branży "Społeczeństwo i ludzie" i pojawi się w lutym.