Цвета для сайта: правила выбора и полезные инструменты

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

На что обратить внимание? Однако нет и особой сложности в данном вопросе. Существуют схемы сочетания тонов на цветовом круге и правило 60-30-10, отображающее пропорции основного оттенка, вспомогательного и яркого акцента.

Психология и теория цвета

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

Источник: shutterstock.com

Настроение, эмоции и поведение потребителей могут меняться под воздействием колора – это доказано исследованием «Impact of color on marketing» (влияние цвета на маркетинг). Больше половины покупателей (по некоторым категориям изделий – до 90 %) оценивают продукт плохо или хорошо только в зависимости от его окраса.

Опросы аналитического маркетингового агентства Kissmetrics также показывают, что огромное количество клиентов (около 85 %) в качестве основных факторов, от которых зависит принятие решения о покупке, называют дизайн и палитру товара.

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

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

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

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

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

Американским художником Альбертом Манселлом в начале ХХ века были предложены такие понятия, как параметры цвета, которые имеют важное значение для современной теории. Это:

• Тон (оттенок) – этот параметр является основным с точки зрения того, как световая волна воспринимается человеческим мозгом. Это отличительная черта конкретного цвета. То есть тон отличает, например, синий колор от зеленого.

• Яркость – показывает степень отличия цвета от черного и белого. Например, светло-синий – более яркий колор, чем темно-синий. Иначе этот параметр называют «светлота».

• Насыщенность – говорит об интенсивности тона. Более насыщенный цвет выглядит ярким, а менее – тусклым, приближенным к серому.

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

Значение цветов в веб-дизайне

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

Красный – энергия действия, страсть

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

То же можно сказать и о кнопке «Play», которую использует Netflix – она так и зовет, чтобы ее нажали. Однако не забывайте об умеренности: красного цвета не должно быть слишком много. Тогда он вызывает чувство тревоги или воспринимается как угроза.

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

Синий – доверие и профессионализм

Этот цвет можно сравнить с уверенным надежным рукопожатием, вселяющим спокойствие, поэтому часто его выбирают IT-компании и банки. На подсознательном уровне люди доверяют синему логотипу IBM или Visa. Этот цвет ассоциируется с безбрежным глубоким океаном, вселяющим чувство уверенности.

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

Зеленый – природа, рост и здоровье

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

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

Зеленый показывает, что компании важно благополучие клиентов и состояние окружающей среды. Подойдет для тех, кто работает в финансовой или экологической сфере, здравоохранении, wellness-индустрии.

Желтый – привлечение внимания, оптимистичный настрой

Это луч солнца среди хмурых туч, который говорит, что пора действовать и не время грустить. Желтая упаковка чая Lipton символизирует энергию и тепло. Оформление магазинов IKEA в этой гамме располагает к появлению у покупателей интересных идей для оформления дома.

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

Оранжевый – энтузиазм и креатив

Это теплый цвет вечеринок и радости. Логотип Amazon стрелка-улыбка делает веселее даже самую скучную покупку, а оранжевый напиток Fanta очень любят шумные дружеские компании.

Источник: shutterstock.com

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

Черный – элегантность и премиум

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

Не случайно вокруг черного цвета выстроены такие бренды как Chanel, Mercedes-Benz, Nike, Prada. С помощью сочетания его и белого Nike создает победный образ, мотивирует на занятия спортом и достижения.

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

Белый – чистота и простота

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

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

Фиолетовый – креатив и роскошь

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

Этот цвет с успехом используют Milka (фиолетовая упаковка создает ощущение нежности, говорит об особом вкусе продукта), Yahoo, Cadbury, Hallmark. Уникальность и креативность своих игр с помощью данного колора подчеркивает Twitch.

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

Культура цвета в дизайне

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

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

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

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

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

Техники и правила сочетания цветов для сайта

Следует избегать опасных сочетаний, вызывающих не комфортные ощущения на подсознательном уровне (например, красный с зеленым). Чтобы визуально сайт создавал приятное впечатление, надо выбирать сбалансированные палитры, используя правило 60-30-10. Гармоничная палитра выглядит так:

• 60 % занимает основной цвет, создающий общее настроение; это колор фона и крупных блоков;

• 30 % занимает дополнительный тон, с помощью которого формируется визуальная иерархия; это краска разделов и акцентов;

• 10 % – яркие пятна (важные элементы, кнопки).

Можно выбрать, например, следующие цвета:

• 60 % – светло-серый – для фона;

• 30 % – черный цвет для карточек товаров;

• 10 % – зеленый – для кнопки «Заказать».

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

Источник: shutterstock.com

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

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

Монохромная цветовая схема

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

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

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

[Текст с переводом на услугу]

Аналоговая схема

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

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

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

Контрастная (комплементарная) схема

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

При подборе цветов для сайта нужно помнить о балансе: если контраста будет слишком много, возникнет визуальное напряжение. Лучше в качестве доминирующего выделять один колор, а второй применять для создания акцентов (например, 70 % может занимать зеленый и 30 % – красный).

Этапы подбора цветов для сайта

Шаг первый – определение характера и ценности торговой марки

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

Далее напишите 4-5 главных ценности бренда. У всех они разные, например, экологичность, инновационность, доступность и т. д. Цвета надежности – это зеленый и синий, доступность «окрашена» в желтый и оранжевый. Инновационность подчеркнут фиолетовый и синий, а для экологичности выбирайте коричневый и зеленый.

