UI Design: Marek Kasperski

Przeglądając statystyki odwiedzin bloga, w tym w szczególności zapytania do Google, które prowadzą potem na stronę, zauważyłem, że często pojawia się hasło schematów kolorystycznych do wykorzystania na stronach WWW.

O kolorach już było kilkakrotnie (o widzeniu kolorów i projektowaniu uwzględniającym accessibility, wykorzystaniu w ramach tworzenia e-brandu, o znaczeniu psychofizjologicznym) - stąd zapewne przekierowania z Google - ale o schematach nie. Stąd - wychodząc na przeciw potrzebom :) - dzisiaj właśnie schematy kolorystyczne. Skąd u mnie tak duży nacisk na kwestie kolorystyczne w ramach projektowania interfejsów? Powodów jest kilka. Choćby takie dwa:

• około 96 % informacji nt. świata zyskujemy w ramach percepcji wzrokowej (to m.in. dlatego tak istotne są dzisiaj badania z wykorzystaniem techniki eyetracking). Ludzkie oko jest wyposażone w aparaturę umożliwiającą widzenie barw oraz widzenie jasności - resztę roboty wykonuje juz mózg. To wyspecjalizowanie - nadwrażliwość na kolory - powoduje, że podczas oceny tego, co widzimy, olbrzymią rolę odgrywa to, czy dana rzecz spełnia nasze oczekiwania kolorystyczne. Zatem: lepiej mieć nad tym panowanie, niż zdawać się na przypadek.
• McLuhan w ramach teorii mediów twierdził, że sposób prezentowania treści zawiera już w sobie treść. Nic dodać, nic ująć, w przypadku sposobu prezentacji treści wykorzystującego kolory.

Przy pomocy kilku zasad tworzenia zestawów kolorystycznych, otrzymujemy schematy kolorów harmonijnych: zarówno monochromatyczne, pastelowe, jak i kontrastowe.

W ramach tworzenia zestawów harmonijnych korzysta się m.in. z zasad:

• zasada komplementarności: weź dowolne dwa kolory leżące naprzeciw siebie w kole barw,
• zasada triady: weź dowolne trzy kolory leżące na kole barw od siebie w jednakowych odległościach, tworząc tym samym trójkąt,
• weź cztery dowolne kolory leżące na kole barw, które leżą od siebie tak, że tworzą wierzchołki prostokąta,
• i innych.
  

Korzystając ze strony Adobe Kuler można przekonać się na własne oczy jak to działa.

Zestawy kolorów monochromatycznych uzyskać bardzo łatwo - np. weź dowolny kolor i, z jednej strony, dodawaj do niego +20%, +40%, + 60%, +80% białego oraz, z drugiej strony, +20%, +40%, + 60%, +80% koloru czarnego. Jednak w przypadku kolorów monochromatycznych pamiętajmy o odpowiednim kontraście, który będzie ważny ze względu na czytelność tekstu i tła, na którym tekst się znajduje.

Zestawy barw pastelowych uzyskujemy z odległych od siebie barw ale posiadających podobne cechy, na przykład niski stopień nasycenia.

Jeśli chodzi o schematy kontrastowe, to wystarczy połączyć ze sobą barwy dopełniające się.

Rysunek 2. Projekty strony WWW wykorzystujące monochromatyczne zestawy kolorów.

***

33 schematy kolorystyczne [do wykorzystania na strony WWW]*

#6B2E50 | #B24D89 | #D293B7 | #E1B7CF | #F0DBE7 | #D8E1B7

#FB6BB3 | #FF99CC | #FFB3D9 | #FFCDE6 | #FFE7F3

#663355 | #663366 | #CC66CC | #887788 | #BBAABB | #EEBBEE | #EEBBDD | #EEDDEE

#340034 | #750074 | #DD71BD | #F7D4E6 | #F7E4EE | #FEFFFF

#DCC8C7 | #BF9FAA | #B295CD | #773A5B | #C39B9C | #87707A

#DEBAD2 | #B875A5 | #703860 | #98867B | #FFBB47

#666666 | #330033 | #663366 | #996699 | #FFCC66

#929690 | #B4CD99 | #648040 | #90AE60 | #E1E2A3 | #E8E8E4 | #E19857

#948068 | #C0BB93 | #90A07B | #7E8C8D | #666962

#5C2810 | #CAB36F | #AFB06C | #DED791 | #C2A182

#888C71 | #44381E | #C3D5C7 | #565038 | #DCDDB1

#98B564 | #C7DDA0 | #C6CDB9 | #DDDDDD

#335533 | #668844 | #99BB66 | #DDEEBB | #888877

#497019 | #99C089 | #B3B590 | #E6F5BC | #D8E6AB | #A3AC59 | #FAE56E

#3C5787 | #477265 | #528C44 | #5CA622 | #67C100

#567500 | #759933 | #8DC42B | #B1CA25 | #CEF415 | #E6F33F

#89974A | #C3D73A | #BBC971 | #E1E9AD | #EBF2BE | #EBE06D | #C54836

#6FA9E1 | #679BE4 | #9CD821 | #EA7F2D

#C1DA84 | #8BB5B7 | #AAC9CB | #CADDDE | #7A7A7A | #C8C8C8 | #B6B6B6

#595B66 | #404251 | #D1D7FA | #555A74 | #2C2D38

#D2D0E8 | #F0EFF4 | #A9AFD1 | #525C91

#000000 | #313C42 | #6B797B | #EFC310 | #FFFFFF

#DEDACA | #C0B99A | #8D8870 | #5E5945 | #7799AA | #5B8092 | #335566 | #223344

#6A7276 | #B4BEC2 | #828A8C | #EAB646 | #FAD68A | #EEECE8

#F3E690 | #B2BDFF | #928F90 | #BBA095 | #FEFAE9

#D5BF90 | #8F968F | #FFCD50 | #8597A5 | #FEFED9 | #76763A

#C7A485 | #E2D2BD | #FFEFE3 | #FFCAB9

#4D435B | #683653 | #EED4E1 | #7A848D | #E2E7ED | #AFC3CE

#313531 | #CED8C6 | #59777D | #4A3139 | #B6AC8E | #848370 | #E7BFCB

#798488 | #92987C | #A59680 | #A58080 | #827988

#83815A | #CDC282 | #D1C5AF | #DEC0BE | #D87A94 | #57393B

#F7DFC7 | #E3AEA8 | #5C433F | #F9D0A2 | #DA826C | #F6AC6D

#CA091E | #F91A1D | #D80B29 | #FF5812 | #FFA723

* Schematy wybrane z bogatej galerii znajdującej się na stronie ColorSchemer.