Всё, что вам нужно знать о цвете в дизайне сайтов и приложений

Цвет в дизайне сайтов и приложений — один из самых мощных инструментов влияния на восприятие интерфейса. Правильно подобранная цветовая палитра сайта помогает выстраивать визуальную иерархию, направлять внимание пользователя и усиливать доверие к продукту. В UX/UI-дизайне цвет — это не просто эстетика, а важная часть пользовательского опыта.

Современные исследования показывают, что выбор цвета в интерфейсе напрямую влияет на скорость восприятия информации и поведение пользователей. Неправильно подобранные цвета могут ухудшить читаемость и увеличить когнитивную нагрузку, тогда как грамотная работа с цветом делает интерфейс интуитивным и понятным. В этом материале разберём всё, что нужно знать о цвете в UX/UI-дизайне.

А вы задумывались, как мы можем улучшить гармонию цветов в наших интерфейсах?

Если вы новичок в дизайне пользовательских интерфейсов или просто увлечены созданием цифровых продуктов, это может вам помочь.

В UX/UI цвет в интерфейсе работает как инструмент управления вниманием пользователя.

Давайте начнем с знаменитого Цветового Круга. Когда мы говорим о цвете, контрасте, гармонии, важно иметь это представление в голове:

Касательно цвета есть три важных понятия, которые стоит знать: Тон, Яркость и Насыщенность. Сейчас я поясню каждое из них 🙂

1. Тон

Тон — это цвет в естественном состоянии. Например, синий, зелено-жёлтый, жёлтый, красный и т.д., без каких-либо изменений в светлоте или темноте. Еще один пример, который поможет понять это, — определение тона как каждого цвета, который вы видите на цветовом круге, без каких-либо других изменений света и тени. Посмотрите на изображение ниже:

2. Яркость

Яркость — это количество света и тени в цвете. Чёткий пример из нашей повседневной жизни: видим предметы ближе к свету в белых тонах и другие вещи, находящиеся в тени, с более тёмными оттенками.

Когда мы идём, мы видим, как некоторые элементы меняют цвет утром и ночью. Например, гора имеет коричневый цвет, утром он имеет светлые тона (Свет), а ночью становится тёмным (Тень).

Если вы ближе к свету, то будут преобладать светлые тона, а если дальше от света, то будет больше тени.

В дизайне пользовательского интерфейса (UI) яркость играет важную роль, потому что правильное использование позволяет добиться хорошего контраста на нашем интерфейсе.

Яркий пример — это Material Design от Google. Они используют цвет, чтобы выделить важные элементы.

Яркость определяет количество света или тени в каждом цвете. Это помогает создать ощущение пространства. Если яркость цвета составляет 100%, это приводит к белому цвету. Если яркость цвета составляет 0%, это приводит к черному цвету. Надеюсь, данное изображение поможет вам 🙂

3. Насыщенность

Теперь давайте поговорим о насыщенности. Насыщенность — это интенсивность цвета. Когда мы увеличиваем насыщенность цвета, у нас появляется более яркий и насыщенный оттенок. Когда мы уменьшаем насыщенность цвета, у нас получается тусклый цвет. Пример: полное уменьшение насыщенности цвета приводит к серому цвету.

В мире печати мы не можем использовать слишком высокую насыщенность, потому что в реальном мире у нас есть ограничения в том, насколько мы можем усилить цвет. Например, при создании книги, постера. В цифровом мире у нас больше возможностей.

Реальная жизнь против цифровой жизни

Есть важный момент, о котором мы должны упомянуть, когда говорим о насыщенности в интерфейсах. В отличие от реального мира, где редко встречаются яркие и насыщенные цвета, в цифровом мире мы можем делать это, потому что мы используем RGB, а не CMYK. Вот почему очень важно использовать это ответственно.

Вернемся к основам

Когда речь заходит о цвете, еще одной важной темой является комбинирование цветов. Одна из вещей, которую я помню о этом, — мой курс по теории цвета, конкретно уроки о контрасте и гармонии. Контраст не всегда означает гармонию.

Для того чтобы создать гармонию между цветами, важно, чтобы между ними было равное количество цвета от другого.

Посмотрите на это изображение ниже. Как вы видите, противоположные цвета имеют больший контраст, в то время как близкие цвета имеют меньший контраст, и здесь более заметна гармония между ними.

Если вы хотите глубже разобраться в работе интерфейсов, рекомендуем изучить материал про психологию цвета в UX/UI, где подробно разобраны эмоциональные реакции пользователей, а также гайд по адаптивному дизайну сайта, который объясняет, как интерфейс ведёт себя на разных устройствах. Дополнительно будет полезна статья про UI-паттерны для начинающих дизайнеров.

