Красный, белый, синий

Восемь тезисов о цветовых палитрах, которые должны знать все (включая не-дизайнеров)

Это перевод статьи. Оригинал.

Взаимодействие пользователя и интерфейса в значительной степени основано на его графических элементах, а цвет играет важную роль в этом процессе. Как сказал Пьер Боннард:

Цвет не добавляет красоты в дизайн — он его усиливает.

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

1. Ограничьте количество цветов

Цветовая палитра проекта должна быть сбалансирована. Чем больше цветов вы используете, тем труднее достичь баланса. Лучшие результаты достигаются при использовании максимум трех основных цветов. Согласно исследованию Университета Торонто, посвященному использованию Adobe Color CC, большинство опрашиваемых заявили, что предпочитают простые цветовые сочетания, основанные на двух или трех цветах. Если же вам нужны дополнительные цвета, можно использовать оттенки основных.

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

Цветовой круг из 12 секторов — очень полезный инструмент в создании палитр

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

  • Монохромные. Монохромные палитры проще всего создавать, потому что все они базируются на одном цвете и его оттенках. Монохромные цвета хорошо сочетаются, обладают успокаивающим эффектом.
Монохромная схема приятна глазу (особенно синие и зеленые оттенки). Как видно на примере Facebook, палитра выглядит чистой и элегантной
  • Аналоговые. Аналоговые цветовые схемы основаны на смежных цветах. Один цвет используется в качестве основного, в то время как остальные используются для “обогащения” схемы. Фишка в насыщенности используемых цветов. Например, Clear, основанное на жестовом управлении приложение с to do списками, использует яркие аналоговые цвета для визуального определения приоритетов текущего списка задач. В то время как Calm, приложение для медитации, использует аналоговые цвета синих и зеленых оттенков, чтобы пользователи сразу чувствовали себя спокойно и умиротворенно.
Аналоговые схемы используют три цвета, которые располагаются рядом друг с другом на цветовом круге из 12 секторов. Clear, приложение со списками дел, использует яркие энергичные аналоговые цвета для визуального определения приоритета текущих задач
Calm использует аналоговые цвета для создания настроения
  • Контрастные. В основном такие палитры состоят из двух контрастных цветов. Такая схема используется для привлечения внимания пользователя. При использовании контрастной схемы важно выбрать основной, доминирующий цвет и использовать контрастный ему цвет для акцентов. Например, когда мы смотрим на зеленую иконку sms-сообщений, красный ярлычок уведомления с количеством непрочитанных sms сразу притягивает взгляд.
Использование контрастных цветов — простейший способ выделить важную информацию
  • Пользовательские. Создание пользовательской цветовой схемы — не такая и сложная задачка. Существует простой трюк, который можно использовать для создания крутой цветовой палитры: просто добавьте яркий акцент в нейтральную палитру (например, 
    в монохромную схему).
Добавление яркого цвета в черно-белую палитру эффективно привлекает внимание

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

Лучшие цветовые палитры создает природа. Почему? Потому что такие цветовые схемы выглядят естественно. Чтобы вдохновиться, нам нужно всего лишь посмотреть покруг. Если вы видите красивый цвет, попробуйте создать схему на его основе. Или просто сделайте снимок красивого момента и создайте свою цветовую схему, основанную на нем.

Можно создать цветовую схему на основе снимка.

3. Попробуйте следовать правилу 60–30–10

Это правило поможет вам легко разобраться с цветовой схемой. Доля 60% + 30% + 10% предназначена для обеспечения баланса используемых цветов.
Эта концепция невероятно проста в использовании: 60% — основной цвет, 30% — вторичный цвет, а 10% — цвет для акцентов. Идея состоит в том, что вторичный цвет поддерживает основной, но достаточно отличается от него, чтобы цвета не сливались. Оставшиеся 10% — цвет для акцентов.

Такая техника позволяет взгляду комфортно перемещаться от одного важного пункта к другому

4. Начинайте создавать дизайн в оттенках серого

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

