Как работать с цветом в интерфейсах: советы дизайнера

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

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

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

Итак, 60% для доминирующего оттенка, 30% для вторичного цвета, 10% для акцента.

Нажмите, чтобы увеличить (в новом окне)

Значение цвета

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

Нажмите, чтобы увеличить (в новом окне)

Красный: страсть, любовь, опасность

Синий: спокойствие, ответственность, безопасность

Черный: тайна, элегантность, зло

Белый: чистота, молчание, непорочность

Зеленый: свежесть, природа, обновление

Можете познакомиться с более подробным списком по ссылке.

Сначала оттенки серого

Обычно на ранних этапах разработки дизайна нам очень нравится играть с цветами, иногда – часами выбирать оттенок или цветовое сочетание. Однако такой подход почти никогда себя не оправдывает.

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

Нажмите, чтобы увеличить (в новом окне)

Держитесь подальше от чистого серого и чистого чёрного

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

Например, самая «чёрная» точка на этом фото – вовсе не #000, а #0A0A10

Верьте в природу

Лучшие цветовые сочетания встречаются в природе, и это правда. Они всегда будут выглядеть приятно и естественно, и лучшее во всём этом – палитра постоянно меняется. Просто осмотритесь, и вдохновение придёт само.

Сохраняйте контраст

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

Нажмите, чтобы увеличить (в новом окне)

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

Если говорить о дизайне User Interface (UI), то есть отличный сайт со всем необходимым – dribbble.com/colors. В том числе на нём можно воспользоваться поиском по цветам, когда-либо использованным в дизайне и интерфейсах профессионалами. Интерьеры, мода, видео – вдохновиться можно чем угодно. Главное – не воспринимать ничего пассивно, а сохранять и запоминать хорошие цветовые сочетания.

Нажмите, чтобы увеличить (в новом окне)

Инструменты

Coolors.co

Выбираете цвет, нажимаете пробел, и получаете полноценную палитру с возможностью мгновенного шаффла. Если необходимо – загружаете изображение, и алгоритм берёт палитру из него. Однозначно: самое удобное и функциональное приобретение для любого дизайнера.

Kuler

Инструментарий от Adobe, который доступен как отдельно в браузере, так и как часть настольной версии редактора. Если использовать Kuler вместе с Photoshop, можно легко экспортировать цветовую схему без долгих манипуляций.

Нажмите, чтобы увеличить (в новом окне)

Paletton

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

Нажмите, чтобы увеличить (в новом окне)

Designspiration

Предположим, у вас уже есть палитра, но нет примеров её использования, вот тут-то на помощь и приходит Designspiration. Можно выбрать до 5 цветов и искать изображения, соответствующие запросу. Подходит и для вдохновения, и для конкретных нужд по поиску иллюстраций.

Shutterstock Lab Spectrum

У сервиса стоковых фотографий Shutterstock есть очень удобный поиск по определённому тону. При этом необязательно что-то покупать – для подбора палитры вполне хватит превью с водными знаками.

Нажмите, чтобы увеличить (в новом окне)

Tineye Multicolr

А вот Tineye пошёл ещё дальше, и добавил возможность указать процентное соотношение цветов. База данных из 10 миллионов изображений с сайта Flickr полностью (или почти полностью) покрывает нужды, пожалуй, любого дизайнера – просто попробуйте.

Заключение

Цвет – сложная наука, особенно в эпоху цифровых технологий. Но есть решение – больше практикуйтесь, вдохновляйтесь и не бойтесь экспериментировать. Позвольте себе поиграть с цветами и получить от этого удовольствие – и рано или поздно это принесёт свои плоды.

Источник

Материалы по теме:

Инструкция: как проверить продуктовые гипотезы на этапе дизайна

Каким был бы мир, если бы все учились дизайн-мышлению

Делай красиво: как визуализировать самые сложные данные

Дизайнер выяснил, какой цвет самый популярный в интернете