палитры для дизайнера

Красный (основной цвет)

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

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

Заключение

Подводя итог всему сказанному о цветах UI, можно прийти к трем основными принципами с Material design, которые можно использовать в своей работе

Последовательность

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

Определенность

Цвет должен создавать различие между элементами, с достаточным контрастом между ними.

Намеренность

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

Видео

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

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

Семантические цвета используют:

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

Зеленый (второстепенный цвет)

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

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

Примеры:

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

Цвет как инструмент управления вниманием и настроением

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

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

Фрагмент интерфейса Telegram

Фрагмент интерфейса Telegram

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

Черный

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

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

Примеры:

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

Культурный контекст

Не надо углубляться в психологию цвета в веб-дизайне, чтобы понимать, что традиции везде разные. Что в Китае значит радость и удачу, то в Израиле может быть символом крови и греха, хотя это всё тот же красный цвет. Или оранжевый, который для большинства людей символизирует положительные эмоции, в США ассоциируется с дешёвыми товарами. 

Танец дракона в Китае

Танец дракона в Китае

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

Бежевый и желто-коричневый

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

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

Примеры:

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

Найти свои белые и черные цвета

Единственное правило здесь — это не использовать абсолютно белый или черный цвет.

Абсолютный черный цвет и белый цвет могут утомлять глаза при чтении или выполнении действий. Белый ( #FFF ) имеет 100% яркость цвета, а черный (#000) — 0%. Такая неравномерность создает интенсивный контраст, к которому человеческим глазам труднее адаптироваться при навигации и чтении.

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

Белый

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

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

Примеры:

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

Коричневый

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

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

Примеры:

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

Личные советы

От себя бы я еще добавил пару советов при создании палитры.

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

2. Пытайтесь, по возможности, минимизировать количество оттенков. Чем меньше цветов — тем проще будет при разработке.

3. Используйте OPACITY для оттенков. Вам не обязательно на каждый оттенок создавать отдельный цвет. Если эту функцию может выполнить «прозрачность» — используйте ее. Кроме этого, если правильно использовать прозрачность, вам и вовсе не надо будет менять цвет в светлой и темной теме. Он и там и там, будет смотреться хорошо. Добавляйте альтернативные варианты цвета с OPACITY в UI Kit, для общего понимания и удобства.

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

👌 Бонус: 6 полезных инструментов для работы с цветом, о которых вы могли не знать.

Перевод на русский: sign / Алина Остапенко

. Автор: .

⚡ Если тебе понравился этот материал, ты можешь подписаться на мой / / / / . Там ты найдешь больше интересных материалов о дизайне.

Adblock
detector