Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

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

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

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

Стиль сайта

Первый совет предназначен тем, кто самостоятельно брендирует сайт – если нет четких указаний от заказчика или других лиц касательно выбора цветовой гаммы. Итак, первое - это стиль: то, что поймет человек о смысловой и эмоциональной наполненности сайта, если увидел его впервые, но еще не успел ничего прочитать. Ваша задача, чтобы первое впечатление о сайте отвечало действующему назначению этого ресурса. Но, к сожалению, до сих пор интернет кишит безликими страницами, которые не оставляют никакого впечатления, скучны и не вызывают интереса к прочтению текстовой информации. Только не подумайте - мы не против минимализма, но он должен быть изысканным. Тут вам мало быть дизайнером – важно стать настоящим стилистом. «По одежке встречают» - поэтому главное внимание необходимо уделять графической наполненности страниц. Если это фото – они должны быть достаточного качества и размера, а изображения лиц и объектов различимы. Яркие краски привлекают внимание, но если фото черно-белые – важна контрастность и техническая совершенность снимков, они должны заинтересовывать.  Основные цвета иллюстраций должны сочетаться и быть как бы продолжением гаммы фона и меню вашего сайта.

Цветовая композиция сайта

Что касается цветовой композиции фона, менюшек, кнопок и текста – смело прибегайте к инструментам интерьер-дизайнеров. Рекомендуем сделать своей настольной книгой томик Анны Стармер «Цвет. Энциклопедия». Вас не перестанет удивлять богатейшая база заготовленных гамм, которые сгруппированы по основным цветам: розовые, красные, оранжевые и коричневые, желтые, зеленые, синие, фиолетовые, нейтральные и серые. В каждой группе собрано около десяти гамм, представляющих собой приятные композиции из основного цвета, его оттенка и контрастных добавлений, присущих данной гамме. Богатое красочными эпитетами описание каждого оттенка и его роли в данной гамме поможет быстро и без труда определить, какое именно впечатление навевает смотрящему данная композиция, и можно ли ее применить в Вашей разработке.

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

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

Цвет текста на сайте

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

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

Как объективно определить, насколько хорошо получилась цветовая композиция вашего сайта после верстки? Сохраните страничку в .html, и откроейте ее в одной из вкладок вашего браузера. После этого просто попробуйте отвлечься от творения на несколько минут, отдохните. Пользуясь этим же окном браузера, погуляйте по сети, открывая другие страницы в других вкладках рядом с вашим  .html-документом. Когда через какое-то время вы случайно и неожиданно для себя откроете вместо нужной вкладки – вкладку с версткой сайта – обратите внимание на ваши ощущения при ее просмотре. Ответьте себе на такие вопросы:

  1. Приятное ли впечатление возникает при первои беглом взгляде на страницу?
  2. Ощущается ли стиль композиции? Такой имидж вы подразумевали, как создатель?
  3. Вызывает ли любопытство используемые графические элементы и иллюстрации? Достаточно ли различимы объекты и детали, изображенные на них? 
  4. Хорошо ли читаются меню и заголовки?
  5. Легко ли прочитывать и воспринимать текст?

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

Разные оттенки на разных мониторах 

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

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

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

 Успешных вам взаимоотношений с радугой! 

Цвет

Воздействие цвета в зависимости от его локализации

 

вверху

боковые поверхности или перспективы

внизу

Красный

Возбуждает, мобили-зует, оказывает эротогенное воздействие

Возбуждает

Воспринимается неестественно, может «обжигать»

Розовый

Вызывает ощущение легкости, счастья

Пробуждает чувство нежности

Часто ассоциируется с обонятельными ощущениями

Оранжевый

Способствует концентрации внимания

Вызывает ощущение тепла, способствует релаксации

Создает эффект «принадлежности» и тепла, иногда воспринимается неестественно

Желтый

Внушает приятные ошущения разрядки, отвлечения, способствует релаксации

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

Создает эффект «приподнятости», иногда — парения

Зеленый

Воспринимается неестественно

Успокаивает

Успокаивает,«охлаждает», может оказывать снотворное действие

Голубой

Навевает легкость, способствует релаксации

«Охлаждает», вызывает отчуждение

«Охлаждает» (более выраженно, чем зеленый)

Синий

Нагнетает тревожность, беспокойство

Провоцирует отчуждение в группе, в отношениях с психологом

Вселяет тревогу, «холод», ощущение бездны

Коричневый

Вселяет чувство тяжести, давления (для усиления чувства тяжести использовать не рекомендуется)

Угнетает, усиливает ипохондрическую настроенность

Укрепляет уверенность