Ввод одного цвета очень хорошо работает

5. Избегайте использования чистого черного

В реальной жизни практически не существует частного чёрного. Все «черные» объекты вокруг нас отражают цвет, а это значит, что они не совсем черные, они темно-серые. Дороги не черные. Тени не черные.

Волк не черный. Он темно-серый (я бы сказала коричневый)

Когда вы помещаете чистый черный рядом с набором тщательно подобранных ранее цветов, черный перебивает все остальное. Он выделяется, потому что не является “естественным” цветом. В большинстве приложений, которые мы используем ежедневно, есть чёрный цвет, которые на самом деле не чёрный, а темно-серый. Например, самый темный цвет на верхней панели Asos не #000000, это #242424. Не забывайте добавлять немного цвета в чёрный.

Самый темный цвет на ASOS — вовсе не черный!

6. Иерархия элементов при помощи цветового контраста

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

7. Использование цвета для воздействия на эмоции пользователей

Известно, что цвета имеют свои значения и могут вызывать эмоции. Эти значения будут иметь непосредственное влияние на то, как пользователи будут воспринимать ваш продукт.
Когда вы выбираете цветовую палитру для своего приложения или сайта, нельзя думать только о том, как все выглядит — вы должны также думать о том, какие эмоции вызывает цвет. Цвета, которые вы выбираете, могут работать как на, так и против имиджа бренда, который вы создаете. Я составил краткое руководство по основным ассоциациям с каждым цветом (на западе).

Красный, Оранжевый, Желтый

  • Красный (страстный, мощный, опасный, важный): Красный — чрезвычайно стимулирующий цвет. Он создает впечатление скорости и силы. Он известен как цвет энергичности. Доказано, что он вызывает эффекты улучшения циркуляции крови и повышения метаболизма. Вот почему, когда люди видят красный, они воспринимают красные объекты быстрее. Использование красного — хороший способ привлечь внимание пользователей или выделить требующий внимания элемент.
  • Оранжевый (игривый, энергичный, привлекательный, дешевый): Оранжевый — теплый и яркий цвет. Он обладает энергичной аурой и способен создать “теплый прием” для ваших пользователей. Некоторые исследователи считают, что оранжевый — “дешевый” цвет.
  • Желтый (веселый, дружелюбный, стимулирующий, внимательный): Желтый — чрезвычайно универсальный цвет в зависимости от того, какой оттенок вы выбираете. Светло-желтый связан с солнцем и несет позитив и тепло. Темные оттенки желтого (как античное золото) создают впечатление старины. Более темные оттенки желтого часто ассоциируют с мудростью.

Зеленый, синий, фиолетовый

  • Зеленый (естественный, безопасный, свежий): зеленый цвет отражает в первую очередь близость к природе и экологичность. Также он означает рост, и именно поэтому зеленый цвет часто связывают с бизнесом.
  • Синий (успокаивающий, ответственный, надежный, надежный): Синий цвет часто ассоциируется со спокойствием и расслаблением. Также его связывают с силой и надежностью, вызывающими чувство доверия и показывающими профессионализм. Синий излучает чувство внутренней безопасности. Банки и технологические компании часто используют этот цвет. Гиганты социальных сетей, такие как Facebook, Twitter и LinkedIn, также используют синий цвет.
  • Фиолетовый (роскошный, таинственный, романтичный, духовность): Исторически связанный с королевской семьей, фиолетовый цвет намекает, что предлагаемый продукт относится к премиум-категории.

Розовый, Черный, Белый, Серый

  • Розовый (женственный, невинность, молодость): Розовый наиболее известен своими ассоциациями с женственностью.
  • Черный (мощный, сложный, таинственный, острый): Черный привлекает внимание быстрее, чем другие цвета, даже чем красный. Вот почему он чаще всего используется только для текста и акцентов.
  • Белый (чистота, здоровье, чистота, невинность): Белые акцентирует внимание на цветах вокруг него, что делает его хорошим выбором для вторичного цвета.
  • Серый (нейтральный, формальный, изысканный, стерильность): Серый представляет нейтралитет, он может принимать характеристики черного или белого. При использовании в качестве основного цвета это создает впечатление формальности.