Правило 60-30-10

Нет, это не измерения супермодели, а пропорции успешного сочетания цветов. Вы должны выбрать основной цвет и использовать его на 60% площади, второй цвет, который займет 30%, и последний цвет для оставшихся 10%. Да, всего лишь 3 цвета! Это то, что часто используется в дизайне интерьера.

Работая над дизайном интерфейса, важно помнить, что мы создаем свою гостиную, где каждый оттенок цвета, освещение и расположение должны быть идеальными и функциональными.

Как видно на изображении, используются три цвета: белый, розовый и зеленый, при этом зеленый цвет придает акцент. Если перенести эту метафору на дизайн интерфейса, цвет акцента можно определить как цвет нашего CTA (Call To Action).

Правильно выстроенная цветовая палитра сайта помогает быстрее ориентироваться в интерфейсе.

Вдохновляйтесь природой

А знали ли вы, что человеческий глаз может различить более 10 миллионов цветов? В природе и в том, что вы видите, всегда можно найти гармонию и контраст! Природа, объекты, животные, пространства. Все имеют цветовую палитру, вам просто нужно уделить этому внимание.

Тень никогда не бывает чёрной, а свет никогда не бывает белым 🤔

Очень распространенная ошибка в использовании света и тени — мы думаем, что для создания тени нам нужно использовать чёрный цвет с прозрачностью, а для света — белый с прозрачностью.

Если вы всё ещё не убеждены, просто взгляните на реальную жизнь: тьма всегда имеет оттенки базового цвета.

Тьма никогда не бывает чёрной, это оттенок цвета объекта, затенённого тонами яркости. Тень от лимона имеет очень тёмный зелёный цвет, почти черный, а тень от деревянной доски — очень тёмный коричневый, почти черный. Но это никогда не чёрный. Чёрный бывает только тогда, когда полное отсутствие света.

Используйте градации серого для проверки гармонии и контраста ваших цветов

При использовании ненасыщенных или серых оттенков мы исключаем гармонию цвета и оставляем лишь свет и тень. Свет и тень придают ощущение реализма и глубины.

После перевода в оттенки серого появляется разница между тонами (яркостью): у некоторых тон темнее, у других — светлее. Это создает ощущение гармонии и контраста между ними. Это пример того, что должно происходить.

Серые оттенки с цветовыми тонами

Современные интерфейсы чище и более белые, и еще один элемент становится важным — это типография. Но о типографии мы поговорим в другом посте, сейчас хочу сосредоточиться именно на цвете.

Тот, что слева, имеет чёрный цвет #000000, а другой — очень тёмно-синий цвет #15163D. Оба выглядят черными, но это не так. Почему это так важно? Взгляните на изображение ниже.

Оба имеют одинаковую прозрачность, но разные результаты. Один серо-синий, а другой — серо-голубой. Когда мы используем текст с оттенком какого-то цвета, мы предоставляем больше возможностей для гармонии с окружением. Помните, я говорил вам, что для гармонии между цветами необходимо, чтобы между ними присутствовало определенное количество другого цвета.

Оба выглядят как чёрный, но один имеет оттенки фиолетового, который является дополнительным цветом к жёлтому. Таким образом, мы добиваемся и контраста, и гармонии.

Так что плохо использовать чёрный и серый? Нет! Всё зависит от вашего намерения. Чёрный является нейтральным цветом и всегда хорошо сочетается с любым цветом. Но иногда, как в этом примере, если мы добавим другие цветовые оттенки, мы получаем другое ощущение цвета.

Тренируйте глаза! Найдите свет!

Точно так же, как мы ходим в спортзал, чтобы поддерживать тонус тела, мы должны искать вдохновение для тренировки глаз каждый день.

Многие из нас видят цвета, которые не настолько насыщены или ярки, и это нормально. Мир не идеален, как и цвета. Многие из нас привыкли к физическому миру, где мы использовали только CMYK, и где были ограничения в цветопередаче.

Когда мы находимся в цифровом мире, у нас есть множество возможностей в области цвета, и мы должны быть к этому готовы. Хорошее упражнение, которое я настоятельно рекомендую, — это ежедневно находить источники вдохновения. Как это сделать, Кристиан? У меня много дел.

Настройте свою собственную систему так, чтобы это казалось не задачей, а естественным процессом.

Грамотное использование цвета в дизайне сайтов — один из ключевых навыков современного UX/UI-дизайнера.

Итоги

Как и всё в этой жизни, искусство сочетания цветов требует практики. Начало может быть сложным и запутанным, но затем вы заметите, как становится проще. Никогда не прекращайте обучение и много практикуйтесь.