Вибираємо та створюємо колірну схему для сайту
Понад 80% усієї навколишньої інформації людина сприймає через зір. Саме те, що ми бачимо, формує нашу картину світу, впливає на нашу поведінку та прийняті рішення. Тож чи варто дивуватися, що в сучасній веб-розробці стільки уваги приділяється візуалу?
Змоделюємо просту ситуацію: ви вперше запускаєте сайт, який раніше не відвідували. Що вашу свідомість сприймає насамперед? Це не текст, не кнопки на сторінці, не заклики до дії і навіть не підказки про cookie-файли або нав'язливі пропозиції включити повідомлення. Це колір!
Спочатку ми оцінюємо лише палітру кольорів, і вже вона здатна дати сигнал, чи варто залишатися на сторінці або можна її закривати. Погляньте на наступний скріншот і скажіть, наскільки комфортно вам у принципі дивитися на таку картинку:
Якою має бути палітра кольорів для сайту?
Для підбору оптимальної колірної гами в Інтернеті важлива наочність, знання та досвід, природне почуття прекрасного та готовність детально поринути у тематику майбутнього сайту.
Пошук відповідного колірного рішення складається з трьох ключових кроків:
- Аналіз тематики майбутнього сайту, а також фірмових кольорів конкурентів. Якщо їх немає, придивіться до кольорових рішень сайтів у схожих або близьких нішах.
- Запит у клієнта інформації про рекламні продукти компанії, що використовуються. Можливо, у нього вже є готовий брендбук — позбавте себе маси клопоту.
- Пошуки різноманітних референсів, які допоможуть краще зіставити відтінки кольорів та зрозуміти, як вони поєднуються.
Не завжди вдається з першого разу підібрати найбільш відповідну палітру кольорів. Будьте готові експериментувати, пробувати різні варіанти та приймати часом найнестандартніші рішення.
Правильні поєднання та підбір кольору для сайту: рекомендації для новачків
Природно, немає якогось єдиного алгоритму підбору палітри кольорів. Занадто багато нюансів потрібно враховувати, щоби все зробити правильно. Але якби нас попросили дати максимально короткі рекомендації, ми б відповіли:
- Для веб-сторінок дитячої тематики: яскраві та контрастні, найбільш позитивні та яскраві кольори
- Для веб-сторінок з цільовою аудиторією дівчат та жінок: ніжні, пастельні та переважно світлі відтінки
- Для веб-сторінок з чоловічою аудиторією: виразні темні або нейтральніші
Звичайно ж, є безліч винятків із правил. Чоловічий сайт може бути строкатим і навіть незграбним. І навпаки, жіночий чи дитячий — більш серйозний і стриманий у своїх колірних рішеннях. Тому керуватися лише цими трьома правилами безперечно не варто.
Сервіси для вибору кольорових схем для сайту
На щастя для нас з вами, існує безліч різних сервісів, які значно спрощують роботу дизайнерам і допомагають вибрати найбільш підходящу палітру кольорів для веб-сайту. Розглянемо деякі найпопулярніші:
- Adobe Color — Фірмова розробка Adobe, за допомогою якої можна комбінувати різні колірні рішення і підбирати найбільш гармонійні.
- Coolors — генератор палітри кольорів, який швидко збирає вдалі поєднання кольорів. Можна «допомогти» йому, вибравши певні кольори та замінивши деякі відтінки. Примітно, що Coolors є фірмовий плагін для Figma.
- Material Design Color Tool — зручний інструмент, розроблений для дизайнерів інтерфейсів користувача. Зручно, що підібрану схему кольору можна відразу застосувати до схеми сторінки і наочно побачити, як вона виглядає.
- Colordot — Простий, навіть трохи примітивний генератор колірної палітри, в якому відтінок змінюється в міру руху мишки на сторінці. Не найфункціональніший, але досить цікавий сервіс.
- Material Palette — дозволяє вибрати два основних кольори, а потім збирає прев'ю з цими кольорами. Працює швидко та наочно демонструє ваш вибір.
Це лише деякі з популярних безкоштовних сервісів для підбору схеми кольору для сайту або програми. Їх насправді більше, але потреби шукати додаткових рішень, як правило, не виникає.
Теорія кольору: як сприймається палітра кольору сайту користувачем
Ви можете самі того не помічати, але кожен колір викликає ту чи іншу емоцію. І якщо ви плануєте пов'язати своє життя з дизайном, цей взаємозв'язок варто враховувати.
Розглянемо кілька базових кольорів та емоцій, які вони викликають:
- Червоний: любов і пристрасть, але також побоювання та важливість
- Помаранчевий: енергія, позитив та дружелюбність
- Жовтий: щастя та радість
- Зелений: умиротворення, зростання та благополуччя
- Синій: спокій та безпека
- Білий: чистота та добро
- Чорний: вишуканість та влада
Курс "Курс Web-дизайна"
Хочеш отримати навчання від Юрія Лінника?
На курсі ви освоїте:
- Знання особливостей веб-проектів (респонсив, адаптив)
- Знання принципів юзабіліті сайтів
- Розробка дизайну під різні пристрої (десктоп, планшети, смартфони)
- Роботу з дизайн макетами у Figma
- Розуміння принципів проектування та розробки сайтів та інтерфейсів
Упевнені, якщо ви зараз намагаєтеся зіставити кольори з популярними брендами, то переконайтеся, що саме такі асоціації у вас і виникають. Молодіжна «помаранчева» Fanta, романтичні «червоні» цукерки Raffaello, безпечний та надійний Samsung. Приклади можна перераховувати безкінечно.
Теорія кольору та її застосування в дизайні – це справді цікаво! Тому ми і приділяємо їй чимало часу під час курсу "Web-дизайн з нуля до крутого портфоліо". Запрошуємо вас на навчання. Пройдіть пробний урок безкоштовно і переконайтеся, що веб-дизайн - це куди цікавіше, ніж багато хто думає!
