Цветовете в уеб дизайна: как да се предизвикат желаните в потребителя емоции
Цветът определя емоционалната реакция на потребителя на сайта, дори и ако самият човек не осъзнава това. За да разберете какви цветове да използвате за фон и в различните елементи на сайта, за да предизвикате определени усещания, и как да съчетавате цветовете в уеб дизайна, четете по-долу.
През цялата човешка история майсторите-художници са получили всеобщо признание, дължащо се на умението им за работа с цветовете. В съвременния свят не по-малко признание получават и експертите, умеещи да съчетават цветовете в комерсиалните и бизнес цели – рекламата и уеб дизайна.
Умението за използване на цветовете може да се развива до безкрайност. Това е реалната бездна на възможността за въздействие върху човека.
Ние ще разкажем за основите на теорията на цветовете, цветовата схема и емоционалното въздействие на определените цветове.
Теория на цвета
На темата за цветовете може да се посвети и цяла книга, така че ние няма да я разглеждаме изцяло, а ще се ограничим само до полезната информация, която може да се използва при разработката на дизайна на интерфейса.
Теорията на цветовете може да се разбие на три части:
Контраст
Във всеки отенък има противоположност, така да се каже, негов „заклет враг“, който е най-големият контраст с този цвят. За да бъде намерен този цвят, може да се използва цветови кръг. Просто се избира цветът на противоположната страна на кръга.
Допълнение
Тези цветове не винаги са в конфликт помежду си, а допълнителните цветове се подчертават помежду си, за разлика от контрастните. В цветното колело, тези цветове се намират един до друг, като например, допълващите цветове на лилавото – това са синьото и розовото.
Резонанс
При изработката на уеб дизайн всеки цвят носи определено настроение. Ярките топли цветове (червено, оранжево, жълто) изпълват човека с енергия и го будят, а хладните тъмни отенъци (зелен, син, лилав), обратното отпускат и успокояват.
Например, BBC News използва червена навигационна лента за да събуди читателя, за да засили неговото възбудено състояние. Предвид спецификата на сайта – сензационни новини – червения цвят е логично решение.
Теорията на цветовете в уеб дизайна – това е повече от просто украшение. Цветът може да промени възприятието на вашия сайт и да изиграе решаваща роля в бизнеса Ви.
Емоционално възприятие на цвета
Никой няма да отрече тясното взаимодействие на цвета и емоцията. И разбира се, всеки уеб дизайнер иска да използва това влияние за създаване на определена атмосфера във всеки сайт.
Въз основа на няколко изследвания – анализа, публикуван на сайта Vandelay Design и поста за цветовете в Smash Magazine – ние ще се спрем на цветовете влияещи на емоциите и помагащи за създаването на UX-дизайна.
Важно е да се помни, че различните култури по света имат различни възприятия на цветовете. Ние ще опишем емоционалните асоциации, характерни за западната култура.
Червеното
Емоции и асоциации с: власт, важност, младост.
Най-стимулиращият цвят, който е толкова енергичен, че дори може да повиши кръвното налягане. Червеният цвят представлява страст и сила, той привлича вниманието повече от другите цветове, така че често се използва за важни предупреждения и съобщения.
Например, червеният цвят е много подходящ за сайта No Way NSA, целта на който – да предупреди за предполагаеми заплахи.
Използвайте много червено в горната част на страницата – това е най-доброто решение, тъй като той привлича вниманието върху важната информация в съобщението. В същото време, хората са склонни бързо да напуснат „опасната зона“ в червено и да превъртят надолу. А това от своя страна, позволява да се покаже повече съдържание на потребителя.
Но този цвят може да работи и срещу вас, тъй като той може да доведе до агресия или свръхстимулация. Ако искате да създадете по-спокойна атмосфера, опитайте се да използвате червеното в умерена степен, като изберете по-светлите му нюанси.
Оранжево
Емоции и асоциации с: дружелюбие, енергия, уникалност.
Най-спокойният от топлите тонове, оранжевото може да предизвика цял спектър от разностранни емоции. Като основен цвят той може да провокира интерес и бодрост, а като вторичен – да съхрани тези свойства, но по ненатрапчив начин.
Също така, оранжевото помага да се създаде усещане за движение и енергия. Например, той изглежда страхотно на уебсайта на компанията Fanta, който навежда на мисълта за младост и движение. Цветът се асоциира с творчеството, като същевременно съхранява усещането за познанство на бранда.
Жълто
Емоции и асоциации с: щастие, ентусиазъм, архаичност (по-тъмния тон).
Това е един от най-универсалните цветове, а емоциите, които той предизвиква до голяма степен зависят от отенъка.
Ярко жълтият цвят добавя енергия, но без острота и рязкост, която присъства и в червеното. Средните нюанси на жълтото предизвикват усещането за уют. Тъмните нюанси (включително и златистият) предизвикват чувство за дълбока древност, изпълват пространството с безвремие, мъдрост и любопитство.
Зеленият цвят
Емоции и асоциации с: ръст, стабилност, финансови теми, теми за околната среда.
Зеленият цвят – това е мостът между топлите и студените нюанси, но клони повече към студените. Това означава, че зеленото има по-релаксиращо действие от синия цвят, но също така има и малко енергичност от жълтото.
В резултат на това той създава много балансирана и стабилна атмосфера. По-тъмните нюанси на зеленото създават впечатление за богатство и изобилие, като в дизайна на сайта на Ameritrade.
Синият цвят
Емоции и асоциации с: спокойствие, сигурност, откритост (светлите нюанси), надеждност (по-тъмните нюанси).
Както и в случая с жълтия цвят, въздействието на синьото силно зависи от синия оттенък. Всички нюанси на синьото са универсални по отношение на спокойствието и сигурността, но светлите тонове се асоциират с дружелюбието, а тъмните – с тъгата.
Социалните мрежи като Twitter и Facebook използват по-леките и средни нюанси на синьото, а корпоративните сайтове предпочитат по-тъмните нюанси, предизвикващи усещане за сила и надеждност.
Чудесен пример – това е дизайнерската агенция Van Vliet & Trap. Те използват синия цвят като фон, визуално намеквайки за своите знания и умения във флористиката, а също така създават усещане за надеждност и доверие.
Това има голямо значение, тъй като те работят със събития, за които е много важна визуалната част, като при сватбите например.
Виолетово
Емоции и асоциации с: лукс, романтика (светлите нюанси), мистика и загадъчност (тъмните оттенъци).
И в уеб дизайна, както и в изкуството виолетовият цвят исторически се асоциира с кралското величие и загатва за лукс. Пурпурните нюанси отразяват щедростта и богатството като цяло, което ги прави отличен избор за модните и луксозни продукти (дори и за шоколадът Cadbury, този цвят е избран за бранда).
По-светлите нюанси, като лавандулата (лилаво с добавено розово), предизвикват мисли за романтика, докато тъмните цветове изглеждат по-елегантни и загадъчни.
Черното
Емоции и асоциации с: власт, изисканост, нервност.
И в уеб дизайна най-силният от неутралните цветове – това е черното – появяващо се практически на всеки сайт. Той може да предизвика различни асоциации в зависимост от съпровождащия го цвят или да доминира над тях, ако се използва прекалено.
Силата и неутралността на черното го прави чудесен избор за големи блокове от текст, но като основен цвят той може да предизвика усещане за нервност или дори асоциация със злото.
За повечето сайтове, черното се използва за създаване на чувство на изисканост. От комбинацията на черно и бяло в минималистичен дизайн се създава впечатление за елегантност и стил, както на сайта Dream and Reach на компанията BOSE.
Бялото
Емоции и асоциации с: чистота, простота, добродетел.
В западните култури, бялото се асоциира с чистота, доброта и невинност. Този цвят се използва често за фон на минималистични и прости сайтове.
Освен това, нито един цвят не позволява да се обърне толкова внимание на останалите цветове, като бялото. Така например, на сайта на победителя Awwwards Клойн Тошев всичките му творби са изложени на бял фон, което само подчертава илюстрациите и създава впечатление за елегантна галерия.
Сивият цвят
Емоции и асоциации с: неутралност, формалност, меланхолия.
Въпреки, че в някои ситуации, сивото може да създаде мрачна и меланхолична атмосфера, той все още често се използва от професионалните графични дизайнери в уеб дизайна.
Всичко се крие в нюансите: с редуването им, можете да получите всички емоции, предизвикани, както от черния, така и от белия цвят. Като цяло, сивото – това е мощен инструмент в способните ръце.
А в комбинация с по-ярки цветове в графичния дизайн, сивият фон изглежда съвременен, но не мрачен, като на уеб сайта Awwwards.
Бежово
Емоции и асоциации: предава характера на останалите цветове.
Сам по себе си, бежовият цвят е доста неясен и неизразителен, но има едно забележително свойство: бежовото приема характера на цветовете, които го заобикалят. Ето защо, ако той е предназначен не за изразяване на сдържаност, бежовото служи като фон или втори цвят.
В уеб дизайн средите и в графичният дизайн по-тъмните нюанси на бежовото създават усещане за традиционност и приземност, усещане на хартиена текстура, а по-светлите нюанси изглеждат свежи и съвременни.
Например, на сайта на ресторанта Dishoom, светло-бежовият цвят около имената и по-тъмните краища създават впечатление, че този ресторант – това е свежият изглед към традиционната кухня.
Цветът слонова кост
Емоции и асоциации с: комфорт, елегантност, простота
При изработката на дизайн за уеб сайт цветът слонова кост, както и кремавото пораждат почти същите емоции, като бялото. Въпреки това, цветът слонова кост е по-топъл (или по-малко стерилен) от бялото, което създава по-голямо усещане за комфорт, запазвайки минимализма.
Можете да използвате цветът слонова кост вместо бялото, за да смекчите контраста между него и по-тъмните цветове. Така например, на интернет страницата Art in My Coffee, кафяво-оранжевите елементи са поставени на фона на цвета слонова кост (изглеждащ сивкав), което запазва усещането за топлина.
Цветова гама
Във всеки уеб сайт има цветова гама, в която основния цвят се използва за запълване на по-голямо пространство. Както казахме и по-рано, използването на цветовете въздейства на разума и настроението на човека най-вече подсъзнателно. Така, че избирайте ги внимателно.
Независимо от това, че има много начини да се съчетават цветовете, ние ще се съсредоточим върху трите най-успешни и често използвани.
Триада (тройна хармония, триъгълник)
Триада – основната и най-балансирана система от три цвята. В нея се използва резонанс и допълнение на цветовете, но няма сложен контраст, поради което триадата е най-надеждната гама.
На цветовия кръг от 12 цвята изберете само трите, разположени на 120 градуса един от друг: единият е цвета за основния фон и два за съдържанието и навигационната лента.
Двойна допълнителна система
Тази гама е по-трудна за изпълнение, но тя може да се окаже по-изгодното решение. Използвайте четири цвята: два контрастни и два допълнителни.
Вижте как добре изглежда страницата на Florida Flourish, базирана на тази схема. Червените и зелени цветове контрастират в растенията и блоковете от текст, а синия фон с оранжевото и пустинята ефективно допълват картината.
Аналози (последователна система)
Гамата аналогични цветове се използва предимно за допълващи се един друг нюанси. Това позволява особено ярко да се подчертаят някои качества и да се предизвикат определени емоции.
Така например, комбинацията от червени, оранжеви и жълти цветове подчертават енергичността и жизнената сила. Използването на тези гами е много просто, но е трудно да се избере кой конкретен цвят ще бъде подходящ за съчетание.
Например, използването на син, тюркоазен и зелен цвят в дизайна на сайта Blinksale създава атмосфера на спокойствие и умиротвореност. Забележете как е използван жълтият цвят, за да се подчертаят важните моменти.
Това е само в основите на теорията на цветовете, които могат да ви помогнат да създадете впечатляващ потребителски графичен дизайн, и няма ограничение колко далеч може да отидете по отношение на цвета на своята интернет страница.
Инструменти-помощници за избор на цвета
За щастие, има няколко инструмента, които могат да Ви помогнат да въплатите теорията за цветовете в практиката. Изпробвайте тези палитри, за да не започвате от нулата и да създавате свои:
1. Adobe Color CC, по-известен като Adobe Kuler. Това е едно от най-надеждните средства в избора на цветове.
2. Paletton. Ако имате нужда от прост инструмент за бърз избор на цвят, Paletton е отличен за целта.
3. Flat UI Color Picker. Прекрасен инструмент, за избор на цвят за потребителски интерфейс.
А ако тези инструменти не са подходящи за вас, тук има още 28 сайта с палитри и инструменти за избор на цвят.
Пряката зависимост между цветовете и емоциите
Помнете: хората рядко забелязват и оценяват цвета на фона, навигационната лента и отделните части, но това не означава, че цветът не въздейства върху тях. Това просто се случва подсъзнателно.
В потребителя възникват определени емоции, поражда се отношение към сайта или бранда или той извършва определени действия: скролира надолу, натиска върху бутони, подбуждащи действия или напротив, не ги забелязва. А цветът във всичко това играе огромна роля.