7 правил для кольорових схем веб-сайту

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


Чому??

Дослідження показують, що 62-90% рішень про швидку купівлю керуються суто сприйняттям кольорів.

Вибір правильної кольорової гами веб-сайту – це те, що робить його пам’ятним, надійним, привабливим та вигідним. Перше враження – все.

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

Незрозуміло з чого навіть почати? Виконайте ці кроки для створення кольорової схеми веб-сайту та уникайте великих помилок дизайну.

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

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

Отже, ось з чого почати …

Contents

7 кроків для створення власної кольорової схеми веб-сайту

1. Знайдіть свій основний колір

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

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

Ви також можете переглядати цей список шістнадцяткових кодів палітри деяких найвідоміших світових брендів для розширення вашої групи ідей.

Коли ви стикаєтеся з особливо приємним дизайном чи зображенням, не соромтеся використовувати інструмент вибору кольору, щоб забрати шістнадцятковий код і додати його до списку обраних. ColorZilla здається, популярним інструментом. І якщо ви використовуєте Chrome як основний веб-переглядач, перегляньте його Розширення браузера Eye Dropper оскільки це один із найвищих інструментів.

2. Вирішіть кількість кольорів (рекомендується: 3)

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

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

Існує також правило старого дизайнера, яке може бути корисним при застосуванні вашої кольорової гами до дизайну веб-сайту. Він відомий як 60-30-10 правило.

Правило 60-30-10 радить не використовувати однакові кількості вибраних кольорів, а поділити їх на відсотки та застосовувати відповідно. Хороший приклад цього правила на практиці – чоловічий костюм: блейзер і шлейфи займають близько 60% зовнішнього вигляду, сорочка представляє ще 30%, а краватка 10%.

3. Використовуйте вторинні кольори, коли це потрібно

Поєднання вторинних кольорів з вашими основними кольорами бренда може бути проблемою, але не впадайте у відчай! В Інтернеті є безліч розумних безкоштовних інструментів, які полегшать це завдання. Наприклад, ви можете перейти до ColorSpace, введіть шістнадцятковий код обраного вами кольору і сідайте! (Більше інструментів генератора кольорової палітри нижче …)

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

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

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

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

4. Не забудьте свої нейтральні кольори (білий, чорний сірий)

Вам знадобляться нейтральні кольори для тексту, щоб створити контраст для важливих елементів або як кольори тла.

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

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

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

Якщо ви зациклювалися на ідеях, поверніться до Дриблінг або Дизайнспірації і використовуйте пошук кольорів, щоб побачити, що роблять інші.

5. Додайте основні, вторинні та нейтральні кольори у наступних місцях:

Як ви ставитесь до застосування кольорової схеми веб-сайту? Які кольори йдуть куди і чому?

  • Основні кольори перейдіть до “гарячих точок” на вашій веб-сторінці. Ви повинні використовувати ці сміливі, яскраві кольори, щоб привернути увагу користувачів та спонукати їх до дій. Кнопки, заголовки CTA, піктограми переваг, форми завантаження та інша важлива інформація повинні бути виділені за допомогою основних кольорів.
  • Вторинні кольори використовуються для виділення менш важливої ​​інформації на веб-сайті, наприклад, допоміжні кнопки, підзаголовки, активні пункти меню, фони або допоміжний вміст, наприклад, поширені запитання та відгуки.
  • Нейтральні кольори скоріш за все, буде використовуватися для тексту та фону, але може стати в нагоді в особливо колоритних розділах сайту, просто щоб допомогти тонізувати його та переорієнтувати око.

6. Пройдіть процес кілька разів

Коли ви нарешті придумаєте свою колірну палітру, поставте її на тест у різних сценаріях. Чи буде це працювати в друку? Що робити, якщо ви вирішили запустити товарну лінію? Чи впливає це на відвідувачів, яких ви очікували?

Краще кілька разів пройти цей процес і створити кілька різних кольорових палітр. Якщо хтось не відповідає всім вашим вимогам, у вас з’явиться план B.

