Сочетание цветов в сайте – Примеры идеального сочетания цветов в веб — дизайне

Заключение

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

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

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

Высоких вам конверсий! 

По материалам: crazyegg.com

06-02-2019

lpgenerator.ru

5 основных цветов в веб-дизайне

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

Красный

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

Сочетается с белым, серым, светло-синим или серебристым цветами.

Плюсы:

• создает ощущение срочности
• ассоциируется с любовью
• может вызвать чувство возбуждения или поощрения

Минусы:

• не забывайте, что этот цвет несет в себе ассоциацию со словом «стоп», «опасность»
• его переизбыток может отбить желание оставаться на вашем сайте

НЕТ!

ДА!

Синий/голубой

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

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

Сочетается с белым, зеленым, бежевым.

Плюсы:

• это успокаивающий цвет
• способствует физическому расслаблению
• создает атмосферу безопасности и доверия
• синий цвет считается цветом креативности

Минусы:

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

НЕТ!

ДА!

Зеленый

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

Прекрасно сочетается с белым, салатовым, коричневым, оранжевым, чёрным и серым тонами.

Плюсы:

• освежает и расслабляет, оставляя у людей чувство вдохновения
• представляет собой баланс и гармонию в дизайне, как в природе

Минусы:

• Кандинский справедливо отмечает: “Абсолютный зеленый – самый спокойный цвет из существующих. Он никуда не движется и не имеет призвука радости, печали, страсти. Он ничего не требует, никуда не зовет. Это неподвижный, самодовольный, ограниченный в пространстве элемент”

НЕТ!

ДА!

Фиолетовый

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

Поэтому было бы эффективно сочетать этот цвет с черным, кремовым или белым цветами.

Плюсы:

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

Минусы:

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

НЕТ!

ДА!

Оранжевый

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

Сочетается с голубым, синим, лиловым, фиолетовым.

Плюсы:

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

Минусы:

• сигнал «предупреждение»
• нарочитость

НЕТ!

ДА!

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

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

На заметку!

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

Красный

• Китай: удача, торжество
• Индия: чистота
• Южная Африка: траурный цвет
• Восток: радость (в сочетании с белым)
• Запад: возбуждение, любовь, страсть
• США: рождество (с зеленым), день святого Валентина (с белым)
• Япония: жизнь

Голубой

• Европа: успокоение
• Иран: траур, цвет неба и духовность
• Китай: бессмертия
• Ближний Восток: защита
• В мире: цвет безопасности
• Запад: печаль, депрессия

Оранжевый

• Европа: осень, урожай, творчество
• США: Хэллоуин (с черным), дешевые товары

Зеленый

• Япония: жизнь
• Европа / США: весна, новое рождение, День Святого Патрика, Рождество (с красным)
• США: деньги

Фиолетовый

• Таиланд: траур (вдовы)

Автор: Лина Стопятюк

Превью: Depositphotos

Читайте также:

Как сэкономить деньги при создании сайта

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

6 основных правил хорошего лендинга

say-hi.me

Цветовая гамма сайта: рекомендации по подбору

Андрей Батурин, 25 октября, 2018

Андрей Батурин

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

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

Правила подбора

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

Гармоничные комбинации рождаются из:

• Триад — 3 цветов, которые в круге образуют треугольник. Классическая триада — когда каждый элемент тройки удален от другого на равное расстояние. Один цвет главенствует, два других дополняют его. Еще есть аналоговые триады — сочетания оттенков, лежащих рядом друг с другом на цветовом круге.
• Тетрад — соответственно, 4 цвета, образующих прямоугольник. Сложная схема, при которой 1 цвет — главный, 2 — дополнительных, а еще один — подчеркивающий акценты. Все 4 цвета нельзя использовать как основные: появится дисбаланс, дизайн будет, что называется, резать глаз.
• Контрастов, то есть сочетаний 2 цветов, расположенных в круге противоположно.

Такие комбинации называют цветовыми схемами. Они остаются гармоничными независимо от того, каков угол поворота.

Чтобы быстрее сориентироваться в подборе цвета, надо усвоить еще несколько несложных правил:

• Гармонирующими являются тона, которые близки по спектру. Например, рядом с красным в круге располагаются розовый, оранжевый.
• Комплементарные либо дополнительные оттенки — пара, расположенная в круге напротив. Это, допустим, синий с желтым, зеленый с красный. Их нельзя использовать на равных: один – всегда основной, другой — дополнительный. Степень контраста значительна, и такие сочетания лучше применять, когда какую-то информацию необходимо подчеркнуть. К примеру, синий — фон, желтый — цвет акцента.
• Главные элементы спектра в живописи — красный, желтый, синий (RYB). И их нельзя получить путем смешивания прочих оттенков. Но в цифровом формате эта схема не работает. В веб-дизайне используют цветовую модель RGB — красный, зеленый, синий.

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