Шаг второй – анализ целевой аудитории

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

Источник: shutterstock.com

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

Шаг третий – анализ соперников

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

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

Шаг четвертый – создание moodboard с вдохновением

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

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

Шаг пятый – подбор основного цвета для сайта.

Это база веб-ресурса: логотип, основные элементы бренда, акценты должны быть окрашены в него. Основной колор должен быть универсальным и отражать главную ценность компании. Около 60 % всей цветовой схемы будет занимать именно он.

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

Шаг шестой – выбор дополнительных оттенков и колоров.

Добавьте к основному цвету:

• вторичный – дополняет главный, применяется для второстепенных элементов и заголовков; должен занимать около 30 % всей схемы;

• акцентный – используется для важных уведомлений и кнопок целевых действий; это контрастный, яркий колор, занимающий около 10 % цветового решения;

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

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

Шаг седьмой – проверка контрастности и читаемости

Это важно как в эстетическом, так и в юридическом отношении. Для нормального текста минимальное соотношение контрастности должно быть 4,5 : 1, а для крупного – 3 : 1 (по стандартам WCAG). Для проверки читабельности материала можно использовать WebAIM Contrast Checker или другие подобные инструменты.

Быстро проверить контрастность можно по чек-листу:

• Четко ли виден текст на всех фонах?

• Отличаются ли от задника чекбоксы, поля и другие элементы формы?

• Выделены ли визуально интерактивные элементы (ссылки, кнопки)?

• Можно ли прочитать материал при разном освещении (видно ли контент на экране на солнце)?

Шаг восьмой – тестирование палитры на мобильных устройствах

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

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

Шаг девятый – проверка соответствия выбранных цветов для сайта темной теме

Нужно обязательно учитывать, что большинство пользователей (больше 80 %) при использовании смартфонов в вечернее время предпочитают переключаться на такой режим, поэтому его игнорировать нельзя.

Часто для такой темы насыщенность цветов приходится снижать, поскольку они могут «вибрировать», и пользователи вынуждены сильно напрягать глаза.

Эмпирическим путем было установлено, что если для светлого варианта вы используете белый задник и черная гарнитура, то для темного нужны не чистые антиподы. Необходимы очень темно-серый фон (примерно #121212) и слегка приглушенный оттенок белого текста (примерно #E0E0E0). Это позволит добиться комфортной степени контраста.

Цветовая палитра – это не строго прописанная норма. Необходимо постоянно анализировать пользовательское поведение и изменения бренда (анализ вовлеченности, А/В-тесты), пробовать разные схемы, чтобы подбирать оптимальные сочетания колоров.

Повышение доверия с помощью цвета сайта

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

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

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

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

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

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

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

Тренды цвета в веб-дизайне

Цветовой дизайн – это динамичная, постоянно развивающаяся сфера, в которой постоянно появляются новые тенденции. Чтобы сайт не утратил актуальность и был интересен целевой аудитории, необходимо быть в курсе актуальных на данный момент направлений оформления и выбора колора. Наиболее яркие цветовые тренды – это:

Натуральные природные сочетания

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

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

Сочные кислотные акценты

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

Источник: shutterstock.com

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

Мягкие пудровые оттенки

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

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

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

Сервисы подбора цвета для сайта

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

• Adobe Color CC – это продукт с гибкими настройками от компании Adobe, создателя многих программ, среди которых Illustrator, Photoshop и другие.

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

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

• Color Safe – если для вас имеет значение WCAG, пользуйтесь этим инструментом. Напомним, что WCAG – это руководство по обеспечению доступности веб-контента, включающее рекомендации по повышению доступности ресурса для разных групп пользователей (например, для людей с плохим зрением). В сервисе есть подборщик с необходимыми параметрами, что повышает удобство работы над сайтом.

• Material Color Tool – разработан для дизайнеров, занимающихся пользовательскими интерфейсами. Используя схему веб-страницы можно сразу оценить, удачной ли получилась собранная палитра.

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

• Colourcode – имеет сходство с Colordot, но позволяет более гибко настраивать параметры и определять цветовые сочетания по монохромным, триадным, аналоговым и другим схемам.

• Material Design Palette – в системе можно выбрать два основных колора для сайта, а затем посмотреть, какое сочетание они составят на странице. Также реально сразу собрать расширенную палитру.

Ошибки в выборе цвета для сайта

Плохой контраст

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

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

Избыток ярких цветов

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

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

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

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

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

Недостаточное внимание доступности

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

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

Отсутствие единой цветовой схемы

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

Рекомендация: при создании сочетаний учитывайте основные и акцентные колоры. Для получения более гармоничной палитры пользуйтесь специальными инструментами.

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Часто задаваемые вопросы о цвете для сайта

Где можно узнать больше информации?

Чтобы глубже разобраться в теме колористики, можно почитать следующие книги:

• Наоми Куно, «Сочетание цветов на практике»;

• Иоханнес Иттен, «Искусство цвета»;

• Алексей Лосев, «Диалектика мифа» – эта книга для тех, кто хочет очень глубоко погрузиться в символизм колористики.

Могут ли у популярных цветов быть недостатки?

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

С каким цветом хорошо сочетается красный?

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

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

Источник изображения на шапке: shutterstock.com

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Последние статьи этого автора:

• Как провести вебинар: правила, этапы, полезные инструменты
• Массовая рассылка email: задачи, виды, этапы создания

Забрать подарок