Ошибки дизайнеров при работе с цветом

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

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

Почему цвет важен?

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

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

Одна из самых часто встречающихся ошибок — желание сделать интерфейс ярким, с большим количеством цветов и оттенков.

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

Правило 60-30-10 (6:3:1)

Это правило поможет грамотно выбрать соотношение цветов для интерфейса.

Принцип 6:3:1 пришел из дизайна интерьера. Он призван внести равновесие и гармонию в цветовое решение любого проекта. Соотношение 60%-30%-10% — представляет наилучшую пропорцию для достижения баланса при выборе цвета.

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

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

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

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

Мы привыкли, что акцентный цвет — это самый яркий, самый красочный из всех. Часто здесь скрывается еще одна ошибка — акцентный цвет получается перенасыщенным. Для грамотной работы с акцентами, например, в Figma, рекомендуется использовать цветовую модель HSB — Hue (тон), Saturation (насыщенность), Brightness (яркость), так вы сможете управлять каждым параметром цвета по отдельности. В работе с этой цветовой моделью начинающие дизайнеры часто совершают две ошибки:

Цвета с Saturation=0 и Brightness<10

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

Цвета с Saturation>90 и Brightness>90

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

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

Еще одна ошибка при работе с акцентами — обозначение различных состояний интерфейса одним цветом (сообщение об ошибке, информационное сообщение, предупреждение).

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

Нестандартный цвет ссылок

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

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

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

Степень контрастности вы можете регулировать, опираясь на функцию элемента дизайна:

• Если вам нужно выделить конкретный элемент интерфейса, используйте два сильно контрастных цвета. С определением этих цветов вам поможет Цветовой Круг Иттена, о котором подробнее говорится в статье о Теории Цвета.

Важно! Если цвета будут сильно контрастировать друг с другом, то текст будет трудно распознать, это создаст ощущение напряженности. Мягкий контраст комфортен для глаз, его лучше использовать для основных элементов интерфейса. В большинстве случаев сильный контраст используется для создания акцентных элементов (например, СТА-кнопок).

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

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

Вы можете получить вариации цвета вручную или воспользоваться специальными инструментами:

ColorBox

Lch and Lab colour and gradient picker

Leonardo

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

Старайтесь тестировать контрастность на доступность на ранних этапах создания вашего проекта при помощи специальных инструментов и плагинов:

Getstark

WhoCanUse

Color.review

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

Психология цвета — изучение влияния цветов на настроение и поведение человека.

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

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

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

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

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

Почему лучше не использовать чистый черный на белом фоне: белый цвет — 100% яркость, а черный — 0% яркости. Такой высокий контраст между цветами приводит к несоответствию уровней освещенности, которые пользователь видит при чтении текста. Чтобы не заставлять глаза пользователя напрягаться, вместо чистого черного выберите темно-серый цвет.

Перед началом работы над проектом дизайнер получает брендбук от компании, где указаны основные элементы визуальной концепции бренда (цвета, логотипы, шрифт и т. д.). Часто в брендбуках цвета указаны для работы с полиграфической продукцией, которые не подходят для UX/UI-дизайна. Начинающие дизайнеры без изменений переносят цвета из брендбука в макет проекта и удивляются, что все выглядит совсем не так, как задумано.

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

CMYK — сочетание четырех цветов: голубого (cyan), пурпурного (magenta), желтого (yellow) и ключевого (key) черного.

Цвета в этом формате на экране, смотря приглушенно, поэтому вы можете подобрать аналог в формате RGB (аббревиатура английских слов red, green, blue (красный, зеленый, синий). Эти цвета излучаются экраном монитора, поэтому состоят они из света, а не из чернил). Также вы можете увеличить яркость.

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

Как правильно называть цвета

• Выбирайте более общие названия. Например, цвета фона можно назвать Neutral, а дополнительные и акцентные цвета Primary (первичный) и Secondary (вторичный)

• В названии оттенков первичного и вторичного цветов лучше использовать цифры. Только не используйте 1, 2, 3. Если вам захочется добавить промежуточные цвета, в дальнейшем с такими названиями это будет сложно сделать. Выбирайте названия, который в будущем дадут вам больше свободы, например, Primary/500.

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