Важно отметить, что значение цветов может варьироваться в зависимости от культуры и обстоятельств. Подробнее об этом читайте в статье «Символизм цветов и цветовых значений во всем мире» (английский)

8. Сделайте свой дизайн доступным

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

Избегайте использования цвета в качестве индикатора
Примерно 8% мужчин и 0,5% женщин страдают от разных форм дальтонизма. Это 1 из 12 мужчин и 1 из 200 женщин. Хотя существует несколько форм заболевания, красно-зеленая цветовая слепота является наиболее распространенной. Человек, страдающий такой формой дальтонизма, обычно испытывает проблемы с различиями оттенков как красного, так и зеленого.

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

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

Избегайте низкой контрастности текста

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

Проверьте контраст и убедитесь, что цвета фона и переднего плана отображаются достаточно контрастно для человека с дальтонизмом или с плохим зрением. Это не так сложно — все, что вам нужно сделать, это проверить коэффициент контрастности. Контрастные соотношения показывают, как отличается цвет от другого цвета (обычно это 1:1 или 21:1). Чем выше разница между двумя числами в соотношении, тем больше разница в относительной яркости между цветами. W3C рекомендует следующие коэффициенты контрастности для основного текста и изображения:

  • Небольшой текст должен иметь коэффициент контрастности не менее 4,5:1 по отношению к фону.
  • Большой текст (при 14 pt bold / 18 pt regular и up) должен иметь коэффициент контрастности не менее 3:1 по отношению к фону.

Хорошие новости — вам не нужно проверять все вручную! Используя инструмент Color Contrast Checker, вы можете проверить свою работу всего за несколько кликов.

Бонус: основные инструменты для UX-дизайнеров

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

Adobe Color CC
Adobe Color CC (ранее известный как Kuler) — отличный инструмент для поиска, изменения и создания цветовых схем. Каждый цвет на палитре может быть изменен или выбран в качестве базового цвета несколькими кликами. Палитры могут быть сохранены и добавлены в библиотеку, и существует множество готовых цветовых схем, созданных пользователями:

Dribbble Search-by-color
Если захотите посмотреть, как работают с каим-то определенным цветом другие дизайнеры, идите на dribbble.com/colors

Material Design
Фантастическую цветовую палитру, которая могут использоваться для иллюстрации или при разработке бренда. Все цвета в этой палитре гармонично взаимодействуют друг с другом.

ColorZilla
ColorZilla — это расширение, доступное для Google Chrome и Mozilla Firefox, которое включает в себя множество связанных с цветом инструментов, включая подборщик цветов, пипетку, генератор градиентов CSS.

Coolors.co
Coolors — мощный инструмент для создания палитр. Вы можете заблокировать любой цвет и нажать пробел, чтобы создать новую палитру вокруг заблокированного цвета. Самое крутое в том, что все цвета можно корректировать!

Одним из моих любимых способов создания цветовой схемы является использование фотографии. Coolors позволяет загрузить изображение и сделать на его основе цветовую палитру.

Симулятор цветовой слепоты в Adobe Photoshop
С помощью Photoshop вы можете проверить инклюзивность вашего дизайна. Просто перейдите в View> Proof Setup, а затем выберите один из двух типов дальтонизма (Protanopia-type или Deuteranopia-type).

NoCoffee Vision Simulator для Chrome
Во избежание проблем с доступностью дизайна, при проектировании рекомендуется предусматривать цветовую слепоту. NoCoffee Vision Simulator может использоваться для имитации дальтонизма и плохого зрения. Например, используя параметр «Недостаток цвета» «Deuteranopia», вы можете просматривать веб-страницы в оттенках серого. Этот инструмент поможет вам сделать ваш дизайн доступным для пользователей с нарушениями зрения.

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

Like what you read? Give Таня Кейко a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.