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

Ник Бабич (Nick Babich)

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

1. Найти вдохновение
2. Создайте свою собственную цветовую схему
3. Сделать доступной цветовую схему

1. Найдите вдохновение

Природа

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

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

Behance

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

Цвета Dribbble

Dribbble — одно из лучших мест для вдохновения для UI. У него есть инструмент для поиска по цветам, поэтому, когда вы хотите сделать визуальное исследование того, как особый цвет использовался другими дизайнерами, перейдите к dribbble.com/colors и выберите желаемый цвет.

Вы также можете указать минимальный процент цвета, который содержит шот (например, шот составляет 30% синий).

Designspiration

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

Tineye Multicolr

Tineye поможет вам найти сочетание цветов на фотографии или даже указать количество каждого из них (соотношение цветов). Этот сайт использует базу данных из 20 миллионов изображений Creative Commons от Flickr. Это, вероятно, самый быстрый способ получить бесплатные изображения в идеальной цветовой комбинации.

Colorzilla

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

Shutterstock Spectrum

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

2. Создание цветовой схемы

Material Design Color Tool

Material Design Color Tool позволяет создавать, совместно использовать и применять цветовые палитры к пользовательскому интерфейсу, а также измерять уровень доступности любой цветовой комбинации.

Coolors.co

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

С помощью этого инструмента также можно загрузить изображение и сделать из него цветовую палитру.

Adobe Color CC

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

Создание цветовых схем из существующих изображений:

Или просмотрите тысячи цветовых комбинаций из сообщества Kuler в разделе «Explore»:

Вы так же можете экспортировать цветовую схему прямо в Photoshop, Illustrator и InDesign.

Paletton

Paletton похож на Adobe Color CC. Разница в том, что вы не ограничены только 5 тонами и можете играть с дополнительными тонами.

3. Доступность цвета

Визуальные проблемы более распространены, чем большинство из нас понимают. Более 285 миллионов человек во всем мире слабовидящие. У многих более низкие или средние визуальные трудности. Необходимо убедиться, что выбранная цветовая схема доступна для пользователей с нарушением зрения.

WebAIM Color Contrast Checker

Некоторые цвета хорошо сочетаются друг с другом, а другие сталкиваются. Удивительно, сколько сайтов и приложений не проходят тест AA. Не будь одним из них! Очень важно проверить цвета пользовательского интерфейса для обеспечения цветовой контрастности при использовании с текстом. Используйте программу проверки цвета WebAIM для проверки цветовых комбинаций.

Coolors

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

Измените режим «Обычный» на тот, который вы хотите протестировать.

И вы увидите, как человек с дефицитом цвета увидит вашу цветовую схему.

NoCoffee Vision Simulator for Chrome

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

Вывод

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

У вас есть рекомендация по инструментам для выбора цветовых схем? Расскажите мне в разделе комментариев ниже!
Спасибо!

Оригинальная напубликация на babich.biz | Перевел L4bor