Идеальное цветовое решение для сайта. Инструментарий.

цветовое решение для сайта
Голосов: 139

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

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

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

Ассоциации с цветами и психологическое воздействие цветов

Красный;

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

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

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

Голубой;

Ассоциации: мир, спокойствие, нежность, терпение, любовь, терпение, у мужчин (в особенности) ассоциируется со стабильностью, доверием, профессионализмом

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

Подходит: энергетическим компаниям, финансовым компаниям, авиаперевозчикам, технологическим компаниям, компаниям в сфере здравоохранения, с/х компаниям

Желтый;

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

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

Подходит: производителям товаров для детей, энергетическим компаниям, производителям питания, товаров для дома

Оранжевый;

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

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

Подходит: производителям товаров для детей, детским центрам, технологическим компаниям, компаниям в сфере здравоохранения

Фиолетовый;

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

Восприятие: хорошо стимулирует работу мозга

Подходит: финансовым компаниям, технологическим компаниям, компаниям в сфере здравоохранения

Зеленый;

Ассоциации: природа, исцеление, жизнь, здоровье, деньги, развитие, натуральность

Восприятие: успокаивает нервную систему, помогает сконцентрироваться

Подходит: энергетическим компаниям, финансовым компаниям,  производителям питания, товаров для дома, технологическим компаниям

Коричневый;

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

Восприятие: успокаивает нервную систему, располагает к отдыху

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

Серый;

Ассоциации: серьезность, консерватизм, традиционализм, чистота, невинность, интеллект, спокойствие, безопасность

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

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

Розовый;

Ассоциации: нежность, романтичность, женственность, привязанность, воспитание, слабость, юность, доброта, мечта, надежда, аппетит

Восприятие: усиливает чувствительность

Подходит: косметическим компаниям, производителями детских товаров,  товаров для женщин

Черный;

Ассоциации: стиль, элегантность, власть, изысканность, сила, решительность, эгоизм, молчание, загадочность

Восприятие: помогает сосредоточиться

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

Белый;

Ассоциации: чистота, простота, свежесть, доброта, невинность, легкость, справедливость, мир, свобода

Восприятие: воспринимается нейтрально

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

Выбор цветовой гаммы для сайта.

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

  1. Однотонный тип оформления;

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

  1. Многоцветный тип оформления на основе сочетаемости цветов;

Методика, в общем то понятна из одного названия. В данном случаи веб-разработчики используют несколько самодостаточных, гармонирующих друг с другом цветов. (Пример – сочетаемость цветов радуги).

Рис. 1 

Сочетание цветов радуга, сочетаемость цветов для сайта

  1. Многоцветный тип оформления на основе противоположности цветов;

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

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

Рис. 2

таблица сочетаемости цветов, сочетание цветов для сайта

Инструментарий для выбора цветовой гаммы.

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

  1. Kuler;
  2. Color Palette Generator;
  3. Contrast-A;
  4. ColorZilla;
  5. Colorotate;
  6. Colorccheme.

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

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