Цветовете разказват историята на вашия продукт. Те инфомрират съзнанието на потребителите – емоционално – за онова, което се случва, какво решение да вземат. Накратко, цветовете могат да ни влияят, както ни е добре известно.
Освен, че пробуждат емоции, цветовете привличат погледа и комуникират, изпращат съобщения.
Цвета на бутоните например се отразява на това как потребителите взаимодействат с тях. Цветовете на бранда, естествено, също променят отношението на потребителите.
Контрастът между дълбочина и наститеност на цветовете влияе на това как да даден елемент бива изкомуникиран.
Основи на цветовната теория
В основите на цветната теория са следните три фактора:
- Нюанс – нюансите са различните отенъци на един и същи цвят
- Сатурация (наситеност) – реферира към интензитета на цвета; дали е по-пъстър или по-фин
- Стойност – дали цвета е светъл или тъмен
Не само цвета променя настроението на хората, сатурацията и стойността им също го правят. Не прекалявайте с използването им. Ползвайте ги внимателно с цел да насочвате възприемащия, да разкажете история, да промените настроението или за да привлечете внимание към някой конкретен елемент от дизайна ви.
Температура
Според температурите си, цветовете биват топли и студени:
- Топли цветове – топлите цветове символизират страст, щастие, ентусиазъм. Топли цветове са червено, оранжево и жълто.
- Студени цветове – студените цветове символизират спокойствие, стабилност, професионализъм. Студени цветове са – пурпурно, синьо, зелено.
Цветови модели
Според цветовите модели, делим цветовете по два основни начина:
- RGB – идва от Red, Green, Blue и е оптимизиран за дисплеи, изпозлва се в уеб.
- CMYK – идва от Cyan, Magenta, Yellow, Black – изпозлва се в печат.
В интернет ползваме RGB за основен цветови модел, но той може да се предаде на браузъра (това, което реално чете цветовете на вашия сайт), по два начина. Единият е с rgb стойност. В CSS се изписва rgb(xxx,xxx,xxx), където например rgb(255, 255, 255) e бяло. RGB изписването позволява за добавянето на т.нар. алфа канал, с който да контролирате прозрачността на цвета. Това се прави като напишете например rgba(255, 255, 255, 0.5), което ще покаже бял цвят с плътност свалена на 50%. Ценен инструмент, ако поставяте текст, върху изображение, можете да поставите цветен слой, който да направите полупрозрачен и така да се виждат и изображението и думите.
Другият вариант за изписване е изпозлването на т.нар. Hex code. Той съдържа в себе си RGB и се изписва по следният начин:
#000000 – черно
Hex може да бъде “преведен в RGB” по следния начин:
#RRGGBB
Където:
- #ff0000 е червено
- #00ff00 – зелено
- #0000ff – синьо
- #ffffff – бяло (255, 255, 255)
- #000000 – черно (0,0,0)
В hex кода, 0 е най-ниският индекс, а f – най-високият.
Психология на цветовете
Като абослютно всичко друго около нас, цветовете също изпращат определен вид съобщения, но, като всеки друг знак, тяхното значение зависи основно от контекста. Да бялото, винаги е символ на доброто, на свободата, на живота, но поствено в контекста на азиатските народи, би могло да символизира и смъртта и тъгата. В този смисъл, не съществува абослютно непроменливо значение на цветовете.
Това обаче не бива да ни спира да изпозлваме т.нар. психология на цветовете и да знаем, че червеното обикновено се свързва с нещо негативно, докато съобщение на зелен фон почти винаги значи, че целта е постигната, изпраща ни положителна обратна връзка – “вашето съобщение пристинга”.
Както споменахме малко по-нагоре, цветовете биха могли да значат различни неща, в различни култури и различен контекст, следователно е добра идея да проучите културите, към които сте се насочили, за да не направите грешка в използваните от вас цветове.
Недейте просто да слагате цветове, където сметнете, че е нужно, тъй като те винаги комуникират нещо на потребителя.
- Ярки цветове – обикновено придават леко, забавно и модерено усещане
- Ненаситени, приглушени (desaturated) цветове – приемат се по-сериозно, по-силно насочени към бизнес, по-формални
- Понякога това, което цветовете комуникират зависи от контекста
Ценностите на бранда
Използваните от вас цветове трябва да бъдат така подбрани, че да допълват и демонстрират ценностите на вашия бранд.
Първичният, вторичният и третичният(ако го има) цвят на бранда ви следва да бъдат подредени в йерархия на действията. Както вече споменахме, избраната от вас цветова гама, ще придаде на бранда ви определен стил: трационен, модерен, по-разпуснат или по-стегнат.
Състояния в UI
Не забравяйте, че цветовете служат и за демонстрация на състоянията на различните елементи, например на превключвателите. Също така, чрез цветовете можете да покажете на потребителите дали съобщението, което виждат е съобщение за успешна интеракция, за грешка или за нещо, на което трябва да се обърне внимание.
Недейте, обаче, да разчитате само на цветовете за това. Напишете хубаво информацията, чрез която да обясните какво се случва.
Контраст
За да видите дали елементите на сайта ви са достатъчно контрастиращи, за да се възприемат лесно, то следва да видите как изглежда вашият проект в скалата на сивото. Ако дори в сиво всички елементи са видими и разграничими, то контрастът на сайта ви е на много добро ниво.
Комбинации
Съществува безкрайно количесто инструменти, чрез които да намерите най-добрата комбинация от цветове за вас и вашият бранд. Сред най-добрите е “цветното колело” на adobe.
Цветовите комбинации биват:
- Монохроматични – цветова палитра, създадена от един основен цвят и производни нему. Например, няколко нюанса на синьото.
- Аналогови – използващи цветове, които са едни до други на цветното колело.
- Допълващи се – цветове, които стоят точно един срещу друг на цветното колело
- Раздвоени допълващи се цветове – това е цветова палитра, която се изгражда на основата на един цвят, и двата, които се намират до неговия допълващ (срещуположен на цветното колело.
- Триадична цветова схема – използват се три цвята, които са на едно и също разстояние едни от други.
- Четвъртична цветова схема – създавате квадрат върху цветното колело. Използвайте един от четирите цвята за основен (доминантен).
