Блоги · 2 серпня 2022, 12:00 7735

Колір — це найшвидший спосіб створити хороше перше враження про продукт

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

Привіт! Я Ігор Кутенков, UX/UI дизайнер в компанії Triare. Сьогодні поговоримо про колір. В інтернеті можна знайти багато матеріалів на цю тему, але ніхто з нас не має часу шукати і читати довгі серії статей. Саме тому я вирішив створити невеликий посібник із застосування кольору у вебдизайні. Стаття пропонує прості рецепти та орієнтована, в першу чергу, на новачків. У ній ми розглянемо:

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

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

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

Анатомія кольорів

Розуміння основ теорії кольору — гарний початок. Вона може бути трохи лячною та занадто технічною, але ми тут, щоб допомогти вам зрозуміти основи колірних відносин. Щоб стати великим у чомусь, спочатку потрібно знати правила, тому тут представлений їх базовий огляд.

Колірні моделі

Ми описуємо кольори за допомогою колірних моделей. Існують мільйони кольорів, й запам’ятати всі назви неможливо, тому були придумані колірні моделі або стандарти, які допомагають нам їх описувати.

Існує багато колірних моделей — RGB, CMYK, Lab, HSB, HSL, Grayscale та ін. В межах цієї статті ми розглядаємо лише RGB.

У цій моделі колір кодується градаціями складових каналів (Red, Green, Blue). Тому при збільшенні величини градації певного каналу зростає його інтенсивність під час синтезу.

Кількість градацій кожного каналу залежить від розрядності бітового значення RGB. Зазвичай використовують 24-бітну модель, в якій визначається по 8 біт на кожен канал, і тому кількість градацій дорівнює 256, що дозволяє закодувати 256³ = 16 777 216 кольорів.

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

Особливості моделі:

апаратна близькість з монітором, сканером, проєктором, іншими пристроями;
велика колірна гама, близька до можливостей людського зору;
доступність багатьох функцій обробки зображення (фільтрів) у програмах растрової графіки;

Первинні, вторинні і третинні кольори (Primary, secondary and tertiary)

Наші екрани зазвичай засновані на колірній моделі RGB — також відома, як адитивна система кольору. Як правило, все, що відбиває світло, засноване на адитивній колірній системі. У цій структурі ми використовуємо основні кольори, як відправну точку. Білий колір створюється шляхом з’єднання всіх кольорів, а чорний є відсутністю будь-яких.

Пояснення на прикладі простого кольору: первинні кольори — це жовтий, червоний і синій. Вторинні утворюються при змішуванні первинних кольорів. Третинні кольори утворюються із сумішей, що містять первинні та вторинні кольори.

Психологія кольору

Який би ви не використовували колір, він обов’язково вплине на вашу аудиторію. Колір впливає на людей і викликає певні ідеї/ атрибути. Те, як ми пов’язуємо ідеї з кольором, залежить від нашої культури. Різні культури по-різному інтерпретують колір. Можна знайти матеріали з психології кольору для багатьох країн та регіонів світу. Ось ресурс, що я знайшов.

У цій статті ми розглянемо західну інтерпретацію кольорів:

Червоний: кохання, небезпека, гнів, війна. Темніший червоний може асоціюватись з елегантністю.
Помаранчевий: енергія, життєва сила, осінь.
Жовтий: попередження, щастя, багатство, золотистий відтінок.
Рожевий: жіночність, романтика, чутливість. Може також передавати енергію та інновації.
Фіолетовий: королівська влада, розкіш, творчість, духовність.
Блакитний: сум, спокій, надійність, довіра, корпоративність.
Зелений: природа, вдача, чистота (залежно від відтінку).
Сірий: консервативність, сучасність, розкіш.
Чорний: елегантність, влада, сила.
Білий: чистота, охайність, елегантність.

Як вибрати правильну палітру для вашого проєкту

Розуміння теорії кольорів — це одне. А ось обрати вдалу колірну палітру для себе — зовсім інше. Почніть з того, що ви знаєте.

Брендінг: якщо у вас вже сформований бізнес, почніть з кольорів, які відповідають бренду, а потім вводьте нові відтінки.
Ваша аудиторія: обрані кольори також мають відповідати емоціям, які ваш бренд має намір передати. Знайте свою цільову демографічну групу та вивчіть, на що вона реагує.
Тенденції: розуміння колірних тенденцій дає вам можливість зрозуміти, що чекає на нас у майбутньому. Це допоможе вам створити новий та прогресивний сайт.
Емоційність: також подумайте, який емоційний відгук ви хочете викликати у людей або яку історію хочете розповісти.
Баланс: подумайте про колірні гармонії: зазвичай при виборі палітри кольору ви починаєте з домінуючого кольору. Потім почніть нашарувати палітру. Темні кольори, як правило, видно першими, вони мають більшу візуальну вагу. Далі переходьте до світліших кольорів.

Створення палітри кольорів

Щоб створити палітру кольорів, потрібно взяти основний (primary) колір вашого бренду, на якому буде заснована палітра. Наступний крок — вибрати кілька кольорів, які супроводжуватимуть основний колір, і, таким чином, створити палітру. Для цього існує кілька правил, які ви можете обрати та застосувати. Ці правила побудовані на основі хроматичного кола або колірного колеса — дуже корисного інструменту для створення колірних комбінацій.

Додаткові кольори (Complementary colors)

Це кольори, що розташовані на протилежних сторонах хроматичного кола.

Аналогові кольори (Analogous colors)

Це кольори, які знаходяться поряд один з одним на хроматичному колі.

Тріадні кольори (Triadic colors)

Це кольори, одержані шляхом накладання рівностороннього трикутника на хроматичне коло.

Розділені комплементарні кольори (Split-complementary colors)

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

Квадратні кольори (Square colors)

Це кольори, одержані шляхом накладання квадрата на хроматичне коло.

Застосування кольорів у вебдизайні

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

Скільки кольорів

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

Які кольори мають бути у вашій палітрі

Палітра повинна включати дуже світлий та дуже темний кольори. Ідея полягає в тому, щоб ці два кольори мали великий контраст (інструменти для вимірювання контрасту я залишу наприкінці статті). Наприклад, чорний та білий (так, білий вважається кольором). Чому? Тому, що вам потрібний колір для фону та колір для тексту. Особисто я обираю для цього нейтральні кольори. Вони універсальні, елегантні та можуть доповнити будь-яку колірну палітру.

Готова палітра кольорів

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

Уявімо, що наш основний колір — синій. Ось кілька можливих палітр із синім кольором як основним.

Як можна застосовувати ці кольори

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

Продовжимо експериментувати з нашою вигаданою палітрою. Припустимо, ми вирішили використати додаткову палітру.

Білий: можна використовувати як фоновий колір. Звичайно, ви можете використовувати інші світлі нейтральні кольори (наприклад, сірий) для деяких фонів, або навіть яскравий колір з вашої палітри, але для зручності зчитування контенту краще мати більше білого кольору.
Чорний можна використовувати для тексту. Цитати або виділений текст можна виділити іншим кольором.
Світло-блакитний: виберіть колір, який відрізняється від кольору тексту, але має хороший контраст з кольором фону. В нашому випадку це буде світло-блакитний. Цей колір ідеально підходить для гіперпосилань. У ваших інтересах, щоб посилання були відмінні від тексту і добре читалися.
Синій — це ваш основний колір, тому він задаватиме тон вашому дизайну. Його варто використовувати для деяких фонів, кнопок, і так далі.
Помаранчевий — це ваш акцентний колір. Ви можете використовувати його, щоб додати колірний відтінок у вашому дизайні. Його можна використовувати для іконок та графіків.

Практичне використання кольору

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

Ви можете використовувати червоний/жовтий колір для попередження/повідомлень.
Ви можете показати статус (зелений колір може означати активність, сірий — неактивність тощо).

Це допомагає користувачам зрозуміти та розшифрувати інформацію, яку ви їм показуєте. Однак не варто покладатися лише на колір. Чому? Тому, що вам потрібно враховувати дальтоніків, які становлять 8% населення Землі. Для їхнього комфорту завжди намагайтеся включати чіткі мітки та/або значки для передачі змісту та використовувати колір для підтримки цього сенсу.