• Adobe Color CC. Есть русскоязычная версия и несколько режимов подбора, много палитр.
• ColorScheme.Ru — русскоязычный ресурс, простой и понятный даже новичкам.
• Paletton.com — тоже легкий в обращении, но на английском.

Одного онлайн-помощника более чем достаточно! Просто выберите тот, который удобнее лично вам. Вообще подбор цветов для сайта — дело непростое и субъективное. Задача облегчается, когда уже разработан фирменный стиль: понятно, какие оттенки нужно использовать.

Значение оттенков

Многие при выборе цвета хотят разобраться со значением. Подробные характеристики мы приводили в статье «Значение цвета в фирменном стиле компании».

Вспомним кратко, как воспринимаются цвета в дизайне сайта:

• Черный: сила, лаконичность, власть.
• Белый: свежесть, ясность, чистота.
• Бежевый: скромность, нейтралитет, нежность.
• Оттенок слоновой кости: стиль, элегантность, комфорт.
• Серый: строгость, профессионализм, контроль.
• Фиолетовый: элита, роскошь, романтика.
• Синий: спокойствие, стабильность, безопасность.
• Зеленый: рост, развитие, естественность.
• Оранжевый: молодость, дружба, бодрость.
• Желтый: веселье, энтузиазм, энергия.
• Красный: страсть, действие, активность.

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

Вкусы у всех разные, на восприятие влияет эмоциональный фон, самочувствие, настроение, пользовательский опыт, погода и еще 1 000 факторов. На всех не угодишь! Ученые давно доказали, что мужское и женское восприятие цвета весьма отличаются друг от друга. У дальтонизма есть 3 разновидности — протанопия, дейтеранопия, тританопия, страдают им преимущественно мужчины — около 7-8%.

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

Цвет и тема сайта

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

Иногда она задает тон и диктует свои условия:

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

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

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

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

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

Цвет и вид сайта

Палитры различаются не только в зависимости от тематики, но и по видам сайтов.

К примеру:

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

Реализация цвета

Вот простой алгоритм, который подскажет, как выбирать цветовую гамму сайта:

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

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

Текст

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

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

Важно делать корректные отступы между блоками и строками. От этого может зависеть, насколько будет читабельным текст.

Фон

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

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

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

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

Другие статьи по тегам

сайты дизайн сайта разработка сайтов

на эту тему

Mobile first: тонкости разработки Веб-дизайн 2018 года: тенденции и тренды Когда пора заказать редизайн сайта? ТОП-10 классических стилей в веб-дизайне UX дизайн и его роль в веб-дизайне Разработка официального сайта компании Конверсия и методы ее повышения Как правильно подготовить сайт к продвижению 8 причин потерь позиций сайта в поисковой выдаче Интернет-магазины: как реализовать триггеры для роста продаж

webevolution.ru

Правильные сочетания и подбор цвета для сайта: рекомендации для новичков

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

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

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

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

Зависимость цвета сайта и его стиля от ЦА

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

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

Цветовая гамма для сайта: как выбрать?

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

Принцип выбора цветовой палитры в соответствии с ЦА

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

• Для сайтов на детскую тематику лучшие цвета для сайта — яркие, контрастные и позитивные;
• Для ресурсов, где ЦА — девушки и женщины — нежные, светлые;
• Для сайтов, где целевая аудитория — мужчины — темные или нейтральные.

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

Сочетание цветов для сайта

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

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

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

Цветовые контрасты

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

Создавать контрасты цветов можно несколькими способами.

Цветовые тоны

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

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

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

Температура тона

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

Интенсивность цвета

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

Цветовое распространение

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

Как воспринимается цветовая палитра сайта пользователем?

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

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

Красный

Эмоции: страсть, любовь или опасение, важность.

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

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

Оранжевый

Эмоции: позитив, дружелюбие, движение, энергия, молодость.

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

Так как оранжевый — яркий цвет, его можно задействовать в качестве акцентов. Он справится со своей задачей не хуже, чем красный.

Желтый

Эмоции: радость, счастье, энтузиазм.

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

Зеленый

Эмоции: спокойствие, благополучие, рост, стабильность.

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

Синий

