Завдання вибору колірної схеми для сайту може здатися нездійсненним, особливо, якщо ви не знаєтеся і не дуже добре орієнтуєтеся в колірних поєднаннях:
Якщо все піде добре, ваш сайт виглядатиме гармонійно. Якщо ні, ви отримаєте картину у стилі фільму жахів!
Якщо ви взагалі відмовитеся від використання кольору на вашому сайті, він буде виглядати непоказно і швидко забудеться. Якщо ви переборщите з кольором, сайт здаватиметься несмачним.
Потрібно правильно підібрати шаблон та колірну палітру майбутнього сайту. Два ці завдання можуть виявитися чи не найскладнішими під час створення сайту.
Знання лише кількох правил дозволить зробити вибір колірних рішень не таким тяжким.
Прочитавши цю статтю, ви дізнаєтесь, як:
- Вибрати найбільш підходящий колір для сайту та особистого бренду;
- Як поєднувати тони для досягнення гармонійної кольорової гами;
- Вибрати найбільш зручний фоновий колір;
- Використовувати колірні акценти лише там, де потрібно.
Яким чином колір впливає на сприйняття вашого сайту та бренду?
Якщо я попрошу вас подумати про Кока-Коля, що першим прийде вам на думку? Швидше за все, у вашій уяві випливе червоний логотип Кока-Коли:
Досить складно думати про цей напій і не асоціювати його з червоним кольором. Червоний настільки міцно пов'язаний із брендом, що так само важливий, як і сам знаменитий напій.
Червоний у колірній схемі несе у собі два важливі послання:
- Яскраво-червоні етикетки сильно виділяються на тлі решти на прилавках із газуванням.
- Кожен колір викликає певні емоції. Коли ми бачимо червоний, у нас на підсвідомому рівні виникає почуття збудження, кохання та пристрасті. Саме ці почуття Кока-Кола хоче викликати своїми напоями:
85% покупців визнають, що основною причиною купівлі товару став його колір.
Відомість бренду збільшується на 80% при використанні кольору.
3 кроки до правильного використання кольору на вашому сайті
Під час розробки дизайну сайту потрібно:
- Вибрати переважний колір для вашого бренду;
- Вибрати кілька акцентних відтінків до створення колірної схеми;
- Вибір фону для створення закінченого дизайну.
1. Вибір переважаючого кольору
Переважаючий колір вашого бренду червоний, як Кока-кола? Він допоможе викликати у відвідувачів ресурсу потрібні емоції, провокує у людей почуття збудження, кохання та пристрасті.
Цей колір – перше, що має приходити людям на думку, коли вони думають про вашу компанію. Якщо у вас є логотип, переконайтеся, що він містить основний колір вашого бренду.
Як вибрати правильний колір
Великі компанії невипадково вибирають ту чи іншу колірну схему для сайту. Це усвідомлений вибір, що є частиною брендингу та маркетингу.
Кожен колір приваблює свою групу покупців, і навіть може вплинути на їхній вибір:
Червоно-оранжевий, чорний та яскраво-синій залучають імпульсивних покупців. Такі колірні рішення найчастіше можна зустріти в мережах швидкого харчування, магазинах одягу та на дешевих розпродажах.
Темно-синій та бірюзовий залучають покупців з обмеженою сумою грошей. Ці кольори можна зустріти у банках та великих універмагах.
Малиновий, блакитний та рожевий приваблюють класичних покупців. Поширені у магазинах одягу.
Щоб залучити потрібних покупців, використовуйте комбінації різних кольорів.
Ми спеціально створили наочну інфографіку підбору колірних схем, щоб вам було простіше вибрати переважний колір для вашого бренду:
Який колір використовувати для вашого сайту?
Зелений уособлює багатство, здоров'я, спокій та природу. Цей колір найлегше сприймається очима і, як наслідок, розслаблює. Зелений колір стоїть на другому місці серед найулюбленіших і для чоловіків, і для жінок.
Жовтий – символ молодості, оптимізму та життєрадісності. Часто використовується для того, щоб привернути увагу. Також жовтий може спричинити напругу, так що використовуйте її в невеликих кількостях.
Помаранчевий асоціюється з дружелюбністю, захопленням та творчістю. Стимулює у людях активність. Наприклад, спонукає купити продукт або передплатити розсилку. Цей колір приваблює імпульсних покупців.
Червоний символізує пристрасть, хвилювання, енергію та небезпеку. Часто використовується, щоб створити у сприйнятті людей термінову необхідність покупки. Викликає сильні емоційні реакції. У ресторанах використовується для підвищення апетиту.
Рожевий – жіночний, солодкий, безневинний та романтичний. Часто використовується у пропозиції приватних послуг та товарів для дівчаток та жінок.
Фіолетовий – символ величі, багатства, успіху та мудрості. Часто присутній у косметиці. Впливає на людей заспокійливо.
Синій – показник надійності, безпеки, стабільності, умиротворення та спокою. Часто застосовується банками та великими компаніями. Синій колір найбільш приємний як чоловікам, так і жінкам.
Сірий у колірній схемі уособлює нейтральність, простоту, спокій та логічність. Він асоціюється з технологіями, виробництвом, акуратністю, контролем, компетентністю та навіть досвідченістю.
Чорний – колір впливу, розкоші, досвідченості та елегантності. Часто використовується для просування товарів класу люкс та асоціюється з професіоналізмом, силою та акуратністю.
Ваша цільова аудиторія – молоді та енергійні покупці? Чи досвідченіші люди із солідним заробітком? Ваш продукт (сервіс) націлений переважно на чоловіків чи жінок? Чи підходить він лише для певної вікової групи?
Не кожен колір підходить для представлення вашого бізнесу. Наприклад, якщо ви продаєте килимки для йоги, фіолетовий ( багатство та велич) і чорний (сила та розкіш) – не найкращі варіанти. Вам підійде зелений ( здоров'я, умиротворення), сірий ( простота, спокій), синій ( спокій, спокій), або може бути навіть червоний ( пристрасть, енергія).
Різниця у кольоровому сприйнятті чоловіків та жінок
На кого переважно розрахований ваш сайт, на чоловіків чи жінок? А може, і на тих, і на інших?
Яскраві та приглушені колірні схеми для сайту
Чоловіки віддають перевагу яскравим кольорам, а жінки приглушені.
Експеримент показав, що загалом чоловіки та жінки однаково реагують на світлі та темні відтінки. Але з'ясувалося, що жінки більше тяжіють до приглушених відтінків, а чоловіки до яскравих.
Ахроматичні кольори
Як правило, чоловікам більше ніж жінкам подобається ахроматичні кольори. Ахроматичні кольори – це білий, чорний та всі відтінки сірого.
Світлі та темні відтінки
Жінкам більше подобаються світлі відтінки. Причиною цього є їхнє посилене сприйняття певних кольорів.
Жінки
Синій, фіолетовий, зелений.
Помаранчевий, коричневий, сірий.
Чоловіки
Найбільш переважні кольори:синій, зелений, чорний.
Найменш кращі кольори:коричневий, оранжевий, фіолетовий.
Комбінуючи і використовуючи кольори, які більше подобаються чоловікам, жінкам або тим, і іншим, можна впливати на їх підсвідоме сприйняття бренду.
Згідно з результатами досліджень колірних схем, і чоловікам, і жінкам, подобаються зелений та синій. І тим, і іншим, не до душі помаранчевий та коричневий. Якщо ви хочете привернути увагу і чоловіків, і жінок, потрібно використовувати як головний колір синій або зелений.
Вибір кольору вашого бренду або продукту може залежати від того, яке враження на інших хочуть справити ваші клієнти.
Часто люди купують певні товари чи послуги, щоб справити конкретне враження інших.
Багато рішень є відображенням того, що людина думає про себе і як хоче виглядати в очах інших. Це те, що буде приходити на думку іншим людям при думках про цю людину:
Так що якщо ви хочете, щоб ваш продукт купували люди, які люблять природу – використовуйте зелений у колірній схемі HTML. Бажаєте залучити людей, які почуваються молодими та впевненими у собі? Використовуйте жовтий. Якщо вас цікавлять люди, яким хочеться виглядати солідно та багато, використовуйте чорний.
Тепер зрозуміло?
Подумайте про ідеального представника цільової аудиторії. Яким він хоче здаватися іншим?
Так, це стосується психології. Але вам необхідно в цьому розумітися, щоб створити успішний бренд.
Як використовувати головний колір на вашому сайті
Тепер, коли ви визначилися із головним кольором свого сайту, вам потрібно зрозуміти, як правильно його використовувати. Колір привертає багато уваги, тому не потрібно намагатися використовувати його скрізь, де тільки можна.
Використовуйте переважаючий колір тільки в тих місцях, на які хочете звернути увагу користувачів, або спонукати їх до певної дії.
Наприклад, зателефонувати за телефонним номером, заповнити форму, передплатити оновлення тощо.
Переважаючий колір повинен впадати у вічі, виділяючи ті деталі, на які ви хочете звернути увагу користувачів:
Де використовувати переважний колір на сайті?
- Логотип;
- Вкладки меню;
- Кнопка "Зателефонувати";
- Важлива інформація;
- Заголовки та назви;
- Кнопки.
2. Вибір акцентних кольорів
Щоб ваш дизайн був цікавішим та професійнішим, потрібно використовувати акцентні готові колірні схеми для сайту. Ними можна виділяти варті уваги частини вашого сайту: цитати, кнопки чи підзаголовки.
Багато хто боїться використовувати відразу кілька кольорів, тому що не завжди інтуїтивно зрозуміло, чи добре вони поєднуються. Люди думають, що для того, щоб навчитися їх поєднувати, треба не лише досконально вивчити теорію кольору, а й наробити багато помилок.
Існує легший шлях, доступний кожному. Це програма з підбору кольорів, яка допоможе підібрати колірні схеми так само, як це роблять професіонали!
Як використовувати програму для підбору акцентних кольорів
Як тільки ви визначилися з переважним кольором, немає нічого простішого, ніж підібрати акцентні кольори за допомогою таких програм, як Adobe Color CC Tool:
Ось коротка інструкція, яка покаже вам, як створити колірну схему одним із двох способів:
- На основі переважаючого кольору
Крок 1. Для початку дізнайтесь код вашого переважаючого кольору. Наприклад, на сайті ColorPicker.com. Код кольору вказаний у прямокутнику над квадратом з палітрою кольорів.
Скопіювавши код із ColorPicker.com, вставте його в поле « НІХ» інструменту Adobe Color. Переконайтеся, що ви вставили код у колонку посередині:
Вставте код переважаючого кольору вашого сайту в прямокутник ПОСЕРЕДИНІ.
Як тільки ви поставите колір, Adobe Color відобразить його на екрані разом з іншими комплементарними кольорами.
Крок 2 У лівому верхньому боці ви побачите прямокутник з такими колірними схемами:
- Послідовна;
- Монохромна;
- Трикутна;
- Комплементарний;
- Складова;
- Відтінки.
Поекспериментуйте з різними колірними схемами, щоб зрозуміти, яка з них підходить саме вам. Всі кольори, запропоновані програмою, добре поєднуються один з одним.
Крок 3 Зробіть колірну схему ще продуманіше, переміщаючи один із покажчиків кольору.
Важливо не переміщати короткий покажчик, розташований посередині, щоб ваш переважаючий колір залишався постійним:
CMS та конструктори сайтів дозволяють вставити колірні коди ( HEX) для виділення будь-якої частини вашого сайту:
Скопіюйте колірні коди ( HEX) для вашої колірної схеми для сайту.
- На основі фотографії, що сподобалася
Часом простіше шукати колірні рішення на просторах інтернету та надихатися ними.
Ви можете завантажити будь-яку вподобану фотографію в Adobe Color і програма автоматично згенерує колірну схему, створену на її основі.
Крок 1. Завантажте фотографію:
Натисніть значок камери, щоб завантажити зображення.
Крок 2. Виберіть один із п'яти колірних настроїв:
- Барвистий;
- Яскраве;
- Приглушене;
- Насичене;
- Темний.
Поекспериментуйте з кольоровими настроями, щоб зрозуміти, яке вам ближче:
Виберіть колірний настрій.
Крок 3. Зробіть колірну схему ще продуманіше, переміщуючи один із покажчиків кольору за зображенням:
Переміщуйте вказівники, якщо хочете вибрати інші комплементарні кольори.
Крок 4. Запропонована палітра кольорів розташована під зображенням. Ось як можна підібрати колірну схему для вашого веб-дизайну.
Щоб побачити коди ( HEX) квітів, натисніть на кольорове коліщатко, розташоване у правому верхньому кутку:
Натисніть на кольорове колесо, щоб побачити коди кольорів:
Скопіюйте колірні коди ( HEX) для вашої колірної схеми.
Де розміщувати допоміжні кольори
Деталі сайту, виділені допоміжними кольорами, не є основними акцентами. Але вони однаково виділяються. Наприклад, допоміжними кольорами можна виділяти підзаголовки, додаткові кнопки, діалогові вікна, заливати тло і т.д.
Вибирайте один або два додаткові кольори. Якщо їх буде більше, користувачам буде складно сфокусуватися на чомусь одному:
Де використати допоміжні кольори на вашому сайті?
- активна кнопка меню;
- Підзаголовки;
- Виділення другорядної інформації.
- Вибір фонового кольору
Вам колись доводилося фарбувати стіни у своєму будинку?
Якщо так, значить, у вас є якийсь досвід і ви знаєте, що підбір колірних схем – справа нелегка.
Колір повинен бути досить спокійним, щоб ви могли перебувати в кімнаті годинами і на вас колір не тиснув. У той же час, ви не хочете, щоб колір був нудним і кімната виглядала лікарняною.
Вибір фонового кольору для вашого сайту не відрізняється від вибору фарби для вашої кімнати!
Як правильно вибрати колір тла
Якби ви вибирали фарбу для сучасного магазину одягу та для заміського будинку, то вибрали б один і той самий колір?
Очевидно – ні. Ці два приміщення служать для різних цілей.
Наприклад, для магазину одягу краще використовувати яскраві тони, щоб привернути увагу покупців до стелажів із одягом. Потрібно, щоб колір стін контрастував із кольором полиць із одягом, і покупці, увійшовши до магазину, одразу розуміли, на що звернути свою увагу.
І для порівняння: приїжджаючи до свого заміського будинку, ви напевно плануєте розслабитися. Ви хочете, щоб колір стін та пристрій будинку чинив заспокійливий та розслаблюючий ефект.
Фоновий колір вашого сайту залежить від того, на що хочете звернути увагу користувачів.
Простіше кажучи, фоновий колір залежить від мети, яку ви переслідуєте, створюючи сайт.
Тип 1 – Ресурси з великою кількістю контенту або інтернет-комерція
Чи помічали ви, що інформаційні ресурси та інтернет-магазини часто використовують білі або нейтральні колірні схеми для сайту?
Це все тому, що метою цих ресурсів є просування ідей чи продуктів.
У таких випадках центром уваги повинні бути продукти чи послуги, а не дизайн сайту. Фоновий колір є лише основою для того, щоб зробити контент більш наочним і читаним.
Для інформаційних ресурсів та інтернет-комерції найкраще використовувати світле тло, яскраві переважаючий та допоміжні кольори. Яскравість переважаючого та акцентних кольорів гарантує унікальність сайту, та дозволяє виділити деталі. У той же час, нейтральне тло в колірній схемі для сайту продажу допомагає користувачеві фокусуватися тільки на контенті або продуктах.
Тип 2 – Корпоративні сайти та сервіси
Під час створення корпоративного ресурсу має одна мета – просування товарів чи послуг.
Залежно від того, якою є мета вашого сайту, фоновий колір повинен відрізнятися.
Просування бренду
Якщо ви хочете створити образ компанії, що запам'ятовується, використовуйте для фону різні відтінки переважаючого кольору або кольору бренду.
Все тому, що колір безпосередньо впливає на впізнаваність бренду. пам'ятаєте приклад про Кока-Колу?) Коли ви використовуєте різні відтінки кольору свого бренду як фон, ви посилюєте його і робите більш незабутнім для клієнтів.
Якщо переважаючий колір вашого сайту викликає, то його використання як тло може негативно вплинути на сприйняття користувачів. У таких випадках використовуйте відтінки з найменшою інтенсивністю:
Просування сервісу
Якщо вашою метою є привернути увагу до сервісу або портфоліо з вашими роботами, використовуйте білий або нейтральний колір фону.
Як і у випадку з інформаційними ресурсами, не потрібно перевантажувати сайт та відволікати увагу користувачів від контенту, який ви хочете донести. Використовуючи білий або світлий фон у колірній схемі для сайту, ви загострите увагу на контенті:
Тип 3 – Стильні та креативні сайти з великою кількістю графіки
Якщо ви збираєтеся створити сайт, пов'язаний із творчістю ( мода, дизайн, ресторанний бізнес, краси і т.д.), для вас немає жодних обмежень.
Для сайтів такого типу немає правил використання фонового кольору. Ви можете зробити панель меню чорна, щоб додати драматизму. Або створити фон, використовуючи всі кольори веселки, щоб підбадьорити відвідувачів ресурсу:
Намагайтеся завжди дотримуватись одного правила:ніколи не вибирайте такий фоновий колір, який зробить скрутним прочитання тексту на ньому.
Ідеальний фоновий колір дозволяє контенту виділятися та гармонійно поєднується з переважним та допоміжними кольорами. Правильний фоновий колір робить знаходження користувачів на сайті приємним.
Якщо ви сумніваєтеся, використовуйте білий або світло-сірий фон. Можливо, вони не надихаючі, але ви будете впевнені, що ваш контент чітко видно.
Висновок та підсумки
Не варто керуватися персональними пристрастями або чуттям при виборі схеми кольору для сайту.
Використовуйте кольори, які подобаються вашій потенційній аудиторії, і тоді ресурс надовго засяде у людей у пам'яті. Це виділить вас серед конкурентів.
Вибір палітри кольорів в жодному разі не повинен бути випадковим. Це набір дій, які необхідно зробити:
- Вибрати для сайту правильний колір;
- Вибрати для домінуючого кольору правильні допоміжні кольори;
- Виберіть відповідний фоновий колір.
Дана публікація є перекладом статті « How to Choose a Good Color Scheme For Your Website» , підготовленою дружною командою проекту
Добре погано
Від автора:колір – це найважливіший елемент у веб-дизайні. Це маленька хитрість, яка не лише дозволить утримати користувача на вашому сайті, а й спрямує його на здійснення певних дій. Справа в тому, що різні кольори в веб-дизайні на підсвідомому рівні можуть викликати різні емоції, і ці алгоритми сформувалися ще в давнину в результаті взаємодії людини з природою.
Багато розробників витрачають багато часу на створення мовної підтримки веб-сайту. Проте мало хто замислюється, яку роль відіграють кольори нашого життя. Адже більше 90% наших рішень вибрати той чи інший продукт, перейти за посиланням, натиснути кнопку і т. п. засновані на одному тільки кольорі. Web-дизайн активно використовує цей інструмент для привернення уваги користувача та спонукання його до взаємодії.
Ось чому так важливо знати основні принципи та тренди кольору у веб-дизайні, що ми розглянемо в нашій сьогоднішній статті. І почнемо ми з геніального, на мою думку, колірного рівняння.
Рівняння Йоханнеса Іттена
Швейцарський художник Йоханнес Іттен у наукових колах відомий як найбільший знавець принципів кольору у класичному та сучасному мистецтві. Тривалий час він вивчав палітру кольорів різних природних об'єктів, а також творів мистецтв усіх часів і народів.
Колірне рівняння Йоханнеса Іттена виглядає так:
Опорними точками або кольорами першого порядку цього дванадцятичастого кола є червоний, жовтий та синій. Трикутник із кольорів першого порядку вписаний у коло, на основі якого побудований шестикутник. Кожен колір другого порядку виходить шляхом поєднання двох кольорів першого рівня. Таким чином, отримуємо:
Помаранчевий = жовтий + червоний
Зелений = синій + жовтий
Фіолетовий = синій + червоний
Колір третього рівня можна отримати, змішуючи тони першого та другого порядку. Таким чином, у палітрі кольорів панує чітка ієрархія.
Контраст та порівняння
Мозок і очі здатні чітко розрізняти колірні відтінки лише завдяки контрасту та порівнянням. Не секрет, що на білому тлі чорний квадрат виглядає менше, ніж такий квадрат на чорному тлі. Таким чином, чорний колір скорочує розміри, тоді як білий здатний розширюватись і виходити за рамки.
Також варто звернути увагу на сім видів контрастних зіставлень. Звичайно, чорний і білий кольори мають найбільш виражений контрастом темного і світлого. Однак синій, червоний та жовтий також утворюють сильні контрастні пари.
Експресивний потенціал кожної пари кольорів для веб-дизайну виявляється по-різному. Докладніше про види колірного розмаїття ми поговоримо у статті «Поєднання кольорів у веб-дизайні як ефективний інструмент маркетингу».
Сучасні тенденції та підходи у веб-розробці
Дізнайтеся алгоритм швидкого зростання з нуля у сайтобудуванні
Приглушення кольорів контрастом
На мою думку, в мінімалістичному дизайні контрастні веб-кольори виглядають найкраще. Наприклад, на сайті Studio Stylistik використовуються бірюзові елементи на чорному тлі. Кожен бірюзовий елемент (лого, текст, зображення), що помітно виділяється на чорному тлі, суттєво зміцнює графіку, робить її рішучою.
Текст, що виділяється
За допомогою яскравого кольору веб-дизайну можна виділити певні слова. Особливо це актуально на тьмяному фоні. Яскраве виділення тексту впливає сприйняття повідомлення, додає йому певний акцент.
У наступному прикладі візуальний акцент падає на слово Love, що є хорошим закликом до дії, у поєднанні з таким же кольором кнопки Sign Up Now!.
Таким чином, за допомогою яскравих контрастних кольорів можна створити штучну взаємодію між кнопками та іншими елементами сайту, привернути увагу користувача до кнопки та загалом покращити юзабіліті.
У цьому прикладі непримітний колір фону зливається з кольором товару, що дозволяє виділити помаранчеву кнопку та зробити дію привабливішою для користувача.
Вигідні комбінації кольорів
Для визначення вигідного кольору у веб-дизайні вашого сайту слід насамперед проаналізувати цільову аудиторію, а, в другу чергу, підлаштуватися під її можливі уподобання. Якщо ваша аудиторія розкидана по всьому світу, спробуйте створити локальні сайти.
Які ж є секрети в комбінації кольорів? Візьмемо, наприклад, фондовий ринок. У Японії, Великій Британії та США негативний індикатор ковзного графіка горить червоним, а позитивний - блакитним чи зеленим.
А ось у Кореї та на Тайвані колірні уподобання прямо протилежні. Це з тим, що там червоний колір символізує успіх і процвітання.
Отже, під час виборів колірного рішення слід орієнтуватися на особливості різних культур. Для цього потрібно вивчити навіть дрібні деталі колірного сприйняття тим чи іншим народом, групою користувачів, конкретною людиною.
Колір – це емоція
Колірне сприйняття - це далеко не універсальна мова, проте існують деякі кольори web-дизайну, вплив яких можна передбачити.
Ви колись замислювалися над тим, чому лікарняний персонал одягнений в уніформу нейтрально-білого чи приглушеного пастельного відтінку?
Такий вибір не можна назвати випадковістю. М'які зелені, сині, бузкові тони заспокоюють, розслаблюють та обнадіюють пацієнтів. Візьмемо, наприклад, сайт медичного коледжу. Подивіться на чотири варіанти цього сайту. Який вам найбільше подобається?
Загалом, чорний колір має на увазі строгість і професіоналізм, проте, в медичному контексті він асоціюється зі смертю. Червоний – це колір крові, тому для медичного сайту він теж не надто підходить, натякаючи на травми, а не на реабілітацію. Зелений та синій могли б непогано спрацювати. Але синій, погодьтеся, тут більше «в тему», зелений, все-таки занадто яскравий для даної тематики.
На закінчення
Якщо ви відносите себе до касти веб-дизайнерів-початківців і, поки що, не маєте належного досвіду і смаку в плані вибору колірної гами, раджу звернутися до відповідних відеокурсів, які зрозумілою мовою, на реальних прикладах, розкажуть вам, як підібрати гармонійну колірну схему, а також керувати увагою людини за допомогою кольору та інших складових веб-дизайну.
На цьому прощатимуся. Підписуйтесь на оновлення нашого блогу та будьте в курсі всіх новин у галузі веб-дизайну та веб-розробки. До нових зустрічей, друзі!
Сучасні тенденції та підходи у веб-розробці
Дізнайтеся алгоритм швидкого зростання з нуля у сайтобудуванні
Поєднання кольорів у веб-дизайні – важлива дисципліна, яка бере початок із середніх віків і використовується для створення видатних творів людства. Тому, давайте спробуємо втиснути її в одну невелику посаду!)
Звичайно, одного поста мало, щоб зрозуміти всю суть теорії кольору, але в ньому зібрані головні тези та поняття цієї дисципліни.
Ось 5 кроків, які потрібно зробити, щоб правильно вибрати колірну схему для вашого сайту.
Перший крок найбільш важливий. Головний колір створює перше враження про сайт, а також встановлює зв'язок між вашим брендом та емоціями, які відчуває ваша аудиторія. Все це створює вашу ідентичність, тому до вибору головного кольору слід підходити дуже ґрунтовно.
Звичайно, якщо ваш бренд вже пов'язаний з будь-яким кольором, цей крок буде набагато легшим.
По-перше, необхідно враховувати, що різні кольори викликають різні емоції. І цей факт науково підтверджено. Навіть різні відтінки одного кольору по-різному впливають емоції глядачів. Завжди існує певний ступінь невизначеності, що залежить від особистих асоціацій людини, але загалом, одні й самі кольори можуть викликати одні емоції в різних людей.
- Червоний: пристрасть, агресія, актуальність.
- Помаранчевий: жвавість, енергія.
- Жовтий: ентузіазм, щастя, увага/попередження.
- Зелений: зростання, стабільність, природа.
- Блакитний: безтурботність, відкритість.
- Синій: безпека, довіра, професіоналізм.
- Білий: чистота, здоров'я.
- Фіолетовий: розкіш, таємниця, романтика (світлі відтінки).
Не дивно, що багато банків використовують колірну схему, засновану на синьому кольорі.
Пам'ятайте, що ви проектуєте для певної групи людей, які можуть відчувати інші емоції, відмінні від ваших. Крім того, варто враховувати різне ставлення до того самого кольору людей різних статей, культур або релігій.
При виборі головного кольору, варто почати з виключення зі списку ваших конкурентів. Після цього необхідно розглянути питання про те, який настрій повинен створювати ваш бренд і які емоції викликати.
Визначте точний колір (його тон та насиченість)
Коли ви вибрали головний колір, необхідно визначити його тон та насиченість. Як було зазначено вище, тон кольору та його насиченість можуть змінювати його сенс. Наприклад, темніші відтінки жовтого (наприклад, золотий) створюють враження давнини, світліші відтінки такого ефекту не дадуть.
Загальне правило полягає в тому, що світлі відтінки створюють відчуття енергії, свіжості, веселощів, темніші – стабільності та професіоналізму.
Після цього необхідно визначити точне числове значення кольору в системах RGB, CMYK, HEX або Pantone, щоб використовувати його у процесі створення дизайну.
Якщо, наприклад, ви вибрали колір, який вже використовується на якомусь веб-ресурсі і хочете застосувати саме його або їх, можете скористатися сервісом Stylify Me, який допоможе визначити кольори, що використовуються на будь-якому сайті.
Виберіть тип колірної схеми
Перед тим, як вибрати решту кольорів, необхідно визначити, як вони взаємодіятимуть. Ви хочете більш контрастну колірну схему чи спокійнішу?
Ви можете поєднувати кольори так, як вам зручно, але тут ми представили найбільш поширені варіанти колірних схем.
Монохромна
Має на увазі використання різних тонів основного кольору. Найчастіше використовується для мінімалістичних стилів дизайну.
Аналогова
Подібні кольори, що розташовані поблизу один від одного на колесі.
Градієнтна
Поступовий перехід від одного кольору до іншого. Барвистіша, ніж аналогова, але при цьому може відволікати від інших елементів дизайну.
Контрастуюча
Два протилежні кольори. Якщо подивитися на колесо, то кольори, які знаходяться навпроти один одного, є найбільш контрастними. Наприклад, червоний та зелений або жовтий та фіолетовий. Використання такої колірної схеми додає динаміки до візуального ефекту дизайну.
Контрасти допомагають у маніпулюванні увагою користувача, дозволяючи виділяти найважливіші елементи (кнопки) і приховувати менш значущі.
Дуплекс
Створення зображень за допомогою лише 2 кольорів. - Це не стільки колірна схема, скільки вид оформлення контрастної колірної схеми.
Простіше кажучи, дуплекс виглядає просто чудово, це динамічний візуальний ефект, який «чіпляє» увагу користувача.
Тріада
Три кольори розташовані на однаковій відстані один від одного на колірному колесі. Одна з найчастіше використовуваних колірних схем, тріадна є надійним стандартом. Її складно використовувати правильно, просто намалюйте рівносторонній трикутник на колірному колесі, і ви отримаєте три кольори вашої тріади.
Спліт (розділена) контрастність
Використовуючи третій колір на додаток до двох контрастних. Як і контрастуюча схема дозволяється створювати акценти на необхідних частинах дизайну, але має більшу кількість можливостей для цього.
Виберіть другорядні кольори
Визначення колірної схеми допоможе спростити вибір другорядних кольорів. Але все доведеться попрацювати над вибором їх відтінків та насиченості, як робили при виборі первинного кольору.
Простий інструмент Paletton допомагає розглянути різні колірні схеми. Ви можете вибрати головний колір і визначити колірну схему, і Paletton визначити другорядні кольори.
Вирішіть де і як ви використовуватимете кожен колір
Отже, у вас є чудова палітра кольорів для вашого проекту… що тепер з нею робити? Застосування квітів на сайті – це те місце, де зустрічаються мистецтво та вміння дизайнера.
Акценти не повинні використовуватися лише на елементах, що закликають до дії або важливих кнопках. Ви можете використовувати їх на різних частинах сайту. Наприклад, виділяти важливі слова у тексті, щоб користувач звертав на них особливу увагу.
Спочатку необхідно проектувати сайт у чорно-білому форматі. Визначаючи за допомогою сірої шкали важливість того чи іншого елемента, збудуйте ієрархію за значимістю кожної частини вашого проекту.
Висновок
Отже, ми з'ясували, що вибір поєднання кольорів у веб-дизайні – важливий етап проектування сайту, до якого потрібно підходити ґрунтовно. Вибір головного кольору надзвичайно важливий, т.к. визначає загальний настрій, який нестиме ваш сайт.
Тип колірної схеми також впливає на емоції, які викликатимуть сайт у відвідувачів. Тип визначає кількість інструментів, якими ви зможете скористатися для визначення порядку використання кольорів.
Колір, безперечно, є важливим джерелом емоції. Кольори можуть встановлювати правильний тон та передавати необхідні емоції відвідувачам, можуть схвилювати, викликати безліч почуттів та стимулювати до дій. Він є надзвичайно потужним чинником на користувачів.
При виборі кольорової гами для сайту важливо зробити це правильно, керуючись основними принципами теорії кольору. У статті розглядаються найбільш значущі аспекти при виборі, основні принципи поєднання, призначення кольору у веб-дизайні та його символічне значення. Крім того, Ви побачите кілька хороших прикладів відповідно до переважаючих кольорів, а також ознайомтеся з деякими корисними порадами, щоб ефективно використовувати кольори при створенні веб-сайту.
Отже, приступимо до знайомства з магією кольору.
Колірна теорія: основні засади. Вміння поєднувати кольори
Добре коли у Вас є смак, і Ви без проблем можете підібрати колірну схему сайту. Не всі люди можуть зробити це просто. Для тих, хто не впевнений, як правильно об'єднати кольори під час створення веб-сайту, я рекомендував би ознайомитися з основами теорії кольору.Розглянемо колірне коло.
Трохи історії:кольорове коло винайшов Ісаак Ньютон. Обгрунтувавши теорію світла та квітів у 1666р. Саме вона лягла в основу становлення та розвитку сучасної оптики, малою та складовою якої є web-дизайн. Ньютон за допомогою тригранної скляної призми розклав біле світло на сім кольорів (у спектр), тим самим довівши його складність (явище дисперсії), відкрив хроматичну аберацію.
Колірне коло є неодмінним атрибутом багатьох дизайнерів та художників по всьому світу. Це ідеальний доказ теорії, що геніальне завжди просто. Коло дозволяє вам вибрати кольори, які гармоніювали б разом. Він складається з 6 основних кольорів: червоний, помаранчевий, жовтий, зелений, синій, фіолетовий та додаткових кольорів.
Щоб знайти правильну колірну схему, необхідно використовувати будь-які два кольори один навпроти одного, будь-які три кольори на рівній відстані при формуванні трикутника або будь-якого з чотирьох кольорів, що утворюють прямокутник (дві пари кольорів один навпроти одного). Колірні схеми залишаються правильними незалежно від кута повороту.
Основні кольори
Є три основні кольори: червоний (# ff0000 у HTML або # F00 у CSS), жовтий (# FFFF00 у HTML або # ff0 у CSS) та блакитний (# 0000FF у HTML або # 00f у CSS). Не можна їх одержати шляхом змішування інших кольорів. Додаткові кольори можуть бути сформовані шляхом поєднання цих трьох кольорів.
Складові кольори
Є також три основні: помаранчевий (# ff9900 у HTML або # F90 у CSS), зелений (# 00FF00 у HTML або # 0f0 у CSS) та фіолетовий (# FF00FF у HTML або # f0f у CSS). Ви можете отримати їх шляхом змішування червоного та жовтого (помаранчевого), жовтого та синього (зелений) та синього та червоного (фіолетовий).
Третичні кольори
Щоб отримати один із третинних кольорів, необхідно змішати один основний колір і один вторинний колір. Можливості для третинних кольорів безмежні.
Додаткові кольори
Додаткові кольори розташовані навпроти один одного на колірному колі: червоний і зелений, синій і помаранчевий, фіолетовий і жовтий. У поєднанні один з одним, вони становлять разючий контраст. Такі поєднання зазвичай використовуються для виділення деяких елементів на веб-сайті.
Аналогічні кольори
Ці кольори розташовані поруч один з одним на колірному колі. Вони зазвичай дивляться дуже добре разом. Використання таких поєднань кольорів викликає почуття комфорту у відвідувачів Вашого сайту.
Кольори у різних культурах: символізм
При виборі гами для вашого сайту, необхідно брати до уваги той факт, що колір може мати різні значення в різних культурах. Культурний аспект для кольорової символіки може бути дуже сильним, тому ви повинні знати про те, якою є аудиторія сайту.Давайте з'ясуємо, яке значення мають кольори у різних культурах:
- Китай: колір нареченої, удачі, урочистостей
- Індія: чистота
- Південна Африка: траурні кольори
- Схід: радість (у поєднанні з білим)
- Захід: збудження, кохання, пристрасть
- США: різдво (з зеленим), день святого Валентина (з білим)
- Іврит: жертва, гріх
- Японія: життя
- Християнство: жертва, пристрасть, кохання
- Фен-шуй: Янь, вогонь, удача, повага, захист, живучість, гроші, визнання
- Європа: заспокоєння
- Іран: жалоба, колір неба та духовність
- Китай: безсмертя
- Індуїзм: колір Крішни
- Юдаїзм: святість
- Християнство: колір Христа
- Католицизм: кольори одягу Марії
- Близький Схід: захист
- Світ: колір безпеки
- Фен-шуй: Інь, вода, спокій, кохання, зцілення, релаксація, довіра, пригоди
- Захід: смуток, депресія
- Європа: щастя, надія, радість, боягузтво в небезпеці, слабкість
- Азія: колір імперського
- Єгипет: жалоба
- Японія: мужність
- Індія: торговці
- Буддизм: мудрість
- Фен-шуй: Янь, Земля, сприятливий, сонячне проміння, тепло, рух
- Європа: осінь, урожай, творчість
- Ірландія: протестанти (релігійні)
- США: Хелловін (з чорним), дешеві товари
- Індуїзм: шафран (персиковий помаранчевий) священний колір
- Фен-шуй: Янь, Земля, цілі, посилює концентрацію
Коричневий
- Колумбія: перешкода продажам
- Австралійські аборигени: кольори землі, урочисте охр
- Фен-шуй: Янь, Земля, промисловість
Зелений
- Японія: життя
- Іслам: надія, чеснота
- Ірландія: символ усієї країни
- Європа/США: весна, нове народження, День Святого Патрика, Різдво (з червоним)
- США: гроші
- Індія: Іслам
- Фен-шуй: Інь, дерево, зцілення, здоров'я, заспокійливе
Фіолетовий
- Таїланд: жалоба (вдови)
- Католицизм: смерть, жалоба, розп'яття
- Фен-шуй: Інь, колір фізичного та психічного лікування
Білий
- Європа: шлюб, ангели, лікарі, лікарня, світ
- Японія: жалоба, біла гвоздика символізує смерть
- Китай: жалоба, смерть,
- Індія: нещастя
- Схід: похорон
- Фен-шуй: Янь, метал, смерть, привиди, жалоба, рівновага, впевненість
Чорний
- Європа: жалоба, похорон, смерть, бунт, спокій
- Таїланд: нещастя, зло
- Юдаїзм: нещастя, зло
- Австралійські аборигени: колір людей
- Фен-шуй: Інь, вода, гроші, успіх у кар'єрі, дохід, стабільність, емоційний захист, сила
Значення кольорів
Давайте подивимося, які почуття може викликати кожен колір та подивимося на деякі готові рішення.В основному пов'язаний з азартом, сміливістю та бажанням. Червоний колір любові, сили, енергії, лідерства та хвилювання. Це сильний колір, і ви повинні знати про деякі його негативні емоції: небезпека, тривога.
Терпіння, мир, спокій, надійність, кохання, стабільність. Один із найулюбленіших кольорів, особливо у чоловіків. Це пов'язано зі стабільністю та глибиною, професіоналізмом, довірою.
Колір, який найчастіше асоціюється із жвавістю. Енергійний, дає відчуття щастя. Крім того, він асоціюється з цікавістю, розвагою, радістю, інтелектом, обережністю.
Бадьорість та творчість. Асоціюється з дружелюбністю, впевненістю, грайливістю, мужністю, стійкістю.
Фіолетовий
Традиційно асоціюється з владою, шляхетністю та багатством. Мудрість, незалежність, шляхетність, розкіш, честолюбство, гідність, магія та таємниці.Від автора:веб-дизайнер має у своєму арсеналі безліч інструментів взаємодії з користувачами за допомогою кольору. Поєднання кольорів у веб-дизайні - це ефективний інструмент маркетингу, однак його слід використовувати дуже обережно, щоб не отримати дизайн у стилі «вирви-очей», який залишає в душі користувачів неприємні відчуття та розхитані нерви.
Це, звісно, крайній приклад. Головна ідея моєї статті така - дизайн має бути не лише функціональним та корисним, а й емоційно привабливим. Для цього потрібно особливо ретельно продумати колірну палітру сайту, яка є набором кольорів, що використовуються при розробці веб-дизайну.
До кольорової гами сайту висуваються досить серйозні вимоги, оскільки поєднання кольорів для веб-дизайну не тільки визначає зовнішній вигляд вашого ресурсу, а й асоціюватиметься з вашим брендом в інтернеті. Більшість сайтів має палітру від 2 до 4 кольорів, крім чорного і білого. Спробуймо розібратися, як створити найбільш привабливе та ефективне поєднання кольорів у дизайні сайту.
Вибираємо основний колір
Якщо у вас вже є готовий логотип, то найкраще один з його кольорів використовувати як основне. Якщо ж палітру сайту вам потрібно підібрати з нуля, доведеться скористатися іншим способом. Проаналізуйте цільову аудиторію вашого ресурсу з погляду соціальних чи вікових переваг.
Візьмемо, наприклад, веб-сайт весільної теми. У нас нареченої одягають білі сукні, що символізують невинність та чистоту. У Китаї ж білий колір вважається кольором жалоби, тому китайські нареченої вбираються в червоні сукні, тому що червоний для китайців - це символ кохання, щастя та удачі. Додайте сюди ще жовту фарбу та отримайте колір влади та багатства.
З усіма цими культурними нюансами дуже складно знайти ідеальні поєднання кольорів для веб-дизайну, які дійсно підійдуть вашому сайту та працюватимуть на нього. Тому багато компаній, що поважають себе, роблять локальні версії сайтів для різних країн і народів.
Найбезпечнішими кольорами є фіолетовий та синій. Фіолетовий скрізь, крім Таїланду, вважається кольором багатства, влади та високого соціального статусу (у Таїланді він є символом скорботи). Синій асоціюється із оптимізмом, впевненістю, щастям. Щоправда, у Японії він означає злодіяння, а Індії - сум.
Види кольорових контрастів
Контраст за тоном. Цей вид протиставлення потрібно застосовувати обережно, бажано, у поєднанні з іншими видами розмаїття, і лише тоді, коли це обґрунтовано. Найбільш вираженим контрастом у веб-дизайні вважається поєднання трьох кольорів: червоного, жовтого та синього. Чим далі кольори, що поєднуються, стоять у колірному колі від цих трьох, тим слабше контраст по тону.
Контраст світлого та темного. Найсуворіша контрастна пара складається, звичайно ж, із білого та чорного кольорів. Серед додаткових кольорів найменший контраст яскравості – між зеленим та червоним, найбільший – між фіолетовим та жовтим.
Наш зір більш чутливий не до колірних градацій об'єктів, а до нюансів їхньої яскравості. Для веб-дизайнера вміння гармонійно розкласти темні та світлі плями в оформленні сайту – це ключ до ефективного дизайну.
Холодний та теплий. Не дивно, що холодні та теплі тони асоціюються у людини із температурою. Це з тим, що земна атмосфера забарвлює видалені об'єкти в блакитні тони.
Таким чином, чим далі від нас знаходиться якийсь об'єкт, тим холоднішим ми собі його уявляємо. Цією властивістю посилено користуються як художники, так і веб-дизайнери для того, щоб викликати у користувача потрібні емоції.
Курс на мінімалізм
Сьогодні у тренді яскраві та динамічні відтінки, мінімалізм та одноколірні схеми, що не відволікають контрастом між квітами. У поєднанні з мінімалістичним стилем (які використовують, наприклад, прозорі кнопки або білий жирний шрифт), одноколірну схему легко впровадити в сайт, і на неї приємно дивитися.
Більшість людей воліє у веб-дизайні поєднання однакових кольорів фону з контрастною палітрою інших елементів. Тому логічно використовувати палітру з 1-2 кольорів для фону сайту і контрастну палітру для кнопок та інших об'єктів, що закликають до дії.
Ви, напевно, хоч раз стикалися з веб-сервісом Twitter і помічали, що його палітра кольорів складається з декількох відтінків синього. Ви вже знаєте, що синій - це найбезпечніший для використання в мережі колір, тому не дивно, що Twitter використовує саме його, особливо якщо врахувати світову популярність сервісу, підтримку їм величезної кількості мов і культур.
Колір як засіб навігації
Ще один виграшний спосіб використання фонових та акцентуючих кольорів – це створення своєрідної «колірної ієрархії», яка «навчає» користувача тому, що певний колір означає конкретну дію на сайті.
Давайте підіб'ємо підсумки. Колір та вміння поєднувати кольори у web-дизайні – це найважливіший інструмент веб-дизайнера. Якщо його грамотно використовувати та не забувати про юзабіліті сайту, то можна вигідно виділити контент, м'яко та ненав'язливо «направивши» відвідувача на вчинення певних дій.
Уявіть, що ваш сайт відвідуватимуть тисячі та мільйони людей – ось чому варто зробити все можливе, щоб його використання було максимально простим та комфортним.
Сподіваюся, цей матеріал виявився для вас корисним. Підписуйтесь на оновлення нашого блогу, щоб не пропустити все найцікавіше. Бувай!
Сучасні тенденції та підходи у веб-розробці
Дізнайтеся алгоритм швидкого зростання з нуля у сайтобудуванні