7. Мозковий штурм при потребі

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

  1. ColorSpace – Цей сайт може генерувати цілу кольорову схему на основі шестнадцяткового коду одного вибраного кольору.
  2. Adobe Color – цей інструмент Adobe побудований навколо концепції кольорового колеса і дозволяє розробити будь-яку кольорову схему веб-сайту за кілька кліків. Ви також можете завантажити зображення, щоб витягти кольорові коди, перетягуючи файл у інструмент.
  3. Палеттон – Paletton – це ще один зручний користувальницький інструмент для створення красивих кольорових схем без будь-яких технічних чи дизайнерських знань.
  4. Охолодження – цей інструмент дуже зручний для тестування того, як різні кольори працюють разом. Завдяки інтерфейсу перетягування ви можете переміщати кольори та бачити, чи стикаються вони чи добре працюють разом.
  5. ColorSpire – ще один генератор кольорових схем веб-сайту.
  6. Кольорове колесо Canva – Цей безкоштовний інструмент дуже зручний у користуванні і може допомогти вам зрозуміти, які кольори чудово виглядають разом, а які поєднання кольорів – ні-ні. Крім того, є багато навчального контенту, щоб відповісти на будь-які запитання щодо теорії кольору та кольорового колеса.

Найпоширеніші запитання:

1. Чому важлива кольорова схема веб-сайту?

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

Наука показала червоний колір може посилити кровообіг, а синій – заспокійливий ефект.

Наприклад, у 2000 році, Глазго представив синє вуличне освітлення для покращення пейзажу міста, що випадково призвело до помітного зменшення кількості злочинів у районах, освітлених блакитними вогнями. Аналогічно, Токіо – залізниця Яманоте Лінія вирішила встановити сині вогні в кінці поїздів, щоб зменшити кількість самогубств. В результаті самогубства на цих станціях впали на 74%.

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

Ясно одне: при правильному використанні кольори можуть мати велику владу над нами. І саме тому вибір правильної колірної гами для вашого веб-сайту так важливий.

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

2. Які емоції пов’язані з різними кольорами?

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

Фактично, 85% покупців сказали вони купують продукцію лише на основі кольору.

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

Але з чого почати?

Ось шість основних кольори, які викликають унікальну емоційну реакцію у глядачів:

Червоний

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

Vodafone.
Кредит зображення: Vodafone.

Помаранчевий

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

easyGroup
Кредит зображення: easyGroup.

Жовтий

Як колір сонця, жовтий може грати на щастя та веселі аспекти. Але він також активізує зону тривоги в мозку, тому застосовувати його слід обережно і в різних відтінках.

Гусениці
Кредит зображення: Гусениці.

Зелений

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

Starbucks
Кредит зображення: Starbucks.

Синій

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

NHS
Кредит зображення: NHS.

Фіолетовий

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

Кейдбері
Кредит зображення: Кейдбері.

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

3. Що мені знати про гендерні та вікові відмінності кольорів?

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

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

У дослідженні 2012 року, майже 2000 чоловіків і жінок запитували, чи віддають перевагу фіолетовому, синьому, зеленому, жовтому, помаранчевому, червоному чи рожевому.

42% чоловіків сказали, що улюбленим кольором є блакитний, за ним зелений (25%) та фіолетовий (12%). Жінки також сказали, що синій колір є їх кращим кольором (29%), а слідом за ним – фіолетовий (27%) та зелений (19%).

Кругова діаграма: улюблені кольори людства
Кругова діаграма: улюблені кольори людства.

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

Отже, яким кольорам віддають перевагу різні статі?

Отже, яким кольорам віддають перевагу різні статі? Дещо дослідження було зроблено в цьому напрямку.

Дешеві або невиразні кольори

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

4. Які кольори привертають найбільшу увагу?

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

Музей Гуггенхайма
Наприклад, Музей Гуггенхайма використовує колір, щоб підкреслити різні місця та виділити найважливішу інформацію на веб-сайті.

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

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

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

5. Яка галузь надає перевагу різним кольорам?

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

Тож зовсім не дивно дізнатися, що різні галузі надають перевагу різним кольорам, оскільки вони намагаються викликати певні емоції та створювати асоціації, що стосуються галузі.

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

6. Як покращити розпізнавання бренда?

