Вибираємо та створюємо колірну схему для сайту

web_design
Аудіо доріжка
417

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

Змоделюємо просту ситуацію: ви вперше запускаєте сайт, який раніше не відвідували. Що вашу свідомість сприймає насамперед? Це не текст, не кнопки на сторінці, не заклики до дії і навіть не підказки про cookie-файли або нав'язливі пропозиції включити повідомлення. Це колір!

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

1

Якою має бути палітра кольорів для сайту?

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

Пошук відповідного колірного рішення складається з трьох ключових кроків:

  1. Аналіз тематики майбутнього сайту, а також фірмових кольорів конкурентів. Якщо їх немає, придивіться до кольорових рішень сайтів у схожих або близьких нішах.
  2. Запит у клієнта інформації про рекламні продукти компанії, що використовуються. Можливо, у нього вже є готовий брендбук — позбавте себе маси клопоту.
  3. Пошуки різноманітних референсів, які допоможуть краще зіставити відтінки кольорів та зрозуміти, як вони поєднуються.

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

Правильні поєднання та підбір кольору для сайту: рекомендації для новачків

Природно, немає якогось єдиного алгоритму підбору палітри кольорів. Занадто багато нюансів потрібно враховувати, щоби все зробити правильно. Але якби нас попросили дати максимально короткі рекомендації, ми б відповіли:

  1. Для веб-сторінок дитячої тематики: яскраві та контрастні, найбільш позитивні та яскраві кольори
  2. Для веб-сторінок з цільовою аудиторією дівчат та жінок: ніжні, пастельні та переважно світлі відтінки
  3. Для веб-сторінок з чоловічою аудиторією: виразні темні або нейтральніші

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

Сервіси для вибору кольорових схем для сайту

2

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

  1. Adobe Color — Фірмова розробка Adobe, за допомогою якої можна комбінувати різні колірні рішення і підбирати найбільш гармонійні.
  2. Coolors — генератор палітри кольорів, який швидко збирає вдалі поєднання кольорів. Можна «допомогти» йому, вибравши певні кольори та замінивши деякі відтінки. Примітно, що Coolors є фірмовий плагін для Figma.
  3. Material Design Color Tool — зручний інструмент, розроблений для дизайнерів інтерфейсів користувача. Зручно, що підібрану схему кольору можна відразу застосувати до схеми сторінки і наочно побачити, як вона виглядає.
  4. Colordot — Простий, навіть трохи примітивний генератор колірної палітри, в якому відтінок змінюється в міру руху мишки на сторінці. Не найфункціональніший, але досить цікавий сервіс.
  5. Material Palette — дозволяє вибрати два основних кольори, а потім збирає прев'ю з цими кольорами. Працює швидко та наочно демонструє ваш вибір.

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

3

Теорія кольору: як сприймається палітра кольору сайту користувачем

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

Розглянемо кілька базових кольорів та емоцій, які вони викликають:

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

Курс "Курс Web-дизайна"

Курс Web-дизайна

Хочеш отримати навчання від Юрія Лінника?

На курсі ви освоїте:

  • Знання особливостей веб-проектів (респонсив, адаптив)
  • Знання принципів юзабіліті сайтів
  • Розробка дизайну під різні пристрої (десктоп, планшети, смартфони)
  • Роботу з дизайн макетами у Figma
  • Розуміння принципів проектування та розробки сайтів та інтерфейсів

Упевнені, якщо ви зараз намагаєтеся зіставити кольори з популярними брендами, то переконайтеся, що саме такі асоціації у вас і виникають. Молодіжна «помаранчева» Fanta, романтичні «червоні» цукерки Raffaello, безпечний та надійний Samsung. Приклади можна перераховувати безкінечно.

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