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

С чего начать?

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

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

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

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

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

Это соотношение предполагает использование основных (или нейтральных) цветов в 60% случаев, вторичных цветов в 30% , а затем для действительно бросающихся в глаза элементов фокусировки 10% .

Теперь в сторону теории, давайте посмотрим, как эта новая информация объединяет наши цвета пропорционально 60%, 30% и 10%. 60% оранжевого, 30% не совсем желтого белого и черного, 10% красного и бирюзового.

Создадим несколько квадрантов!

Вы спросите, а что такое квадрант?

Квадрант - это и исследование, и процесс создания правил для цветовых стилей.

Настроить квадрант действительно просто в любом инструменте дизайна, просто выполните следующие действия:

1. Вы начинаете с четырех квадратов одинакового размера, которые вместе образуют квадрат большего размера.

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

3. Теперь пришло время разместить несколько фигур в виде кнопок над каждым квадрантом, чтобы увидеть, какой цвет акцента или вторичный цвет, который вы выбрали, может создать достаточный контраст. Мы не должны упускать заголовки и абзацы как основные компоненты наших будущих проектов.

4. Пришло время  добавив более мелкие декоративные элементы, чтобы дополнить внешний вид.

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

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

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

Источник Muzli