UI Design: Marek Kasperski

Przy projektowaniu stron internetowych istotną rzeczą jest zdefiniowanie grupy docelowej - nie tylko po to by określić funkcjonalność serwisu z myślą o jego użytkownikach, ale także - a czasem, przede wszystkim - ze względu na określenie kolorystyki brandu. Odpowiednie kolory oraz zestawienia kolorystyczne mają czasem siłę oddziaływania większą niż nie jeden slogan, i są w stanie wpłynąć na nasz odbiór i ogólną wydajność organizmu (co potwierdziły już chociażby badania The British Colour Council, prowadzone w Anglii w latach 1930-1948).

Barwy niosą ze sobą treść zarówno psychologiczną, fizjologiczną (oddziaływują pobudzająco bądź uspokajająco) oraz kulturową, związaną z symboliką barw w danej kulturze.

I tak, jeśli chodzi o znaczenie psychologiczne:

"Mówimy, że czerwień rozdrażnia, szkarłat sprawia wrażenie majestatyczne lub żałobne, kolor zółty rozwesela, zieleń uspokaja, fiolet przygnębia itd. Określamy barwy jako wesołe, czyste pogodne, lub smutne, nużące."

Jeśli chodzi o oddziaływanie fizjologiczne:

"Bez trudu da się udowodnić, że ostra czerwień działa podniecająco, podczas gdy blady błękit czy chłodne zielenie uspokajająco.

Stwierdzono, że różne barwy wywołują różne stopnie pobudzenia. Jest ono tym silniejsze im dłuższa jest fala świetlna, im większe jest natężenie barwnego światła, oraz im większy obszar pola widzenia obejmuje działanie bodźca.

Światło czerwone powoduje wyraźny wzrost ciśnienia krwi, przyspieszenie oddechu i tętna oraz zwiększa częstotliwość mrugania powiekami, natomiast promieniowanie niebieskie obniża ogólną aktywność.

Fizjologiczny wpływ barw na ludzki organizm polega na ich oddziaływaniu na system wegetatywny. (...)"

Jeśli chodzi o symbolikę barw:

czerwień - siła, władza, pasja, niebezpieczeństwo, błąd, stop, ostrzeżenie, agresja, ogień, odwaga, gorący, luksusowy, namiętność

róż - kobiecy, śliczny, cukierkowy

pomarańcz - ciepło, energia, żywotność, świeżość, nowoczesność, ostrożność

żółty, złoty - optymizm, radosny, słoneczny, dostatek, zawiść, zazdrość, ostrożność

brąz - zaufanie, przyjaźń, pewność, jesienny, klasyczny

zieleń - natura, wzrost, żyzność, nowość, nadzieja, przyjaźń, niedoświadczenie, sukces, uzdrowienie, ochrona środowiska

błękit - bezpieczeństwo, niebo, woda, spokój ducha, wzniosłość uczuć, męski

purpura, fiolet - królewski, tajemniczy, mądrość, duchowe poznanie, wtajemniczenie, zagadka

czerń - powaga, autorytet, złość, śmierć, żałoba, noc, strach, siła

szarość - bezpieczeństwo, niezawodność, nowoczesność, pochmurny, posępny, sędziwy

biel - nieskazitelny, czysty, niewinny, chłodny, zima

srebny - czystość, rozsądek, niewinność, radość, szlachetność

Dodatkowo: jasne odcienie uważane są za czyste, ciemne - za brudne.

***

Teraz pytanie podstawowe: jak wykorzystać tę wiedzę podczas procesu projektowego? Zarówno na poziomie projektowania komunikacji - np. czerwone alerty systemu - jak i w ramach tworzenia e-brandu strony.

Przyjżyjmy się często dowiedzanym serwisom dla kobiet (na potrzeby wpisu usunąłem za zrzutów stron wszystkie reklamy graficzne tak, by skupić się tylko na layoucie).

Kobieta w gazeta.pl

Kobieta w Interii

Kobieta w Onecie

Kobieta w WP

e-kobiety

Już na pierwszy rzut okaz widać, że dominują kolory: różowy, szary i biały, plus wariacje na ich temat oraz barwy uzupełniające, jak jasny zielony czy pastelowy błękit. (To dlatego projektując kilka lat temu stronę mojej żony dobrałem właśnie takie kolory).

Rysunek. Kolorystyka Kobieta.onet.pl.

Spójną kolorystykę e-brandu można zaobserować także w innych obszarach tematycznych oraz (osobna zmienna) przy innych grupach docelowych. Na przykład serwisy astrologiczne, z horoskopami: astrologia.interia.pl, horoskop.wp.pl, magia.gazeta.pl. Tak, tak: fiolet, granat, srebny, czarny. Generalnie kolory nocnego nieba, tajemnicy, ale także wtajemniczenia. (Chociaż tam, gdzie grupę docelową ustalono na kobiety, jest także sporo białego - np. w Onecie).

Inne zestawy kolorystyczne i przykładowe marki, związane z tymi zestawami:

• czarny ze złotym, ale także czarny i srebnym: sklep z luksusową biżuterią,
• ciemny zielony, khaki, szary: militaria, survival,
• jasny zielony oraz uzupełniające inne kolory (np. czerwony): ogrodnictwo,
• brąz, czarny: producent galanterii skórzanej,
• żółty, pomarańcz, piaskowe brązy, błękitny: serwis turystyczny [z podróżami do ciepłych krajów],
• granat, szary: strony dla menadżerów,
• żółty, pomarańczowy, czarny, szary: sprzęt budowlany, urządzenia techniczne, itp.
  
• itd.

***

Cytaty za: A. Mączyńska-Frydryszek, M. Jaskólska-Klaus, T. Maruszewski, Psychofizjologia widzenia, 1991.

Systematyka barw jest wypadkową tego co można znaleźć w wyżej wymienionej pozycji oraz książkach: A. Zausznica, Nauka o barwie, 1959 i Thomas A. Powell, Web Design Complete Reference, 2002.

Update z 12 sierpnia

• Galeria stron wykorzystujących kolor różowy jako dominujący.
• Kolorystyka stron z nurtu Web 2.0.
• Stylistyka Web 2.0 (Collection of Web 2.0 Navigation Menus).