Существуют ли цвета, которых стоит избегать?

Автор: Carrie Cousins    Источник: designshack.net
22.04.2016
658
0
img

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

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

Неоновые

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

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

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

Orange You Glad проделали отличную работу, включив в дизайн своей домашней страницы «почти» неоновые цвета в нескольких местах. Простой прием – это использование неоновых цветов для маленьких элементов с небольшими цветовыми изменениями. Розовые, жёлтые и зеленые легче воспринимаются глазами.

«Вибрирующие» цвета

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

Эти вибрации могут раздражать пользователей, и как писал теоретик цвета Джозеф Альберс (Josef Albers) в своем классическом руководстве «Взаимодействие цветов»: «Этот поначалу захватывающий эффект так же вызывает агрессию и часто не приятный для глаз. Он редко используется, за исключением кричащего эффекта в рекламе, в результате она получается не приятная, не нравится, ее хочется избегать.»

Можно предугадать, будут ли цвета вибрировать, прежде чем поставить их рядом:

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

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

Совет: Если вам нужно использовать «вибрирующие» цвета, разделите их чем-то еще (преимущественно нейтральным).

Светлое на светлом

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

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

Совет: Слава Богу, существуют простые решения этой проблемы:

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

Любые радужные расцветки

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

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

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

Яркое на ярком \ Темное на темном

Так же как светлое на светлом, комбинация одинаково насыщенных цветов приведет к проблеме. Это и так понятно, но избегайте этого.

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

Совет: Если вы хотите использовать несколько ярких или темных цветов, примените их на разных экранах сайтов со скролингом. Вы сможете использовать все яркие или темные цвета, какие захотите, и сохраните читаемость и юзабилити. (Это победа!)

Черный

Если вы часто пересекаетесь и с печатными и с веб проектами – как делают многие дизайнеры – чистый черный мог попасть в веб проект случайно. Цвет, известный как «К» черный в печатных проектах или «чистый» черный (#000000) в веб проектах – просто плоский.

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

Совет: Используйте черный с оттенками цветов вашего бренда или добавьте другие нужные оттенки. Рассмотрите черный в сочетании с другими цветами, подумайте о составе каждого варианта и как составные цвета влияют друг на друга. (К примеру, используйте черный с легким оттенком голубого в противовес оранжевому или жёлтому оттенку текста.) Например, цвет Wonderland из скрина ниже - #0a0a0b.

Выводы

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

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

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

ПОХОЖИЕ СТАТЬИ: