5 kolorów, których absolutnie musisz unikać podczas projektowania stron internetowych
Opublikowany: 2016-07-06Sieć cały czas staje się coraz bardziej wizualna. Dobra treść pozostaje królem, ale lepiej byłoby ją opakować w atrakcyjny pakiet wizualny, aby się wyróżniać.
Dla profesjonalistów zajmujących się projektowaniem nie stanowi to większego problemu. Są całkowicie przesiąknięci teorią koloru i psychologią koloru.
Ale co z rosnącą liczbą mieszkańców sieci, którzy starają się, aby ich zawartość internetowa była na bieżąco z rosnącą wizualną naturą sieci? Nawet te artykuły internetowe, które podsumowują teorię koloru i psychologię koloru, choć są doskonałe w przekazywaniu podstaw koloru w projektowaniu, mogą zostać źle zinterpretowane przez tych, którzy nie mają doświadczenia, jakie mają graficy, co może prowadzić do potencjalnie katastrofalnych decyzji.
Więc jakich kolorów musisz absolutnie unikać na swoich stronach internetowych?
Czysta czerń
Zacznijmy od czerni - czystej czerni - która w HTML jest zakodowana jako #000000.
Zaskoczony? Czerń jest wszędzie, prawda, jak w tekście na większości stron internetowych, wszechobecna mała czarna i nocne niebo?
Cóż, czysta czerń jest mniej powszechna, niż myślisz. Prawdziwa czysta czerń #000000 jest w rzeczywistości nienaturalnym kolorem. Nie istnieje w naturze. Czysta czerń wymaga pochłaniania wszystkich widm światła, a to po prostu nie zdarza się w naturze. Naturalne kolory są bardziej zmieszane i stonowane.
Czysta czerń nie jest więc czymś, do czego nasze oczy są przyzwyczajone. To trudne. Wyróżnia się (co jest częścią tego, co sprawia, że ta mała czarna sukienka jest tak popularna). Dlaczego więc nie wykorzystać go w projektowaniu stron internetowych? W końcu artykuły internetowe, które dotykają psychologii koloru, podkreślają jej związek z przepychem, wyrafinowaniem, władzą i autorytetem. Czy te artykuły są błędne, gdy zachęcają do używania czerni?
Wcale się nie mylą. Czerń może być używana do wzbudzania silnych pozytywnych skojarzeń w umysłach ludzi. Kluczem jest użycie czerni, która nie jest czystą czernią.
Ponieważ czysta czerń nie jest naturalnym kolorem, mózg jest trudniejszy do przetworzenia. Podnieś swoją czerń z #000000 do #111111 lub podobnej bardzo ciemnej szarości, a nadal będziesz czerpać korzyści z czarnego koloru, nie obciążając tak bardzo mózgów odwiedzających.
Neonowe kolory w elementach interfejsu
Neonowe kolory, choć przyciągające wzrok, mają tę samą tendencję do przytłaczania mózgu. Jako kolory, które nie występują w naturze, są nieznane mózgowi i trudniejsze do przetworzenia niż bardziej stonowane, mieszane kolory.
Zachowaj przyciągające wzrok neonowe kolory dla wyróżnień graficznych, aby zawartość wizualna była widoczna zamiast w elementach interfejsu. I upewnij się, że używasz ich nie tylko do zwrócenia uwagi na grafikę, ale do zwrócenia uwagi odwiedzającego na te części strony, w których znajdują się kluczowe informacje.
Innymi słowy, trzymaj neony z dala od tła, na które zostanie nałożony tekst, takich jak tła tekstu głównego, paski boczne, wstążki nawigacyjne lub przyciski.
Używaj bardziej naturalnych, lekko mieszanych kolorów, które nie męczą wzroku, jako tła dla treści tekstowych. Neonowe kolory jako tekst lub w tle tekstu mają tendencję do męczenia oczu. Może to pozostawić podświadome negatywne wrażenie na stronie internetowej i jej ofercie, co jest ostatnią rzeczą, jakiej chcesz. Chcesz zostawić gościa z pozytywnym nastawieniem do swojej firmy.
Ogólną zasadą obejmującą pierwsze dwa wybory kolorów, których należy unikać, jest unikanie kolorów, które w kodowaniu HTML mają skrajne spektrum kolorów - zera i Fs, zwłaszcza w tekście i tłach tekstowych. Odsuń je nieco od nienaturalnych, absolutnie czystych kolorów, a umysł będzie łatwiej je przetworzyć i pozostawi bardziej korzystne wrażenie na odwiedzających.
Kombinacje o zbyt wysokim kontraście
Oprócz unikania zbyt czystych kolorów, uważaj na pewne kombinacje kolorów.
Chociaż czerwień i zieleń są podstawowym elementem sezonu Bożego Narodzenia, przy projektowaniu witryn pojawia się wiele problemów – do tego stopnia, że wśród projektantów pojawia się wiersz „Czerwony i zielony nigdy nie powinno się widzieć, bez koloru pomiędzy nimi”.
To z powodu sposobu, w jaki mózg przetwarza te dwa kolory. Czerwień rejestruje się jako najcieplejszy kolor i stymuluje aktywność mózgu. To kolor, który najszybciej przykuwa naszą uwagę. Czerwony pobudza mózg.
Z drugiej strony zielony rejestruje się jako chłodny kolor. Uspokaja mózg. Połączenie tych dwóch rzeczy stawia mózg w niewygodnej pozycji przetwarzania obrazu, który jednocześnie próbuje go poruszyć i uspokoić. Pozostawia mózg w konflikcie. To nie jest dobre dla wywarcia pozytywnego wrażenia.
Podobnie jak w przypadku wyżej wspomnianego użycia neonowych kolorów w tekście lub w tle tekstu, używanie czerwieni i zieleni razem może pozostawić odwiedzającego negatywne, podświadome wrażenie tego, co oferujesz, co nie ma nic wspólnego z samą ofertą. Zamiast tego to negatywne wrażenie pochodzi z wewnętrznego dyskomfortu przetwarzania ścierających się kolorów.
Czerwony i zielony też mają drugi problem. Kulturowo w świecie zachodnim ludzie są przyzwyczajeni do kojarzenia czerwonego z „stop” lub „nie”, a zielonego z „go” lub „tak”. Znowu zmusza mózg do radzenia sobie ze sprzecznymi danymi wejściowymi, które sprawiają, że mózg czuje się niekomfortowo. A kiedy mózg poczuje się niekomfortowo, przeniesie to uczucie niepokoju na twoją ofertę – wcale nie to, czego chcesz.
Chociaż nie jest to tak skrajny kontrast, ta sama zasada odnosi się do kombinacji czerwieni i niebieskiego oraz, w jeszcze mniejszym stopniu, do każdej kombinacji tak zwanych kolorów drugorzędnych, a mianowicie fioletu, zieleni lub pomarańczy.
Czerwień i błękit tworzą zderzenie barwy bardzo ciepłej z barwą bardzo chłodną. Kolory drugorzędne, będące mieszankami kolorów podstawowych (fioletowy to mieszanka czerwonego i niebieskiego, zielony to mieszanka niebieskiego i żółtego, pomarańczowy to mieszanka żółtego i czerwonego) po prostu nie mieszają się dobrze. Każda z tych kombinacji jest po prostu zbyt silnym kontrastem, aby mózg mógł wygodnie przetwarzać.
Ponownie, dąż do bardziej naturalnych, mieszanych kolorów, które unikają obciążających mózg kombinacji, które wynikają z używania kolorów, które znajdują się naprzeciwko siebie na kole kolorów lub które są przeciwieństwami pod względem ciepła i chłodu.
Kombinacje o zbyt niskim kontraście
Nie oznacza to jednak, że powinieneś używać tylko kolorów, które są prawie identyczne pod względem odcienia (koloru) i wartości (względna ciemność). Możesz też posunąć się za daleko w tym kierunku, stwarzając inny rodzaj problemu dla odwiedzających.
Umieszczenie jasnego tekstu na białym tle, na przykład różowym lub żółtym lub jasnoniebieskim lub lawendowym na białym, może utrudnić odwiedzającym zrozumienie, co mówi tekst. To samo dotyczy ciemnego tekstu na ciemnym tle, takim jak czerwony, królewski niebieski lub magenta na czarnym tle.
Inne specyficzne złe kombinacje to żółty na zielonym lub zielony na żółtym oraz czerwone tło z czarnym, niebieskim lub purpurowym. Nie tylko ryzykujesz, że daltonista może w ogóle nie zobaczyć tekstu, ale irytujesz nierozróżniających kolorów odwiedzających, zmuszając ich do wytężania się, by przeczytać to, co napisałeś. I nie mówimy tutaj o podświadomych wrażeniach. Mówimy o tym, że świadomie irytują się na Ciebie za utrudnianie im czytania Twojej witryny.
Ten błąd jest szczególnie powszechny, gdy nakładasz tekst na obrazy, na przykład w dużym obrazie nagłówka u góry strony. Zawsze upewnij się, że WSZYSTKI tekst jest wyraźnie widoczny na obrazach nagłówka, a nie tylko jego większość.
Wielokolorowe tła
Witryny, które oferują darmowe teksturowane tło dla projektantów stron internetowych, są liczne i możesz mieć wrażenie, że wyróżnią Twoją witrynę. Ale bądź ostrożny, jeśli zdecydujesz się go użyć. Teksturowane tła mogą być zajęte, a tym samym odwracać uwagę odwiedzających od Twoich treści. Stajesz w obliczu takiego samego niebezpieczeństwa zagubienia tekstu w teksturowanym tle, jak w przypadku nakładania tekstu na obrazy.
Bądź ostrożny przy wyborze teksturowanego tła. Unikaj rzucającego się w oczy, zderzających się kolorów tła, popularnego we wczesnych czasach Internetu. Te tła często składały się z maleńkich, powtarzających się wzorów o jasnych, kontrastujących kolorach, w których tekst łatwo się gubił.
Dzisiejszy trend polega na subtelnym, naturalnym wyglądzie, który nadaje tłu wrażenie głębi bez rozpraszania uwagi. Ogólna zasada dotycząca palet kolorów dla stron internetowych to używanie nie więcej niż trzech kolorów, zdecydowanie nie więcej niż czterech.
To samo ostrzeżenie, aby zachować ostrożność podczas korzystania z tekstur, dotyczy korzystania z gradientów (element graficzny, w którym kolor lub ciemność tła zmienia się stopniowo z jednej części tła na drugą). Unikaj używania ich do wielu bloków tekstu na stronie. I unikaj używania gradientu, który zawiera kolor tekstu, aby tekst nie zgubił się w gradiencie. Zawsze umieszczaj tekst w ramkach lub w czystym obszarze tła, z wystarczającą ilością miejsca od innego elementu wizualnego, aby tekst wyraźnie się wyróżniał.
Wniosek
Wybór kolorów dla witryny to oczywiście coś więcej niż wybór ulubionych kolorów lub zestawu kolorów, które podobały się w innej witrynie. To coś więcej niż tylko pojedyncze zalecenie z artykułu online, ponieważ wszystko, co trzeba wiedzieć o wyborze kolorów, bez uczenia się więcej.
Kolor jest bardzo potężnym narzędziem perswazji. Używany ostrożnie, może pomóc skierować odwiedzających do działania, które chcesz, aby wykonali. Używany niedbale, może pozostawić odwiedzających z niejasnym poczuciem niepokoju związanego z Twoją firmą, a nawet świadomie zirytować trudnościami w użyciu Twojej witryny.
Skoncentruj swój wybór kolorów na tych, które są łatwe dla mózgu i kontynuuj naukę, jak wybierać kolory, które dobrze ze sobą współgrają, a będziesz na dobrej drodze do zaprojektowania witryny, w której Twoje kolory będą współgrać ze wszystkimi innymi elementami Twojego stronie, aby osiągnąć swoje cele.