SOCIAL
PROJECT
Разумный и осознанный выбор цвета в дизайне

Разумный и осознанный выбор цвета в дизайне

  • 0 комментариев
  • 172 просмотров
  • 0 репостов
  • 0 лайков
  • 0

Давайте поговорим о важности цвета. Вместо скучной теории (ну кто ее читает) просто приведем яркие примеры «из жизни».

В конце 50-х гг. XX века в юго-восточной Азии Pepsi уступила часть рынка Coca-Cola из-за смены цвета своих автоматов с «царственно» синего на ледяной синий (в некоторых частях Азии холодные светлые оттенки синего ассоциируются с печалью).

А компании UPS, вышедшей на рынок Германии в 1976 г., пришлось заменить коричневый цвет униформы из-за недовольства местных потребителей (коричневый цвет принято связывать с нацистами, а коричневую униформу носили в СС, их еще называли «коричневые рубашки»).

Еще пример – компания United Airlines приветствовала пассажиров белыми гвоздиками на первых рейсах из Гонконга, что приводило последних в замешательство (белые гвоздики ассоциируются у жителей Азии со смертью и несчастьями). Авиакомпании пришлось быстро заменить их на красные.

Какой вывод можно сделать?

ЦВЕТ ИМЕЕТ ЗНАЧЕНИЕ

….и выполняет определенные функции. Например, один и тот же оттенок красного может использоваться как основной цвет бренда (Coca-Cola) или как элемент интерфейса, который привлекает внимание. Цвета вызывают у людей различные ассоциации, и это активно используется в рекламе.

Влияние цветов на дизайн

Цвета сильно влияют на создаваемый вами дизайн. Поэтому хорошие дизайнеры осознанно подходят к их выбору. То есть не просто создают красивые цветовые комбинации, но и целые системы цветов, которые учитывают различные аспекты – культурные, психологические, функциональные и контекстуальные. Для документирования таких систем есть хорошие инструменты – Zeplin, Avocode и Craft Library – наверняка вы о них знаете. Они дают отличную возможность извлекать цвета из существующих дизайнов и собирать их в совокупность образцов. На основе этого можно разработать названия цветов таким образом, чтобы сотрудники, работающие над проектом, лучше понимали основную идею и основу выбора конкретного цвета, и могли это применить в таблицах стилей (в CSS, BootStrap и т. д.).

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

Еще один полезный инструмент для этих целей – Sketch, который извлекает цвета в «цвета документа», и в котором есть показ «недавних цветов» – список часто используемых цветов и того, как именно они используются в вашем документе.


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

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

В приложении Open Color Tools вы сможете преобразовывать ваши цветовые палитры – выбрав трансформацию, можно легко оптимизировать их код, избавиться от дубликатов или изменить названия. Также вы сможете экспортировать палитры в различные форматы (SCSS, JSON или Swift).

Осмысленность цветовых решений

Расширение Open Color в Sketch также позволяет закреплять важные названия в слоях – вместо определения свойства типа «серый с оттенком» вы сможете назвать его «фон хедера» или «цвет фона хедера».

В приложении также есть разные цветовые схемы – светлая «дневная» и темная «ночная». Вы называете цвет «фон хедера» и присваиваете его соответствующему элементу UI – очень удобно!

Дополнительно можно переключать темы для понимания того, как выглядят различные цвета и их оттенки в вашем дизайне.

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


Вам понравилась статья? Поставьте оценку для рейтинга:

Комментарии (0)

Хотите оставить комментарий?

Получите консультацию
удобным для Вас способом!

Ответим в течении минуты!