С чем я столкнулся при работе с цветом. Проясняем нюансы работы с цветами, чтобы сделать цифровую среду более доступной

Представляем вашему вниманию статью, опубликованную ресурсом uxdesign.cc и переведенную с разрешения автора — Zain Adeel.

1.png

Цвет как инструмент

Большую часть своего времени мы погружены в цифровое пространство. Во всем, что встречается на нашем пути в этой среде, в качестве основного инструмента используется цвет.
Я дизайнер и работаю над созданием новых продуктов каждый день. Благодаря этому я осознал, сколько проблем может вызвать бессистемное использование цветов. Они теряют свое значение, если их применение сбивает с толку и вызывает головную боль. Разработка при этом замедляется и требует больше усилий, а для целевого пользователя продукт может выглядеть неодинаково на разных платформах.
Типичный признак неорганизованной дизайн-системы: при создании продукта задействованы несколько тональностей основного цвета.

2.png

Реальный пример

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


Когда нужна система

  • Ваш продукт используют более десяти человек?
  • Его функциональные возможности расширяются?
  • Ваша команда становится больше?
Если ответ на все вопросы — решительное «да», вашей команде нужна цветовая система.

Основы

Что такое хорошая цветовая система? Пожалуй, на этот вопрос нет однозначного ответа. Требования к интерфейсу непременно изменятся с приходом технологий AR/VR. А пока я считаю, что хорошая цветовая система:
  • доступна;
  • последовательна;
  • масштабируема.

Доступность
В основе цветовой системы должна лежать доступность.

Стандарт WCAG
Руководство по обеспечению доступности веб-контента (WCAG) 2.0 помогает сделать контент более доступным для людей с ограниченными возможностями (с нарушениями зрения, слуха и опорно-двигательного аппарата, с задержкой умственного развития и т. п.).
(Перевод Руководства по обеспечению доступности веб-контента (WCAG) 2.0 приведен по материалам данной страницы.Прим. ред.)

Цитата:
"1.4.3 Контраст (минимальные требования). Текст и текст на изображениях должны иметь коэффициент контрастности не менее 4,5:1, за исключением следующих случаев (уровень AA):

  • Увеличенный текст. Увеличенный текст и изображение увеличенного текста имеют коэффициент контрастности не менее 3:1.
  • Второстепенный текст. Текст или изображение текста, которые являются частью неактивных компонентов пользовательского интерфейса или же выполняющие исключительно декоративную функцию, или же невидимые для пользователей, а также являющиеся частью изображения, содержащего более важный контент, не требуют соблюдения коэффициента контрастности.
  • Логотипы. Требования по минимальному контрасту не относятся к тексту, который является частью логотипа или торговой марки."
3.png


Пример подходящего под стандарты WCAG оттенка (уровень AA), который можно использовать на белом и черном фоне

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

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

HSL (Hue, Saturation, Lightness)
Цвет для дизайнера в первую очередь определяется тоном.
В этой статье мы обозначаем цвета согласно цветовой модели HSL. HSL расшифровывается как hue (тон), saturation (насыщенность) и lightness (светлота). Я проиллюстрировал эту модель, адаптировав цветовую систему Манселла.
4.png

Изображение модели HSL при помощи цветовой системы Манселла

Если хотите прочитать больше о том, как работают разные цветовые модели, подробности в этой статье wikipedia.org.

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


5.png

Палитра тональностей фиолетового (тон: 269°), созданная путем варьирования светлоты в цветовой модели HSL

Названия цветов
Довольно часто для цветов используются творческие и оригинальные названия, однако в практических целях рекомендуется, чтобы названия были универсальными, упорядоченными и масштабируемыми. Для этого мы можем воспользоваться сложившимися практиками и создать понятную схему.
Я разделил цветовой круг на 12 секторов и обозначил их следующим образом:
6.png


Чтобы создать эффективную цифровую систему, можно взять за основу эти цветовые секторы и некоторые характеристики шрифта, например толщину начертания. Тогда тональности будут различаться так же, как различается толщина начертания шрифта — благодаря цифровым показателям (100, 200, 300, 500, 700, 800 и т. д.). Цифры отобразят, насколько светлая или темная та или иная тональность.
Самый простой вариант — использовать шкалу от 10 до 100, где каждые десять пунктов обозначают новую тональность. При этом несложно понять, что фиолетовый-10 светлее, чем фиолетовый-50. При таком подходе система расширяется предсказуемо.
7.png

3 тональности, обозначенные в зависимости от того, насколько они светлые/темные

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

Новые тональности впишутся в цифровую систему

Любой цвет будет легко назвать, запомнить и использовать снова.

От теории к практике
Используя знания, которыми поделился с вами, во второй части статьи я сформирую базовую цветовую систему. Она будет доступной, упорядоченной и масштабируемой. Более того, я подробно рассмотрю, как благодаря разным техникам можно находить тональности и создавать целостную цветовую палитру.
Я также приведу примеры использования своей цветовой системы и сравню ее с интерфейсами, при создании которых не учитывали фактор доступности. В наше время, когда портфолио состоят исключительно из шотов с Dribbble, пользователи каждый день страдают от неудачной работы по-настоящему хороших дизайнеров, которые просто недостаточно разбираются в доступности и цвете.
Я только начинаю погружаться в мир цвета, и мне еще многому предстоит научиться. Буду рад возражениям, обсуждениям и комментариям, которые помогут мне продвинуться и лучше понять цифровую реальность.
И самое главное: я написал эту статью прежде всего для того, чтобы поделиться открытиями с единомышленниками.
Вторая часть будет опубликована очень скоро.

За помощь со статьей особая благодарность Noor. И огромное спасибо моим коллегам из KeepTruckin. ❤

Подписывайтесь на меня в Instagram и на Facebook.







715 0 850 5
0
RENDER.RU