Эмоции: спокойствие, открытость, безопасность.

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

Фиолетовый

Эмоции: богатство, помпезность, роскошь или тайна, мистика.

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

Темные цвета на сайте навевают романтику и таинственность.

Белый

Эмоции: добро, чистота, доступность.

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

Белый цвет создает эффект минимализма, но, вместе с тем, делает сайт стильным. На сегодняшний день подобное решение — самое модное и трендовое.

Черный

Эмоции: изысканность, власть.

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

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

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

Выбирая цветовую палитру для своего сайта, подбирайте каждый цвет поэтапно:

1. Для начала следует определить основной цвет. Этот цвет, как правило, используется в большей мере, им могут выделяться основные заголовки или важная информация;
2. Выбираем вторичный цвет — цвет, которым будет выделяться второстепенная по важности информация;
3. Акцентирующий цвет — самый важный инструмент для привлечения внимания посетителя. Он должен быть контрастным, выделяющемся и на основном, и на фоновом цвете;
4. Фоновый — цвет, который преобладает на сайте, заполняя свободное пространство. Должен взаимодействовать со всеми выбранными оттенками, не привлекать на себя внимание.

Рассмотрим на примере использование всех цветов

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

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

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

Пример 1

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

Пример 2

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

Пример 3

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

Пример 4

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

Пример 5

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

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

Мы собрали для вас 4 самых популярных сервиса, с помощью которых вам удастся правильно подобрать цветовую палитру вашего ресурса.

Colorscheme

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

In Color Balance

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

Design Palette

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

Paletton

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

Какой должна быть палитра цветов для сайта?

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

Понравилась статья? Ставьте лайки и подписывайтесь на наш блог!

Следующий проект:17 примеров лучших сайтов ресторанов и кафеПредыдущий проект:Правильная структура веб сайта под SEO: примеры, виды и 15+ рекомендации по разработке структуры

impulse-design.com.ua

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

~

Сервисы по определению цветовой схемы

• color-hex.com — определит какие цвета стоят рядом с вашим цветом
• thestocks.im — агрегатор мокапов,  видео, фотографий, иконок, шрифтов.
• Eye Dropper — расширение для  Google Chrome, которое позволяет с помощью пипетки узнать код любого цвета на любой странице в интернете.
• Adobe Color CC  -подберёт цветовые сочетания. Adobe Color CC поможет, когда есть картинка, и вы хотите выгрузить её основные цвета. Программа определяет палитру из 5 доминирующих цветов изображения, которую можно сохранить и использовать в презентациях. Бесплатно.
• Colorzilla -расширение для  Google Chrome и  Mozilla Firefox, которое включает инструменты colour picker, eye-dropper, css gradient generator и palette browser. Достаточно навести пипеткой на нужный цвет на любом сайте и скопировать код.
  
• ColorPick Eyedropper — расширение с пипеткой, работает аналогично предыдущего: наводите ей на понравившийся цвет и получаете его код. Для Chrome и Firefox.

~

Подбор цвета

Загрузите картинку и сделайте из нее палетку.

 

• Coolors.co — ресурс с палитрами, которые можно создавать самим или заимствовать из коллекци
• Material Design Color Tool
• flatuicolors.com
• flatuicolorpicker.com
• COLOURlovers — коммьюнити цветовых фанатов, которые делятся палитрами, цветами, фонами и графическими шаблонами. Здесь есть цветовые тренды из интерьеров, журналов, сайтов и даже уличной моды. В разделе «Browse» можно найти авторские цвета и палитры и скачать фоны для презентации.
• Web Colour Data — сайт, на котором можно ввести URL нужного сайта и получить его цветовую палитру.
• Movies In Color — подбирает цветовые палитры известных фильмов.

~

Как выбрать цвет для сайта

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

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

• Черный. Надежный, утонченный и опытный. Используется для продвижения предметов роскоши.
• Белый. Простой, спокойный и чистый.
• Красный. Уверенность, молодость и власть. Нередко используется для тотальных распродаж.
• Оранжевый. Дружелюбный, теплый и энергичный. Создает призыв к действию: регистрироваться, покупать или продавать.
• Желтый. Счастье, оптимизм и тепло. Обычно используется для привлечения внимания к витрине.
• Зеленый. Мир, рост и здоровье. В маркетинге применяется для расслабления.
• Синий. Доверие, безопасность и стабильность. Обычно используется для банков и бизнесов.
• Пурпурный/фиолетовый. Роскошный, креативный и мудрый. Обычно применяется в индустрии красоты и антивозрастных товаров.
• Розовый. Романтичный и женственный. Используется для продвижения товаров для женщин и молодых девушек.

