Даруємо!!!

Графічний дизайн. Психофізіологія кольору в дизайні


Колір в дизайні – річ суб’єктивна. Що викликає сильні емоції у одних – на інших впливає абсолютно по-іншому. Іноді це відбувається на тлі особистих переваг, іноді – в силу культурних особливостей. Теорія кольору – це наука. Багато фахівців зробили кар’єру, вивчаючи вплив кольору на людей: окремо або в групі. І на те є причина. Іноді варто трохи змінити відтінок або насиченість кольору – і глядачі выдчувають абсолютно інші почуття.

Колір також по-різному працює в контексті різних культур: один і той же колір може в одній країні уособлювати щастя, а в іншій – щось негативне.

Теплі кольори

До складу теплих кольорів входять: червоний, помаранчевий і жовтий – а також різні варіації цих кольорів. Це колір вогню, опалого листя, світанків і заходів – вони заряджають енергією, пристрастю і позитивом.

Червоний і жовтий – це основні кольори, а помаранчевий знаходиться між ними. Це означає, що теплі кольори дійсно теплі, вони створюються без домішок холодних відтінків. Використовуйте теплі кольори, якщо хочете, щоб дизайн відбивав пристрасть, щастя, ентузіазм і енергію.

Червоний (основний колір)

Червоний – дуже гарячий. Він асоціюється з вогнем, насильством і війною. А також з любов’ю і пристрастю. Історично червоний колір уособлював і Диявола, і Купідона. Червоний може навіть впливати на нашу фізіологію: він підвищує тиск і частоту дихання. Крім того, доведено, що червоний прискорює процес метаболізму.

Так, червоний означає гнів, але також і важливість (згадайте червоні килимові доріжки на різних шоу і заходах). Червоний також означає небезпеку (саме тому у нас є червоні попереджувальні знаки і червоний сигнал світлофора).

За межами західного світу у червоного зовсім інші значення. Наприклад, в Китаї червоний уособлює процвітання і щастя. Вважається, що червоний притягує удачу. В інших східних культурах наречену одягають у червоний на весілля. У південній Африці, однак, червоний – це колір скорботи. А ще червоний асоціюється з комунізмом. Червоний став кольором Боротьби зі СНІДом в Африці через популярність кампанії “RED”.

У дизайні червоний може служити потужним акцентом. Якщо використовувати в дизайні занадто багато червоного (особливо в чистому вигляді), може створитися ефект пригнічення. Але якщо вам потрібно відобразити в дизайні силу і пристрасть – червоний незамінний. І ще червоний може бути дуже різним: світлі відтінки виглядають енергійно, а темні – потужно і елегантно.

Приклади:

Темні відтінки червоного надають цьому сайту відчуття сили і елегантності.

Червоні акценти відмінно виділяються на темному тлі і роблять сайт потужним і професійним.

Яскраві червоні акценти надають цьому сайту енергії і руху.

Темно-червоний колір, доповнений елементами гранжу, підсилює асоціацію з кров’ю.

Темно-червоний в поєднанні з білим і сірим надає сайту елегантності і професіоналізму.

Помаранчевий (другорядний колір)

Помаранчевий – дуже яскравий і енергійний колір. Деякі його варіації асоціюються із землею осінню. Помаранчевий асоціюється зі зміною пір року – а значить може уособлювати рух. В англійській мові “orange” також означає “апельсин”, а значить помаранчевий пов’язаний зі здоров’ям і життєвою силою. У дизайні помаранчевий привертає увагу, але не пригнічує як червоний. Його часто вважають більш дружелюбним і гостинним і менш зухвалим.

Приклади:

Яскраво-помаранчевий блок привертає увагу до його вмісту, навіть незважаючи на те, що на сторінці є червоні елементи.

Помаранчевий зображує найочевиднішу асоціацію – вогонь.

Темно-оранжевий на тлі лаймового кольору виглядає практично нейтральним.

Помаранчевий тут справляє враження гостинності і дружелюбності.

Помаранчеві акценти додають візуального інтересу і привертають увагу до основної дії (call to action).

Жовтий (основний колір)

Жовтий часто вважають найяскравішим і енергійнішим з усіх теплих кольорів. Він асоціюється із щастям і сонячним світлом. Іноді жовтий також пов’язаний з обманом і боягузтвом (в англійській мові словом “yellow” іноді характеризують боягузливу людину).

Жовтий також асоціюється з надією: в деяких країнах люди носять жовті стрічки, якщо члени їх сімей на війні. А ще жовтий асоціюється з небезпекою – але не так сильно, як червоний.

У жовтого взагалі багато значень в різних країнах. В Єгипті, наприклад, жовтий означає скорботу, в Японії – хоробрість, а в Індії це колір купців.

Яскраво-жовтий колір може привнести в дизайн відчуття щастя і радості. М’які відтінки жовтого добре підходять для дітей – на відміну від рожевого або блакитного, жовтий колір не прив’язаний до статі дитини. Світло-жовтий дає відчуття спокою і щастя. Темно-жовті і золотисті відтінки асоціюються зі старовиною, тому їх можна використовувати, щоб додати дизайну відчуття сталості і стабільності.

Приклади:

Яскраво-жовтий хідер і графіка роблять сайт енергійним і позитивним.

Світло-жовтий колір хідера виглядає майже нейтральним, а в поєднанні з кумедними малюнками він залишає дуже радісне враження.

Яскраво-жовті акценти привертають увагу до найбільш важливих елементів сайту.

Цей яскраво-жовтий соняшник нагадує відвідувачам сайту про літо, а в сукупності з темно-жовтим фоном “під старовину” – робить сайт дуже домашнім.

Яскраво-жовтий хедер привносить в дизайн додаткову енергію.

Холодні кольори

На відміну від теплих, холодні кольори – зелений, синій і фіолетовий – більш приглушені. Це кольори ночі, води, природи, і зазвичай вони виглядають заспокійливо, розслабляюче і стримано.

Синій – це єдиний основний колір з усіх холодних кольорів спектра, а це означає, що інші холодні кольори виходять при змішуванні синього з теплими кольорами (з жовтим, щоб отримати зелений, і з червоним, щоб отримати фіолетовий). Тому зелений несе в собі деякі характеристики жовтого, а фіолетовий – характеристики червоного. Використання холодних кольорів в дизайні допомагає створити відчуття спокою і професіоналізму.

Зелений (другорядний колір)

Зелений – дуже приземлений колір. Він уособлює нові починання і зростання. Він також позначає оновлення і достаток. З іншого боку, зелений може асоціюватися і з заздрістю, ревнощами або браком досвіду.

Зелений колір несе в собі “заспокійливі” характеристики синього, а також енергію жовтого. У дизайні зелений балансує і гармонізує, створює відчуття стабільності. Зелений буде доречний в дизайнах, пов’язаних з процвітанням, стабільністю, оновленням і природою. Більш яскраві відтінки зеленого виглядають енергійніше, а оливкові відтінки зазвичай асоціюються зі світом природи. Темно-зелений виглядає більш стабільно і презентабельно.

Приклади:

Дуже приглушені відтінки зеленого на цьому сайті створюють відчуття чогось приземленого і природного.

Яскраво-зелений хідер сайту в поєднанні з листочком створюють дуже природне і живе враження.

Зелений оливкового відтінку виглядає природно, що дуже відповідає вмісту сторінки.

Яскраві “ретро” відтінки зеленого створюють дуже свіжий і енергійний вигляд.

Ще один оливковий сайт з духом природи.

Синій (основний колір)

В англійській мові синій (blue) часто асоціюється з сумом. Синій також часто використовується для відображення спокою і відповідальності. Світлі відтінки синього виглядають свіжо і дружелюбно. Темно-синій виглядає сильно і надійно. Синій також асоціюється зі світом, і у нього є якийсь релігійний підтекст у багатьох країнах (наприклад, Діва Марія зазвичай зображується в синьому вбранні).

Значення синього може дуже сильно відрізняється від відтінку до відтінку. Той відтінок, якому ви віддасте перевагу в дизайні, здатний сильно вплинути на призначене для користувача сприйняття. Світло-блакитний розслабляє і заспокоює, насичений синій освіжає і заряджає енергією, темно-сині відтінки прекрасно підходять для корпоративних сайтів або для інших випадків, коли потрібно відобразити в дизайні силу і надійність.

Приклади:

Темно-синій колір створює відчуття надійності, а яскраві і світлі відтінки трохи розбавляють надмірну врівноваженість.

Завдяки темно-синього кольору (особливо в поєднанні з білим фоном) сайт виглядає професійно. Світло-блакитні акценти роблять його більш цікавим.

Яскравий, небесно-блакитний колір робить сайт молодіжним і сучасним. Це відчуття тільки посилюється за рахунок червоно-рожевих акцентів.

На цьому сайті присутній цілий набір відтінків синього, що створює відчуття свіжості.

Світлий, приглушений блакитний надає сайту відчуття розслабленості і спокою.

Фіолетовий (другорядний колір)

Фіолетовий довгий час асоціювався з королями і королевами. Фіолетовий – це суміш червоного і синього, і він несе в собі характеристики обох кольорів. Він також асоціюється з творчістю і фантазією.

У Таїланді фіолетовий – це колір скорботи, його носять вдови. Темно-фіолетовий зазвичай асоціюється з багатством і знаттю, а світлі відтінки фіолетового (такі, як лавандовий) вважаються більш романтичними.

У дизайні темно-фіолетові кольори створюють відчуття багатства і розкоші. Світло-фіолетовий виглядає більш м’яко і асоціюється з весною і романтикою.

Приклади:

Темний відтінок, який тут використовується, робить упор на історичне “королівське” значення фіолетового. Такий ефект дуже підходить Asprey – виробнику люксових речей.

Світлі і темні відтінки фіолетового в парі створюють відчуття творчості.

Яскравий, з червонуватим відтінком фіолетовий робить сайт багатим і енергійним.

Темно-фіолетовий фон надає сайту настрій творчості.

Темно-фіолетові акценти створюють відчуття ексклюзивності і витонченості.

Нейтральні кольори

Нейтральні кольори зазвичай служать в дизайні фоном. Як правило, їх поєднують з яскравими колірними акцентами. Але вони можуть грати в дизайні і самостійну роль, можуть створювати дуже витончені лейаути. Значення і настрої нейтральних кольорів здебільшого залежать від оточуючих кольорів: теплі або холодні.

Чорний

– найсильніший з усіх нейтральних кольорів. Його перевага в тому, що він зазвичай асоціюється з силою, елегантністю і формальністю. Мінус – в тому, що він ще й пов’язаний зі злом, смертю і таємницями. У Західних країнах чорний – це колір скорботи. У деяких культурах він також асоціюється з бунтами, окультизмом і святом Halloween.

Чорний зазвичай використовується в оригінальних і елегантних дизайнах. Він може бути і консервативним, і сучасним, і традиційним, і нетривіальним – все залежить від кольорів, з якими ви його комбінуєте. У дизайні чорний зазвичай використовується для типографіки та інших функціональних елементів – оскільки він нейтральний. Чорний допоможе вам створити відчуття витонченості і загадковості в дизайні.

Приклади:

Чорні акценти, в поєднанні з яскравими кольорами і темно-коричневим фоном, роблять дизайн дуже оригінальним.

У поєднанні з крижаним блакитним кольором, чорний виглядає холодніше.

Дизайн виглядає оригінально завдяки чорному кольору в поєднанні з темно-сірим і лаймовим зеленим.

Чорні акценти тут привносять витонченість і сучасність.

Сильні чорні акценти роблять дизайн сайту витонченим.

Білий

Білий і чорний знаходяться на протилежних кінцях спектру, але так само як і чорний, білий добре працює в поєднанні з майже будь-яким кольором. Білий асоціюється з чистотою, невинністю і чеснотою. На Заході в білий вдягають наречену в день весілля. Цей колір також пов’язаний з охороною здоров’я, особливо з докторами, медсестрами і стоматологами. Білий – це колір доброти, ангели зазвичай зображуються в білому.

У дизайні білий колір зазвичай задає нейтральний фон, щоб інші кольори яскравішими заграли. Білий також несе в дизайн чистоту і простоту, і він дуже популярний в мінімалістичних дизайнах. У дизайні білий також може уособлювати зиму чи літо, в залежності від додаткових мотивів і оточуючих кольорів.

Приклади:

Білий на цьому сайті вигідно контрастує з яскраво-блакитним.

Білі фони дуже популярні в мінімалістичних дизайнах: білий фон відмінно контрастує з чорною типографікою.

У цьому прикладі білий використовується як акцентний колір і робить сайт більш легким.

Білий в поєднанні з сірим додає дизайну м’якості і чистоти.

Знову ж таки, завдяки білому тлу весь дизайн грає яскравіше.

Сірий

Сірий – це нейтральний колір. Вважається, що він розташований на холодному кінці колірного спектра. Іноді сірий вважають похмурим і депресивним. У деяких дизайнах світло-сірий колір можна використовувати замість білого, а темно-сірий – замість чорного.

Сірий зазвичай вважається консервативним і формальним, але він може виглядати і сучасно. Іноді сірий називають кольором скорботи. Зазвичай сірий використовують в корпоративних дизайнах, де ключову роль грають формальність і професіоналізм. Сірий може бути дуже витонченим. Чисті сірі кольори – це завжди відтінки чорного, але бувають також сірі кольори з домішками блакитного або коричневого. У дизайні сірий дуже часто використовується як для фону, так і для типографіки.

Приклади:

Світло-сірий колір робить цей дизайн дуже приглушеним і спокійним.

Типографіка робить цей сайт сучасним, а світло-сірий фон підсилює цей ефект.

Холодний сірий колір робить цей сайт витонченим і сучасним.

Цей дизайн виглядає дуже сучасно завдяки темно-сірому фону і світло-сірій типографіці.

Завдяки кільком відтінкам сірого, цей сайт виглядає одночасно професійно і витончено.

Коричневий

Коричневий асоціюється із землею, деревом і каменем. Це абсолютно нейтральний колір – і він теплий. Коричневий може означати надійність, сталість і приземленість. Іноді його вважають нудним.

У дизайні коричневий зазвичай використовується як фоновий колір. Іноді його можна зустріти в деревних або кам’янистих структурах. Коричневий несе відчуття тепла і цілісності. Іноді темні відтінки коричневого замінюють чорний: як в фонах, так і в типографіці.

Приклади:

Сіро-коричневий фон надає сайту надійності і відповідальності.

Завдяки оранжево-коричневого кольору, створюється відчуття приземленості і надійності.

Завдяки темно-коричневому фону, сайт виглядає грунтовно і приземлено, а яскраві кольори стають ще помітнішими.

Коричневий часто використовується в деревних структурах, а на цьому мінімалістичному сайті теплий коричневий колір створює відчуття доброзичливості.

Сіро-коричневий фон привносить в дизайн стабільність і приземленість.

Бежевий і жовто-коричневий

Бежевий – це в якійсь мірі унікальний колір, оскільки він може бути і теплим, і холодним в залежності від оточуючих його кольорів. У бежевому є теплота коричневого кольору і прохолода білого. Як і коричневий, він іноді вважається нудним. У більшості випадків цей колір виглядає консервативно і зазвичай використовується в якості фону. Бежевий також може символізувати релігійність.

У дизайні бежевий зазвичай служить фоном – особливо якщо фон має паперову текстуру. Він переймає характеристики оточуючих його кольорів, а сам по собі не робить великого впливу на сприйняття користувача.

Приклади:

Світло-бежевий фон створює відчуття молодості і свіжості, завдяки оточуючим його яскравим кольорам.

Дизайн виглядає консервативно і елегантно завдяки світло-бежевому фону.

Помаранчеві і коричневі акценти сайту роблять це жовтувато-коричневе тло теплішим.

Жовто-коричневий часто використовується для створення текстури паперового пакета, а якщо зробити його більш сірим – можна зобразити бетонну стіну.

Бежевий фон хідера в поєднанні з іншими акцентами роблять цей дизайн традиційним і вишуканим.

Кремовий і колір слонової кістки

Кремовий колір і колір слонової кістки – досить витончені кольори: в них є трохи теплоти коричневого і багато прохолоди білого. Ці кольори зазвичай приглушені, навівають думки про минуле. Колір слонової кістки – дуже спокійний; він тепліше білого, але також несе відчуття чистоти.

У дизайні колір слонової кістки надає сайту елегантності і спокою. У поєднанні з іншими землистими квітами – наприклад, персиковим або коричневим – він також може виглядати землистим. З його допомогою також можна освітлити темні кольори – при цьому контраст буде не таким сильним, як якщо б ми використовували білий.

Приклади:

Фон кольору слонової кістки створює теплоту, яка врівноважується безліччю холодних елементів на сторінці.

Натуральні коричневі кольори елементів сторінки роблять сіро-кремовий фон тепліше.

Якби не кремовий фон, цього сайту не вистачило б елегантності.

Кремовий фон посилює тему старовини, яка створюється за рахунок елементів графіки.

Завдяки фону кольору слонової кістки і іншим світлим кольорам, сайт виглядає дуже елегантно.

Коротенько

Обсяг інформації в цій статті може здатися вам занадто великим, але суть теорії кольору саме у відчуттях, які створюють різні відтінки. Ось короткий посібник з основних значень вищевказаних кольорів:

  • Червоний: пристрасть, любов, гнів
  • Помаранчевий: енергія, щастя, життєва сила
  • Жовтий: щастя, надія, обман
  • Зелений: нові починання, достаток, природа
  • Синій: спокій, відповідальність, смуток
  • Фіолетовий: креативність, роялті, багатство
  • Чорний: таємничість, елегантність, злість
  • Сірий: похмурість, консерватизм, офіційність
  • Білий: невинність, чистота, чеснота
  • Коричневий: природа, цілісність, надійність
  • Бежевий: консерватизм, благочестя, нудьга
  • Крем: спокій, елегантність, чистота