Цвет — мощный инструмент. Он задаёт настроение, направляет внимание, делает макет живым. Но в руках неопытного дизайнера цвет легко превращается в хаос: слишком много оттенков, кислотные сочетания, нулевой контраст. В итоге дизайн выглядит не стильным, а перегруженным и нечитабельным.
Вот три главные ошибки при работе с цветом и способы их исправления.
1. Слишком много цветов
Новички часто думают: «Чем больше красок, тем интереснее». В реальности это приводит к визуальному шуму.
✅ Как исправить?
Используйте 3-5 основных цветов:
- Главный (primary) — ключевой акцент, например, для кнопок.
- Вторичный (secondary) — дополняет основной, но не перетягивает внимание.
- Фоновый (background) — обычно светлый или тёмный, нейтральный.
- Текстовый (text) — чёрный, белый или темно-серый для хорошей читабельности.
- Дополнительный (accent) — для небольших деталей, подчёркивающих смысл.
📌 Пример: Посмотрите на дизайн Apple (избитый пример, но рабочий). Минимум цветов, но выглядит дорого и чисто.
2. Неправильный контраст
Когда текст сливается с фоном или акцентные элементы не выделяются — это не дизайн, а испытание для глаз.
✅ Как исправить:
-
Проверяйте контраст по WCAG (уровень AA – минимум 4.5:1 для текста).
-
На светлом фоне текст должен быть тёмным, на тёмном — светлым.
-
Избегайте светло-серых кнопок с белым текстом — их сложно заметить.
📌 Инструмент: Используйте Contrast Checker для проверки.
3. Отсутствие цветовой логики
Когда нет системы, кнопки на разных страницах могут быть разного цвета, а акценты теряются среди случайных оттенков.
✅ Как исправить:
- Установите цветовую иерархию: главный цвет для кнопок, один оттенок для заголовков, другой для ссылок.
- Используйте готовые палитры (например, Coolors или Adobe Color, Tailwind).
- Если сомневаетесь — начните с монохромной или нейтральной гаммы (чёрный, белый, серый + 1 акцентный цвет).
Вывод
Цвет — это не просто украшение, а инструмент управления вниманием. Минимум оттенков, хороший контраст и чёткая система — вот что делает макет стильным и удобным.