Черный

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

Белый

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

 

Красный

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

Оранжевый

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

Желтый

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

Зеленый

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

Синий

Цвет доверия. Он обычно показывает надежность, успокаивает.

Пурпурный

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

Розовый

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

Коричневый

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

~

Влияние цвета на покупку товара

Исследование проводилось в Северной Америке.

Любимые цвета

Нелюбимые цвета

~

Цветовые модели

• CMYK: Cyan (синеватый), Magenta (красноватый), Yellow (желтый), и Key («ключевой» — черный). То есть эта модель состоит из трех основных цветов и черного, который позволяет создавать более темные оттенки. Используется в живописи и печати.
• RGB-модели: red, green, blue — красный, зеленый, синий. Используется в компьютерах, телевизорах и других электронных устройствах

 

Монохроматический

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

Аналогичные (Analogous Colors)

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

Complementary

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

Расщепленные дополняющие цвета (Split-Complementary)

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

Триада цветов (Triadic colors) 

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

Tetradic/Double-Complementary

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

Behance

Dribbble Colors

Color Hunter

Просто загрузите картинку и Color Hunter создаст на ее основе палитру. Это отличный способ достичь гармонии между изображениями и основными цветами сайта.

Designspiration

Можешь выбрать сразу 5 цветов и посмотреть, что нашлось в это цветовой палитре.

Tineye Multicolr

На сайте 20 миллионов изображений по лицензии Creative Commons из Flickr.

 

~

Больше статей по теме

Color in Design: Influence on Users’ Actions

Digital colour mixing explained

Why Color Matters

Responding To Color

The Psychology of Color in Marketing and Branding

Color Theory for Designers, Part 1: The Meaning of Color

Color Associations

Why Color Matters

Birren, Faber., Color Psychology and Color Therapy.

blog.alevi.ru

лучшие сочетания и правила выбора цветовой схемы

Тематический трафик – альтернативный подход в продвижении бизнеса

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

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

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

Интересный факт

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

Общепринятые эмоциональные ассоциации

• Красный. Возбуждающий тон, ассоциируется с властью, энергией, молодостью, страстью. Больше всех привлекает внимание, при помощи него можно о чем-то предупредить. Если на веб-странице слишком много красного — человек попытается как можно быстрее «убежать» с нее. Когда данный колор необходим, его можно использовать умеренно или применять более нежные оттенки.
• Розовый. Романтика, женственность, нежность. При неправильном использовании намекает на неформальные отношения, поэтому неприменим для корпоративных порталов или спортивных веб-ресурсов.
• Оранжевый. Энергия, дружелюбие, интерес, бодрость. Эмоции и ассоциации: открытость, активность, уникальность. Создает ощущение движения, творчества.
• Желтый. Солнце, радость, счастье. Ярко-желтый прибавляет энергию, нежный — комфорт, темный — погружает в старину, добавляет авторитета.
• Зеленый. Здоровье, стабильность, рост, природа. Являясь мостом между теплыми и холодными красками (он получается из смешения синего и желтого), обладает расслабляющим влиянием синего, сохраняя энергичность желтого. Темные оттенки говорят о финансах и богатстве.
• Синий. Спокойствие, открытость, надежность, непоколебимость. Влияние на психику очень зависит от его нюанса. Светлые тона более дружелюбны, а темные вызывают печаль. Нейтральный синий отлично подходит для корпоративных проектов.
• Голубой. Мирное небо, терпимость, надежность, профессионализм.
• Фиолетовый. Тайна, романтика, роскошь, мистика и т.п. Это тона королевского величия, предметов роскоши, окутанных тайной. Светлые тона более романтичны, а темные — таинственны.
• Черный. Нервозность, опасность, власть. Колор считается нейтральным, но он может вызвать совершенно противоположные ассоциации в зависимости от того, с какими цветами гармонирует. Если черного много — он ассоциируется со злом, особенно в сочетании с красным. Если черного в меру, то он говорит об изысканности и элегантности (особенно в сочетании с белым).
• Белый. Простота, чистота, доброта, воздух. Самый популярный колор для фона веб-проекта. Как правило, текст легко читается с белого листа, и на веб-странице остается много воздуха и легкости. Он выгодно оттеняет другие краски.
• Серый. Самая нейтральная краска, которая не вызывает отрицательных эмоций. Говорит о меланхолии, спокойствии. Темно-серый может вызвать грусть, но любые его тона при правильных сочетаниях становятся мощными инструментами в руках опытного дизайнера.
• Коричневый. Уверенность, спокойствие, комфорт, долговечность.
• Бежевый. Фоновый тон, традиционный, подчеркивает сопровождающие его краски. Он изменяется в зависимости от окружающих его тонов.
• Слоновая кость, кремовый. Элегантность, комфорт, минимализм. Приравнивается к белому в восприятиях, но тон его намного теплее.

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

