Як правильно обрати кольори для сайту?
Є чотири речі, які відрізняють професійний дизайн сайту від неохайного. Це зручна навігація, ритм блоків, розміри шрифтів та поєднання кольорів. І якщо з першими трьома елементами можна впоратися логічним шляхом, то за кольори, здавалося б, відповідає гарний смак – створити колірні схеми для сайту може тільки дизайнер.
Це не так.
Вибір кольорів підпорядковується доступним для розуміння правилам. У цій статті ми розповімо про принципи поєднання кольорів, застосування кольорів у дизайні сайту, запропонуємо сервіси для формування колірних гам і дамо кілька корисних порад. Ви з усім впораєтесь, обіцяємо.
Поєднання кольорів у палітрі для сайту
Усі відтінки в колірній схемі вашого сайту врівноважуються або доповнюються. Кольори в такій палітрі поділяються на два види: основні та додаткові.
Основні кольори можуть з’явитись у фоні, меню навігації або формах зворотного зв'язку. Додаткові кольори працюють як акценти – вони привертають увагу. Наприклад, якщо застосовані в іконках. На сторінці роль кольорів може змінюватись з часом.
Найлегше зрозуміти, з чого складається палітра кольорів для сайту можна, подивившись на колірне коло. Кожна точка по периметру кола позначає напрямок відтінку кольору. Біля краю кольори насичені. У міру наближення до центру відтінки стають дедалі легшими.
Одне із найпростіших поєднань кольорів – це комплементарні кольори. Два протилежні кольори разом створюють баланс. Поєднань кольорів більше, ніж ми перерахуємо (наприклад, поєднання кольорів на основі квадрата або прямокутника), але зараз ми розглянемо лише основні принципи, які визначають поєднання кольорів у палітрі.
Для всіх прикладів ми використали шаблони, створені нашими дизайнерами. Ви можете користуватись ними безкоштовно після реєстрації на Weblium.
Монохроматичне поєднання. Це безпрограшний варіант – особливо якщо у вас є брендовий колір. У такому поєднанні ви обираєте один колір (тому "моно"), і в дизайні застосовуєте його більш або менш світлі відтінки. Завжди пам'ятайте, що вам потрібно стежити за кольоровим контрастом. Блоки та елементи повинні відокремлюватися один від одного.
Аналогова колірна схема. У такому випадку ви берете один колір як основний, а кілька тих, що поряд із ним у колірному колі, як допоміжні. У кожному окремому блоці на сторінці сайту окремі кольори можуть змінювати роль: допоміжний перетворюється на основний, основний – на допоміжний.
Комплементарні кольори. Два протилежні кольори створюють сильний контраст. На одному екрані бажано не розміщувати ці кольори в однаковій кількості, інакше відвідувач не зможе сфокусуватись на головному. На сторінці ви можете чергувати насичення дизайну кожним із кольорів.
Розширена комплементарність. Як і в наведеному вище випадку два кольори знаходяться у внутрішньому протиборстві, але тепер в одного з кольорів є помічники. Розташовані поруч у колірному колі відтінки створюють плавні переходи, а до них у контрастній опозиції завжди один і той же колір.
Гама на основі тріади. Три кольори відокремлені на колірному колі однаковим кроком. Кожен із кольорів них однаково потужний, але залежно від ваших завдань ви обираєте, який із них буде основою для усього дизайну. Другий колір створює додаткову динаміку, але не відволікає увагу. І лише третій акцент вкраплює різноманіття. На це можна подивитись як на співвідношення 60, 30, 10 % відповідно.
Зверніть увагу, що колірна гама для сайту повинна містити нейтральні та приглушені відтінки. Такі кольори потрібні, щоб ваші сторінки були комфортними для перегляду.
Підбір кольорів для сайту: брендбук, конкуренти, сервіси
Створення палітри сайту схоже на роботу художника. Але замість фарб у вас коди кольорів, а замість контурів блоки та елементи. І як у будь-якого митця у вас буде трохи вагань: з чого почати?
Брендбук. Якщо у вас є найпростіший опис візуального аспекту бренду – це вже непоганий початок. Відкрийте присвячену вашим фірмовим кольорам сторінку брендбука та роздивіться матеріали, які створили дизайнери.
Якщо кольори для сайту надто інтенсивні, розширте палітру. Наприклад, у вас є світлий насичений синій. Цей колір з'явиться у логотипі та окремих акцентах. Додайте до нього темний синій середньої насиченості. Цей колір ви застосуєте, наприклад, у іконках. Ненасичений синій світлий відтінок можете використати у тлі сторінок.
Конкуренти. Не завжди потрібно робити інакше, іноді достатньо виваженого варіанта. Шукайте натхнення у конкурентів. Відкрийте їхні сайти – вивчіть, які палітри вони використовують. У результаті ви отримаєте брендовий зріз. Його не обов'язково візуалізувати – але графічно він виглядає так.
Припустимо, що у вашій категорії інші бренди використовують помаранчеві кольори. Відповідно, ви можете піти або схожим шляхом або, навпаки, всупереч правилам категорії.
Сервіси. Хочете, щоб технології трохи допомогли вам у творчості – скористайтеся онлайн-сервісами підбору кольорів для сайту. Їхні функції загалом схожі. Вони пропонують: Добірки готових гам з можливістю їх редагування.
- Добірки готових гам з можливістю їх редагування.
- Генератор випадкових поєднань кольорів з можливістю їх доналаштування.
- Автоматичне створення палітр на основі фото та ілюстрацій.
- Вибір типу гармонізації кольорів (аналогового, комплементарного, тріади тощо).
Ми рекомендуємо використовувати три безкоштовні сервіси: Сoolors, Adobe Color, Toptal.
У творчому процесі ніколи не забувайте про ідеального користувача. Дизайн у першу чергу повинен подобатись йому. Більше про аналіз цільової аудиторії ви можете дізнатися з нашого матеріалу. Також в дизайні сайту вам допоможе дошка настрою – мудборд, який містить у собі ідеї для дизайну. Більше про створення дошки настрою ви дізнаєтесь із нашої статті.
Поради щодо роботи з кольорами сайту
Спочатку мисліть без кольорів. Будь-який дизайн сторінки сайту починається з розподілу інформації на ній. У вашого ескізу має бути ритм – усі блоки повинні явно відокремлюватися один від одного. Як тільки ви створите основу, побачите візуальні плями. Далі просто додавайте в них кольори.
Порожні ділянки – відпочинок важливий. Уявіть собі романтичний фільм тільки про щасливе кохання героїв. Без розлук та сліз. Не дуже цікаво, правда? Так само і однотипний щільний дизайн відштовхує. Використовуйте колір час від часу та обирайте нейтральні фони. Тільки тоді колір запрацює.
Не створюйте ситуації колірної вібрації. Ви вже знаєте, що у палітрі обов'язково є не лише світлі насичені відтінки. Врівноважені кольори потрібні для гармонічного сусідства. Якщо ви обираєте два комплементарні кольори, розташовані на краях колірного кола, і розміщуєте їх поруч – з'явиться некомфортне інтенсивне поєднання.
Ієрархія є, і вона важлива. Завжди звертайте увагу, що використання кольору посилює певні елементи в дизайні. Наприклад, якщо ви зробите заголовок звичайного сірого кольору, а у змісті блоку використаєте яскраві кольори, заголовок загубиться на сторінці.
Колір важливий для кліків. Сучасний дизайн компактний і спонукає до дії. Коли ви додаєте на сайт кнопки, форми, FAQ або вкладки, робіть елементи взаємодії з ними контрастними. Наприклад, вся форма може бути у блакитних відтінках, а кнопка публікації форми – помаранчевою. Контраст кольорів приверне увагу та збільшить шанс на потрібні вам дії.
Ілюстрації та фото – вони теж у колірній справі. Обрані зображення або зроблені вами фотографії повинні бути у повній відповідності до обраної гами. Відтінки елементів та зображень також гармонують один із одним. Бажано, щоб у всіх фотографій була однакова кольорокорекція.
Використовуйте і спрощені палітри. Який би не був зручний інструмент дизайну, все ж хороший дизайн місткий у часі. Щоб прискорити роботу над сайтом, розділіть сторінки на дві категорії. В основних сторінках – головній чи про нас – використовуйте всю палітру кольорів. У другорядних – особливостях доставки чи гарантіях – застосовуйте гаму з кількох кольорів. Так дизайн всіх сторінок буде послідовним.
Робота з палітрою сайту на Weblium
На Weblium завдяки стилям сайту, що налаштовуються, ви можете повністю змінювати дизайн у кілька кліків. Стилі сайту дозволяють обрати шрифти для різних заголовків та текстів, встановити вигляд кнопок та створити палітру з п'яти кольорів. Додатково кольори можна застосовувати і в меню управління окремими елементами.
Щоб швидко підібрати кольори для вашого сайту на Weblium, зробіть кілька природних кроків:
- Оберіть свій безкоштовний шаблон або зробіть ескіз сторінки власноруч.
- У стилях сайту застосовуйте готові палітри та дивіться на результат.
- Зупиніться на потрібних кольорах та відкоригуйте палітру.
- Проаналізуйте кольори в блоках і елементах та налаштуйте остаточно їх кольори.
- Не забувайте, що найкращі кольори для фону нейтральні.
Ви можете безкоштовно вичити можливості нашого конструктора сайтів. Усі базові можливості у ньому вже є. Можливо, ескіз сторінки – лише початок. Він стане вашим новим чудовим сайтом.