Новый подход к подбору цвета интерфейса

Дизайн
03.04.2020
486

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

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

Наименование цветов

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

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

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

Для названия цветов были использованы короткие и понятные названия, такие как фиалка, роза и подобные. Также мы учли, что для запоминания новых названий оттенков понадобится время и составили наглядный пример с диапазоном оттенков. Также было учтено то, что если в будущем будет необходим новый оттенок, то в таком случае для названия будут объединены наименования смежных оттенков (например, сине-зеленый, или желто- красный).

Для обозначения оттенков была выбрана простая шкала, в которой 0-это самый светлый оттенок цвета, и 100-самый темный его вариант. Таким образом была выработанная понятная для людей система цветов, где 60- это средне- красный оттенок и 10-это синий. Таким образом легко запомнить точные наименования цветов и их визуальную составляющую.

Выбор цвета

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

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

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

От цветового набора был необходим был в первую очередь «контроль», которого удалось достичь с помощью применения методов математики. В интерфейсах пользователей необходимо было применить равномерное использование светлых и темных оттенков и легкое управление ними. Таким образом в последствии был создан собственный алгоритм генерации цветов.

Наиболее понятно для восприятия тона были представлены в версии 3D, так как в нем есть три измерения: насыщенность (справа), тон (внизу) и светимость или значение (слева). Для удобности использования алгоритма были представлены наборы входящий и исходящих данных. Таким образом, с помощью данного алгоритма, будет доступно множество вариаций оттенков одного цвета. Единая система алгоритма была применена для каждого тона.

Lyft  имеет 11 шагов, среди которых цвета распределены в диапазоне от 0 до 100. Диапазон тонов указывается после того, как вы установили количество шагов. Диапазон может варьироваться от большого к маленькому, что дает нам возможность выбирать диапазон тонов в зависимости от предпочтений. Далее после всех выбранных необходимых параметров, нам следует указать насыщенность определенного цвета. Таким образом мы можем сделать оттенок максимально ярким или уменьшить его вплоть до серого цвета.

Далее необходимо выбрать значение светимости. Яркость и насыщенность схожи по своей визуальной функции, и определяется от 0 до 1. Из-за того, что в трехмерном отображении цветов цветовые каналы тесно связаны, при настройке яркости другие точки на алгоритме также будут перемещаться.

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

Удобство в применении

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

Инструменты

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

Инклюзивное будущее

Для того, чтобы создать инклюзивное будущее, необходимо создавать новые доступные продукты. В данной статье мы поделились с вами информацией об алгоритмах и работе с цветом. Веб-инструмент ColorBox упрощает использование данного цветового алгоритма.

Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна, и учиться Вам теперь станет в удовольствие!

Хочешь получать лучшие
статьи от WebDes Guru ?

Подпишись на рассылку