Правила сочетания цветов для сайта — ориентируемся на интуицию

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

• Белый или черный: любые сочетания. Наилучшие пары, которые «дружат»: белый + черный, а также синий или красный. В случае с черным пару составит белый, яркий оранж, нежно-розовый, яркий или темный желтый, а также красный.
• Серый: нюансы красного, а также фиолетового и синего.
• Беж: коричневый, бирюза, синий, красный, изумрудный.
• Коричневый: голубой, беж, роза, изумруд.
• Розовый: коричневый, мятный, бирюза.
• Красный: темно- или нейтрально-зеленый, светло-желтый, приглушенно-синий, строгий серый.
• Зеленый: оранж, желто-коричневый, кремовый.
• Оранжевый и желтый: синие и фиолетовые краски.
• Темно-синий: коричневый, серый, светло-желтый, голубой, оранж,
• Голубой: строгий серый, красный, коричневый, роза, оранж, желтый, рубин, зеленый.
• Фиолетовый: серый, золотисто-коричневый, светло-желтый, неброские оттенки голубого и зеленого.

Подбор цветов для сайта по спектральному кругу

Что такое цветовой круг? Древние художники в своих работах полагались на интуицию. Позднее был изобретен цветовой круг, представляющий собой последовательность тонов и полутонов, от теплых к холодным, который стал инструментом для дизайн-конструирования. Работа с кругом происходит по одному из принципов.

Принцип первый — триада

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

Принцип второй — двойная система

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

Принцип третий — аналогия

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

Принцип четвертый — раздельное

Основной колор сочетается с двумя дополнительными — равносторонний треугольник на спектральном круге.

Принцип пятый — прямоугольник

Здесь один колор является основным, два — дополнительными, а третий — акцентирующим.

Шестой принцип — квадрат

Самое динамичное сочетание, яркое, энергичное.

Как подобрать цвета для сайта при помощи программ

Существует несколько онлайн-сервисов, которые помогают дизайнерам в работе: Adobe Color, Paletton, Flat UI Color Picker, Color Palette Generator, Color Scheme и другие. Каждый онлайн-сервис работает на основе спектрального круга. Пользоваться инструментарием можно бесплатно. Веб-дизайнер легко и максимально быстро подберет сочетающиеся друг с другом оттенки.

Фоновый цвет для сайта: выбор и его критерии

Фон вызывает основное чувство у посетителей веб-ресурса. Это или негатив, отторжение, неудобство, или, наоборот, приятие, легкость в получении информации, комфорт. Хороший фон привлекает внимание и интригует. Рассмотрим правила, на которые должен ориентироваться веб-дизайнер при выборе фона для интернет-ресурса.

1. Светлый фон — это больше пространства и воздуха, а черный и темный фон подчеркивают элегантность.
2. Если вы используете темный фон — не применяйте основной шрифт желтого, голубого, синего, красного оттенков. Текст будет нечитабельным.
3. Для серьезного веб-проекта следует использовать однотонную подложку.
4. Для информационных веб-ресурсов с большим количеством информации более приемлемы светлые оттенки (белый, беж, слоновая кость).
5. На светлой основе хорошо читается текст серых или черных оттенков.
6. Фон и шрифт на нем должны быть контрастными.
7. При выборе основного цвета и ему сопутствующих руководствуйтесь тематикой веб-ресурса (зеленый — медицина, природа, финансы; розовый — женская; коричневый и желтый — пищевая промышленность и т.д.). Например, нелепо будет смотреться детский журнал на черном фоне или веб-проект про автомобили Лексус — на розовом.

Еще несколько правил по выбору цветовых палитр для сайта

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

Примеры хороших и плохих сайтов

Основные ошибки: слишком много красного, основной товар не ассоциируется с цветовым решением.

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

Этот вариант без комментариев.

Хорошее, приятное сочетание цветов. Зеленый цвет стандартно ассоциируется с финансами.

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

Несмотря на темный фон, страница воспринимается легко. Вызывает ощущение надежности, силы, мужественности.

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

semantica.in