Колір є одним з найважливіших елементів пам’ятного бренду – поряд з типографією, торговою маркою та графікою.

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

Зробимо швидкий експеримент. Закрийте очі та подумайте про ці три марки: Milka Chocolate, IKEA та Carlsberg. Ви бачили їхні брендові кольори? Надіюсь, ваш мозок моментально обсипався фіолетовими, синьо-жовтими та зеленими зображеннями.

Мілка
Кредит зображення: Мілка.

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

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

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

7. Що таке нейтральні кольори?

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

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

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

Студія спеціальних пропозицій
Ось приклад однотонної кольорової гами який використовує червоний колір як основний відтінок.

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

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

В одному дослідженні було проаналізовано 520 логотипів
В одному дослідженні було проаналізовано 520 логотипів.

Синій, червоний та зелений – це три домінуючі кольори, які з’являються майже в кожній галузі.

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

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

8. Чи є приклади хороших кольорових схем веб-сайту?

Існує! Ось 20 прикладів для натхнення кольорової гами вашого веб-сайту.

1. Яскравий акцентний колір

Крескоза
Кредит зображення: Крескоза.

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

2. Яскрава, але врівноважена кольорова схема

Ідеальна буря
Кредит зображення: Ідеальна буря.

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

Відкрийте для себе більш яскраві кольорові гами акцентів Adobe Color.

3. Колірна схема свіжого та органічного вигляду

Калем
Кредит зображення: Калем.

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

4. Земляні тони

LaunchBuzz
Кредит зображення: LaunchBuzz.

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

Дізнайтеся більше про свіжі кольорові гами Adobe Color.

5. Спокійна і мінімалістична кольорова схема

Працюйте відповідально
Кредит зображення: Працюйте відповідально.

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

6. Елегантна і розслаблена кольорова схема

Поглиблення
Кредит зображення: Поглиблення.

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

Відкрийте для себе більш мінімалістичні кольорові гами Adobe Color.

7. Пастельна та приглушена кольорова схема

Супутник
Кредит зображення: Супутник.

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

8. М’яка і запрошена кольорова схема

Седрик Перейра
Кредит зображення: Седрик Перейра.

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

Відкрийте для себе більше пастельних кольорових гам Adobe Color.

9. Яскрава і смілива кольорова схема

М. А. Справжній каннабіс
Кредит зображення: М. А. Справжній каннабіс.

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

10. Яскравий контраст

Дизайн Dropbox
Кредит зображення: Дизайн Dropbox.

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

Відкрийте для себе більш яскраві кольорові гами Adobe Color.

11. Кольорова і сучасна кольорова схема

Підтверджуйте
Кредит зображення: Підтверджуйте.

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

12. Весело та грайливо

Ваш план, ваша планета
Кредит зображення: Ваш план, ваша планета.

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

Відкрийте для себе більш барвисті кольорові гами Adobe Color.

13. Монохроматична кольорова схема

Студія Revolve
Кредит зображення: Студія Revolve.

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

14. Елегантний і спокійний

Mowellens
Кредит зображення: Mowellens.

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

Відкрийте для себе більше монохромних кольорових схем Adobe Color.

15. Яскрава і різка кольорова схема

Великі олені олені
Кредит зображення: Великі олені олені.

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

16. Не боїться сміливих кольорів

Колір на код
Кредит зображення: Колір на код.

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

Відкрийте для себе більш яскраві кольорові гами Adobe Color.

17. Елегантна і розкішна кольорова схема

Шер Амі
Кредит зображення: Шер Амі.

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

18. З відтінком золота

Паола Краузе
Кредит зображення: Паола Краузе.

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

Відкрийте для себе більш елегантні кольорові гами Adobe Color.

19. Корпоративна, але енергетична кольорова схема

Бамбукова натовп
Кредит зображення: Бамбукова натовп.

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

20. Традиційний, але цікавий

Кредді
Кредит зображення: Кредді.

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

Відкрийте для себе більше корпоративних кольорових схем Adobe Color.

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

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

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

Тепер надіньте дизайнерську шапку і починайте експериментувати зі своїми кольоровими палітрами!

Приєднуйтесь до нашої розсилки

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me