Цвет — это первое, что считывает мозг зрителя. Еще до того, как пользователь прочтет ваш гениальный заголовок, он уже почувствует: «здесь круто» или «здесь дешево». Удачная палитра способна вытянуть даже слабый макет, а плохая — убьет самую дорогую и стильную типографику.
Но как подбирать цвета, если нет художественного образования? В этом гайде мы разберем три кита дизайна: пропорции, инструменты и психологию ниши.
Золотое правило баланса: 60–30–10
Замечали, что работы новичков часто выглядят «пёстро» или «грязно»? Это происходит, когда цветов слишком много или они начинают спорить за внимание зрителя.
Чтобы этого избежать, используйте формулу интерьерных дизайнеров. Она безотказно работает в вебе, презентациях и графике.
Как работает формула:
- 60% — Основной цвет (Base). Это ваш «холст». Чаще всего здесь живут нейтральные оттенки: белый, светло-серый, бежевый или глубокий темный (если вы делаете Dark Mode). Этим цветом мы заливаем фон и создаем воздух.
- 30% — Вторичный цвет (Secondary). Цвет бренда. Им мы выделяем заголовки, крупные плашки, меню, иконки и футер. Он задает настроение и характер проекту.
- 10% — Акцентный цвет (Accent). Самый яркий, сочный и «вкусный». Используем его строго дозированнодля целевых действий (CTA): кнопки «Купить», активные ссылки, важные уведомления.
Лайфхак: Если кажется, что трех цветов мало и дизайн выглядит скучно, разбавляйте их оттенками. Светло-синий и темно-синий — это технически всё те же «30%», но визуально дизайн становится глубже и дороже.
Как подобрать идеальный акцент?
Как найти тот самый цвет для кнопки, чтобы она «горела» на фоне, но не выжигала глаза пользователю? Тут нам на помощь приходит цветовой круг Иттена.
Способ 1: Комплементарная схема (Игра на контрасте)
Идеально для призывов к действию. Берем основной цвет (например, синий) и смотрим, что находится ровно напротив него на круге. Это оранжевый. Эти цвета максимально усиливают друг друга.
- Зеленый ↔ Красный
- Фиолетовый ↔ Желтый
Способ 2: Аналоговая схема (Соседи)
Подходит для спокойных, «лайтовых» интерфейсов, где не нужен агрессивный маркетинг. Берем цвета, которые стоят рядом.
- Синий + Голубой + Бирюзовый.
- Оранжевый + Желтый + Лаймовый.
Топ-3 сервисов для работы с цветом
Не нужно подбирать цвета на глаз. Используйте инструменты, которыми пользуются профи:
- Coolors.co — самый популярный генератор. Просто жмите «Пробел», и он сам соберет гармоничную палитру. Понравился цвет? Блокируете его «замочком» и подбираете остальные под него.
- Adobe Color — профессиональный комбайн. Позволяет строить палитры по науке (триада, монохром, комплементарные) и проверять контрастность.
- Material Palette — мастхэв для UI-дизайнеров. Выбираете два цвета, а сервис генерирует полную палитру для интерфейса: какой цвет взять для текста, какой для фона, а какой для иконок.
Психология цвета: Как попасть в нишу?
Дизайн — это не просто красивая картинка, это решение бизнес-задачи. Странно делать сайт ритуальных услуг в розовом цвете или надежный банк в грязно-коричневом. Цвета вызывают мощные подсознательные ассоциации.
🔵 Синий
- Эмоции: Доверие, спокойствие, технологии, логика, безопасность.
- Где использовать: Банки (VTB), IT-сектор (Intel, Samsung), Медицина, Юриспруденция.
- Осторожно: Не используйте в еде (синий подавляет аппетит).
🔴 Красный / Оранжевый
- Эмоции: Энергия, страсть, срочность, аппетит, действие.
- Где использовать: Фастфуд (McDonalds, Burger King), Ритейл (распродажи), Спорт, Авто.
- Осторожно: Может вызывать тревогу. Используйте дозированно (те самые 10% акцента).
🟢 Зеленый
- Эмоции: Природа, здоровье, рост, деньги, свежесть.
- Где использовать: Эко-товары, ЗОЖ, Финансы (Сбер), Фармацевтика, Недвижимость.
⚫️ Черный / Золотой
- Эмоции: Премиум, люкс, тайна, элегантность, власть.
- Где использовать: Дорогие авто, Часы, Брендовая одежда, Элитная недвижимость.
- Нюанс: Такой дизайн требует много «воздуха» и очень качественных фотографий.
🟣 Фиолетовый
- Эмоции: Креативность, мудрость, магия, ностальгия.
- Где использовать: Творческие студии, Сладости (Milka), Бьюти-сфера, Эзотерика.
Итог
Правила нужны, чтобы их знать, но иногда — нарушать. Если хотите выделиться среди 10 синих банков — сделайте желтый (как Тинькофф или Райффайзен). Но делайте это осознанно, понимая психологию своей аудитории!
Понравилась статья? Сохраняйте себе шпаргалку и подписывайтесь! В моих соцсетях я делюсь внутрянкой работы дизайнера, шаблонами и лайфхаками: 👉 Telegram | Vkontakte