Цвет, безусловно, является важным источником эмоции. Цвета могут устанавливать правильный тон и передавать необходимые эмоции посетителям, могут взволновать, вызвать множество чувств и стимулировать к действиям. Следовательно, цвет является мощным средством воздействия на посетителей сайта.
Основные принципы теории цвета.
Данной теме можно посвятить целую книгу, но мы ограничимся только полезной информацией, которой можно воспользоваться при разработке дизайна интерфейса.
Основные цвета.
Есть три основных цвета: красный (#FF0000), желтый (#FFFF00) и голубой (#0000FF). Нельзя их получить путем смешивания других цветов. Дополнительные цвета могут быть сформированы путем объединения этих трех цветов.
Составные цвета.
Есть также три основных: оранжевый (#FF9900), зеленый (#00FF0) и фиолетовый (#FF00FF). Вы можете получить их путем смешивания красного и желтого(оранжевого), желтого и синего (зеленый) и синего и красного (фиолетовый).
Третичные цвета.
Чтобы получить один из третичных цветов, необходимо смешать один основной цвет и один вторичный цвет. Возможности для третичные цветов безграничны.
Дополнительные цвета.
Дополнительные цвета расположены прямо напротив друг друга на цветовом круге: красный и зеленый, синий и оранжевый, фиолетовый и желтый. В сочетании друг с другом, они составляют разительный контраст. Такие сочетания, как правило, используются для выделения некоторых элементов на web-сайте.
Аналогичные цвета.
Эти цвета расположены рядом друг с другом на цветовом круге. Они обычно смотрят очень хорошо вместе. Использование таких цветовых сочетаний вызывает чувство комфортa у посетителей Вашего сайта.
Цветовой круг.
Цветовой круг является обязательный атрибутом любого дизайнера. Круг позволяет вам выбрать цвета, которые гармонировали бы вместе. Он состоит из 6 основных цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый и дополнительных цветов.
Чтобы найти правильную цветовою схему, необходимо использовать любые два цвета друг напротив друга, любые три цвета на равном расстоянии при формировании треугольника или любой из четырех цветов, образующих прямоугольник (две пары цвета друг напротив друга). Цветовые схемы остаются правильными независимо от угла поворота.
Теория цвета:
Контраст.
У каждого оттенка есть противоположность, который составляет самый большой контраст с этим цветом. Чтобы найти такой цвет, вы можете использовать цветовой круг. Просто выберите цвет на противоположной стороне круга.
Дополнение.
Эти цвета не всегда конфликтуют между собой. Дополняющие цвета подчёркивают друг друга, в отличие от контрастных. В цветовом круге такие цвета идут друг за другом, например, дополняющие цвета лилового — голубой и розовый.
Резонанс.
Каждый цвет вызывает определённое настроение. Яркие тёплые цвета (красный, оранжевый, жёлтый) наполняют человека энергией, пробуждают его, а холодные тёмные оттенки (зелёный, голубой, фиолетовый), наоборот, расслабляют и успокаивают.
Эмоциональное восприятие цвета.
Красный
Эмоции и ассоциации: власть, важность, молодость.
Цвет любви, силы, энергии, лидерства и волнения, связан с азартом, смелостью и желанием, наиболее стимулирующий цвет, настолько энергетически заряженный, что может даже увеличить кровяное давление. Красный цвет представляет страсть и силу, он больше остальных цветов привлекает внимание, поэтому часто используется для важных предупреждений и объявлений. Это сильный цвет, который вызывает некоторые негативные эмоции: опасность, тревога.
Использовать много красного цвета в топе страницы — это отличное решение, так как он привлекает внимание к важной информации в сообщении. В то же время люди стремятся побыстрее покинуть «опасную зону» красного цвета и скроллят вниз. А это, в свою очередь, позволяет показать пользователю больше контента.
Но этот цвет может работать и против вас, поскольку он может вызывать агрессию или сверхстимуляцию. Если вы хотите создать более расслабляющую атмосферу, старайтесь использовать красный умеренно и выбирайте более светлые оттенки красного.
Розовый
Выражает нежность, романтичность, женственность, пассивность, привязанность, воспитание, слабость.
Желтый
Цвет, который чаще всего ассоциируется с живостью. Энергичный, дает ощущение счастья. Кроме того, он ассоциируется с любопытством, развлечением, радостью, интеллектом, осторожностью.
Более тёмные тона жёлтого источают энергию, любопытство и авторитет. Такой цвет отлично подходит для компаний, которые зарабатывают на консультациях и хотят подчеркнуть свой профессионализм.
Оранжевый
Эмоции и ассоциации: бодрость, творчество, дружелюбие, уверенностью, игривостью, мужеством, стойкостью энергия, уникальность.
Как самый спокойный из тёплых тонов, оранжевый способен вызывать целый спектр разносторонних эмоций. В качестве основного цвета он может вызывать интерес и бодрить, а в качестве вторичного — сохранять эти свойства, но в более ненавязчивой манере.
Зелёный цвет
Эмоции и ассоциации: гармонии, рост, исцеления, жизнь, питание, здоровье, стабильность, темы финансов, темы окружающей среды.
Зелёный цвет — это мост между тёплыми и холодными оттенками, хотя больше склоняется к холодным. Это значит, что зелёный обладает расслабляющим действием синего цвета, но также имеет и толику энергичности от жёлтого. В результате этого он создаёт очень сбалансированную и стабильную атмосферу. Более тёмные оттенки зелёного создают впечатление богатства и изобилия.
Синий цвет
Эмоции и ассоциации: спокойствие, безопасность, открытость (более светлые оттенки), надёжность (более тёмные оттенки).
Как и в случае с жёлтым цветом, влияние синего сильно зависит от оттенка. Все оттенки синего универсальны в плане расслабления и безопасности, но светлые тона ассоциируются с дружелюбием, а тёмные — с печалью.
Социальные сети вроде Twitter и Facebook используют более лёгкие и средние оттенки синего, а корпоративные сайты предпочитают более тёмные оттенки силы и надёжности.Это имеет большое значение, для фирм, которые работают с событиями, для которых очень важна визуальная часть.
Голубой
Терпение, мир, спокойствие, надежность, любовь, стабильность. Один из самых любимых цветов, особенно у мужчин. Это связано со стабильностью и глубиной, профессионализмом, доверием.
Фиолетовый
Эмоции и ассоциации: власть, благородство, богатством, мудрость, независимость, честолюбие, достоинство роскошь, романтика (светлые оттенки), мистика и тайна (тёмные оттенки).
Фиолетовый цвет исторически ассоциируется с королевским величием, намекает на роскошь. Пурпурные оттенки отражают щедрость и богатство в целом, что делает их отличным выбором для модных товаров и предметов роскоши.
Более светлые оттенки, такие как лавандовый (фиолетовый с добавлением розового), навевают мысли о романтике, тогда как тёмные оттенки кажутся более шикарными и таинственными.
Коричневый
Цвет релаксации и уверенности. Коричневый означает приземленность, природу, долговечность, комфорт, надежность.
Чёрный
Эмоции и ассоциации: власть, изысканность, нервозность.
Стильный и элегантный цвет, связан с властью, изысканностью. Если вы не хотите, чтобы ваш сайт вызывал тяжелые чувства, старайтесь не использовать его в большом количестве. С другой стороны, если вы сделаете черный фон, он может увеличить перспективу и глубину.
Самый сильный из нейтральных цветов — чёрный — появляется практически на любом сайте. Он может вызывать разные ассоциации в зависимости от сопровождающих его цветов или доминировать над ними, если использовать его сверх меры.
Сила и нейтральность чёрного делают его отличным выбором для больших блоков текста, но как основной цвет он может создать ощущение нервозности или даже ассоциироваться со злом.
Для большинства сайтов чёрный используется, чтобы создать ощущение изысканности. От сочетания чёрного и белого в минималистичном дизайне создаётся впечатление элегантности и стиля.
Белый
Эмоции и ассоциации: чистота, простота, свежесть, доброта, невинность.
Этот цвет часто используют для фона минималистичных и простых сайтов. Кроме того, ни один цвет не позволит обратить столько внимания на остальные цвета, как белый.
Серый цвет
Эмоции и ассоциации: серьезность, консерватизм, традиционализм, нейтральность, формальность, меланхолия. Возбуждает ощущение чистоты и невинности.
Несмотря на то, что в некоторых ситуациях серый может создавать мрачную и грустную атмосферу, он всё же часто используется профессиональными дизайнерами. Всё дело в оттенках: чередуя их, можно получить все эмоции, вызываемые как чёрным цветом, так и белым. В общем, серый — это мощный инструмент в умелых руках. В сочетании с более яркими цветами в дизайне серый фон кажется современным, а не мрачным.
Бежевый
Эмоции и ассоциации: передаёт характер остальных цветов.
Сам по себе бежевый цвет довольно тусклый и невыразительный, но у него есть одно замечательное свойство: бежевый принимает характер цветов, которые его окружают. Поэтому, если он предназначен не для выражения сдержанности, бежевый служит в качестве фона или второго цвета.
Более тёмные оттенки бежевого создают ощущение традиционности и приземлённости, дают ощущение бумажной текстуры, а более светлые оттенки кажутся свежее и современнее.
Цвет слоновой кости
Эмоции и ассоциации: комфорт, элегантность, простота.
Цвет слоновой кости, а также кремовый вызывают практически те же эмоции, что и белый. Однако цвет слоновой кости более тёплый (или менее стерильный), чем белый, что создаёт большее ощущение комфорта, сохраняя при этом минимализм.
Можно использовать цвет слоновой кости вместо белого, чтобы смягчить контраст между ним и более тёмными цветами. Например, коричнево-оранжевые элементы размещенные на фоне цвета слоновой кости (который выглядит сероватым), сохраняют ощущение теплоты.
Цветовая гамма
У каждого сайта есть цветовая гамма, в которой основные цвета используются для заполнения большего пространства.
Триада (тройная гармония, треугольник)
Триада — основная и самая сбалансированная система из трёх цветов. В ней используется резонанс и дополнение цветов, но нет сложного контраста, из-за чего триада является самой надёжной гаммой.
На цветовом круге из 12 цветов выберите любые три, расположенные в 120 градусах друг от друга: один цвет для основного фона и два для контента и панели навигации.
Двойная комплиментарная система
Эту гамму труднее воплотить, но она может оказаться выгодным решением. Используется четыре цвета: два контрастных и два дополнительных.
Аналоги (последовательная система)
Гамма аналогичных цветов использует в основном дополняющие друг друга оттенки. Это позволяет особенно ярко подчеркнуть какие-то качества и вызвать определённые эмоции.Например, сочетание красного, оранжевого и жёлтого цветов подчёркивает энергичность и жизненную силу. Использовать такие гаммы очень просто, но сложно выбрать, какие именно цвета войдут в сочетание. Эффект от них будет преувеличен, так что ошибаться нельзя.
Советы по подбору цветовой гаммы для сайта
- Используйте на страницах максимум три-четыре цвета. Некоторые способны сделать отличный сайт, используя всего два цвета. Если Вы используете на сайте цветные фотографии, то можете использовать их доминирующий цвет для заголовков. Используйте необходимое количество цветов. Минимальное количество цветов, может способствовать серости Вашего сайта.
- Цвета сайта и логотип компании должны дополнять друг друга и существовать в одной палитре, обычно логотип уже содержит фирменные цвета той или иной организации.
- Если ваш сайт содержит богатый контент (интересные тексты), делайте ваши веб-страницы как можно более простыми для визуального восприятия, оставляйте большое количество незаполненного пространства, или освобождайте пространство между отдельными элементами страницы.
- Используйте для разных типов данных разные оттенки, выделяйте наиболее важные части страницы - цитаты, заголовки, маркеры, ссылки, списки, рамки, навигационные элементы и прочее. Например, заголовки делайте синим цветом, предупреждения лучше делать красным, цвет основного текста должен быть тоже определён однозначно.
Если сайт рассчитан на детскую аудиторию, то выбирайте цвета, выражающие радость, если на мужскую - не повредит изобилие синего, если на женскую - красные и розовые тона. Дизайнеры используют при разработке дизайна сайта для молодой аудитории более яркие цвета, тогда как для старших должны использоваться более умеренные, спокойные и сдержанные цвета. - Цвета фона и основного текста должны быть контрастными. Чем контрастнее, тем удобнее будет читать текст. Попробуйте читать голубой текст на белом фоне. Чёрный на белом, белый на чёрном, жёлтый на синем гораздо удобочитаемы.
- Всегда указывайте в теге BODY нужный Вам цвет фона, иначе рискуете столкнуть читателя с настройками его же собственного браузера.
- Некоторые специально прописывают браузеру использовать серый или пурпурный фон. Хотят смотреть сайты на фоне своего любимого цвета. Например, может получиться так, что цвет Вашего текста и их фона совпадут или будут схожи, тогда читатель может вообще текста не увидеть. Поэтому, не забывайте указывать на странице цвет её фона. На тёмном фоне лучше всего использовать белый или жёлтый цвета, голубой читается сложнее, можно и зелёный использовать.
- Иногда ассоциации настолько универсальны, что применимы для любой группы людей, например, дизайн с обилием синего, зелёного или коричневого.
- Для проекта о природе разумно брать зелёный, синий и коричневый. Для молодёжи с домашним Интернетом более привычен ночной выход в Интернет. Для них лучше создавать тёмный фон, светлый текст. Если Ваша аудитория состоит из людей, пользующихся Интернетом на своей работе, следует делать светлый сайт с тёмным текстом.
- Светлый фон лучше тёмного. Выбирая цветовую схему для страницы, тщательно продумайте все мелочи. Пусть у Вас уйдёт больше времени на создание, зато Вы всегда будете иметь довольных посетителей.
Инструменты-помощники для выбора цвета
К счастью, есть несколько инструментов, которые помогают воплотить теорию цвета на практике.
- Adobe Color CC- один из самых надёжных инструментов в выборе цвета.
- Paletton- простой инструмент для максимально быстрого выбора цвета.
- Flat UI Color Picker () - хороший инструмент для выбора цвета пользовательского интерфейса.
А если эти инструменты вам не подходят, вот ещё 28 сайтов с палитрами и разными инструментами для выбора цвета.
