Мистецтво поєднання кольорів

Share Button

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

Ми “позичили” її собі. Спочатку у планах було повністю перекласти інфографіку прямо на малюнках, але все ж нам здається, що таке втручання у загальну композицію було б не зовсім вдалим, враховуючи прекрасну роботу авторів зі шрифтами і брак кириличних відповідників )))

Отже, перед вами інфографіка на тему

“Мистецтво поєднання кольорів у веб-дизайні”:

1. Колір впливає на нас незліченною кількістю шляхів – ментально та фізично, на свідомому та підсвідомому рівнях.

Психологи припускають, що враження від кольору може збільшити на 60% сприйняття чи відторгнення продукту або ж сервісу. У веб-дизайні ніколи не можна нехтувати хорошим вибором кольорів. Погана кольорова комбінація може справити той само ефект, що й неякісна підробка чи повільне завантаження сторінки. У цій інфографіці ми стисло обговоримо проблему поєднання кольорів і поговоримо про те, як ці знання можна буде використати під час розробки вашого сайту. Особлива подяка @speckyboy, @smashingmag та @onextrapixel.

Кольорове коло:

це простий інструмент, який використовується для пошуку гармонійного поєднання кольорів, особливо у веб-дизайні. Перша кругова діаграма кольорів була створена сером Ісааком Ньютоном у 1666-му. (Прикладом 12-секторного RYB “субстрактивного” кольорового кола є коло в нижньому лівому кутку слайду).

слайд1

2. Теплі та холодні кольори:

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

“Теплі” кольори: використовуйте теплі кольори у своєму дизайні для відображення пристрасті, радості, ентузіазму та енергії.

“Холодні” кольори: використовуйте їх у вашому дизайні, щоб надати відчуття спокою чи професіоналізму.

слайд2

3. Первинні, вторинні та третинні кольори:

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

  • Первинні кольори, згідно теорії, не можуть бути утворені змішуванням жодних інших кольорів.
  • Вторинні є комбінаціями двох первинних кольорів.
  • Третинні кольори є комбінаціями одного первинного та одного вторинного кольорів.

слайд3

4. Схеми гармонійного поєднання кольорів:

Певні кольори при комбінації виглядають дуже приємно, проте від погляду на інші аж шкребе та болить. Чому так відбувається? Це значно об’єктивніше, ніж вам здається: такі комбінації базуються на кольоровому колі. Гармонійні поєднання кольорів (або ж комбінації кольорів) складаються з двох або більше кольорів із чіткими зв’язками у колі. Ми включили сюди 6 найбільш поширених кольорових схем, в основі яких лежить 12-секторне RYB кольорове коло.

Доповнюючі кольори: це такі кольори, які знаходяться в протилежних позиціях на кольоровому колі. Згідно могутнього контрасту доповнюючих кольорів, веб-дизайнери можуть обрати один колір у якості домінантного (зазвичай у якості фону), а інший для підкреслення найважливіших елементів сторінки (контенту).

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

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

Спліт-компліментарна кольорова схема: це варіація схеми доповнюючих кольорів. На додаток до основного кольору використовуються два кольори, суміжні із його доповнюючим. Це висококонтрастна схема, проте не настільки екстремальна, як схема доповнюючих кольорів. А це сприяє кращому поєднанню.

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

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

слайд4

5. Гармонія між макетом сторінки та фотографіями:

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

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

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

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

слайд5

6. У якості висновку:

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

Є кілька інструментів, які можуть вам допомогти вибрати кольорову схему, як наприклад colorschemedesigner.com та kuler.adobe.com.

слайд6

Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

19 − 9 =