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

Введение в Open Color Tools, набор инструментов для изучения, определения и управления системами цвета.

В конце 50-х годов прошлого столетия, Pepsi уступила часть рынка Coca Cola в юго-восточной Азии из-за смены цвета своих автоматов с “царственно” синего на “ледяной” синий. Когда компания UPS заходила на рынок Германии в 1976, это вызвало сопротивление у местных потребителей. Возникла необходимость заменить цвет униформы с коричневого на зеленый. Пассажиры были в замешательстве, когда персонал United Airlines приветствовал их белыми гвоздиками на первых рейсах из Гонконга. Авиакомпания быстро заменила их на красные цветы. В некоторых частях Азии, светлые оттенки синего ассоциируется с печалью. Коричневая униформа напомнила немцам об CC, военизированное крыло нацистской партии, носившими название “коричневые рубашки”. А многие пассажиры авиакомпании United Airlines думали о смерти, когда видели белые цветы.

Цвет имеет значение

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

Что в названии?

“Синий” и “серый” - это просто названия, которые описывают определенный диапазон цветового спектра. Восприятие цветов может сильно отличаться. Если вы когда-то красили комнату цветной краской, вы поймете, о чем идет речь. Стены выглядят по-разному, в зависимости от степени освещения. При плохом освещении, бледно серый цвет выглядит намного темнее, в то время, как при хорошем освещении он почти белый. Вероятнее всего, вы также участвовали в разгоряченных спорах с человеком, который называл предмет желтым в то время, как предмет был (очевидно же!) зеленого цвета. Для людей, страдающих дальтонизмом, названия цветов еще более бесполезны. “Красный” - всего лишь пустое слово.

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

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

Цвета как материал

Цвет - это материал, с которым работает дизайнер. Как и в любом другом деле, понимание своего материала - очень важно. Однако, современные средства не отражают важность цвета в качестве материала. Основной запас такого материала выглядит как обычный список используемых цветов. Sketch извлекает цвета в “цвета документа”. Также, есть показ “недавних цветов”, что является списком часто используемых цветов и того, как они используются в вашем документе : Колориметр в Sketch В Sketch нет возможности назвать или структурировать ваши цвета. Именно поэтому, мы решить создать Open Color Tools. Для этого, мы взяли расширение в Sketch и кастомный колориметр в Mac OS X. Приложение Open Color Companion позволит вам создать палитры цветов в гибком и хорошо описанном формате. Затем, Color Picker отобразит их совместно с названиями и группами, и позволит вам выбрать нужные цвета. Open Color Tools. Слева находится список всех палитр в библиотеке. По центру - редактор кода. Справа - панель предварительного просмотра, которая показывает, как отображается палитра в колориметре. Дополнительно, расширение Sketch содержит команды, при помощи которых, вы можете узнать, какие цвета используются в выбранном слое: Быстрый показ используемых цветов в выбранном слое. Как только вы обогатите ваши цвета при помощи собственных названий, ваш материал заметно изменится. Добавление визуальных имен, придаст вашим образцам цветов особый контекст и предназначение. Например, у вас есть некоторые цвета бренда. Скажем, синие и серые цвета в вашем дизайне. Вы сможете отслеживать ваши цвета и понимать, как вы их используете, если дадите им названия и сгруппируете по визуальным характеристикам: Слева: палитра с тремя наименованиями цветовых групп. Группировка цветов позволяет наполнить их смыслом. Справа: Google Material Design имеет более сложную систему цветовых групп, где у цветов есть названия, а оттенки этих цветов различаются по номерам. Например: Material Pink 500 (розовый) и Material Purple 500 (пурпурный), будут иметь одинаковые свойства, но различаться в оттенках. Приложение Open Color Companion также позволяет вам преобразовывать ваши палитры или экспортировать их в различные форматы: Слева: трансформация, безопасный способ оптимизировать код вашей палитры Open Color. Например, избавиться от дубликатов или изменить названия. Справа: Экспорт, простой и понятный способ экспортировать ваши палитры в различные форматы (SCSS, JSON или Swift)

Осознанный цвет в действии

Скажу вам больше. Расширение Open Color в Sketch, позволит вам закрепить значимые названия в слоях: вместо определения свойства как “белый с оттенком”, вы сможете назвать его “цвет фона хедера” или просто “фон хедера”. Представьте себе, что приложение содержит разные цветовые схемы: светлая “дневная” и темная “ночная”. Вы называете элементы как “фон хедера” или “заголовок” и присваиваете их соответствующим элементам UI. В зависимости от используемой темы, они могут иметь различные свойства цвета: Слева: окно расширения в Sketch для привязки названия цвета к его свойствам. По центру: интерфейс Reader App в Sketch, содержит прямоугольный слой, наполнение цветом которого, является "Фон хедера". Справа: Выбор определенного цвета в Mac OS X колориметре Open Color Tools. Таким образом, значение цвета перестает быть объединенным с его свойством и может легко быть заменено. Так же, как и цветовые схемы. Соответственно, теперь это будет дело нескольких секунд, хотя ранее могло занимать несколько часов: Слева: тема интерфейса в рабочей области Sketch, справа - соответствующий раздел в палитре, показанный в колориметре. Также, вы можете использовать переключение тем для понимания, как выглядят различные оттенки цветов в вашем дизайне:

Инструменты Open Color для каждого

Если вас заинтересовал данный материал, присоединяйтесь к нам для улучшения работы с цветами, делая такую работу более осознанной. Взгляните на Open Color, набор дизайн инструментов для исследования, определения и управления системами цветов. С нетерпением ждем ваших комментариев, предложений и вопросов. Также вы можете скачать показанные выше документы и палитру цветов в Open Color, в формате .oco: A Reader Themes Demo.sketch A Reader Color Palette.oco Обратите внимание, что эти демо файлы будут работать только при наличии Open Color Tools, установленного на компьютер. Скачать пробную версию и купить программу можно здесь.

---

Перевод статьи precious design studio