Приступая к разработке идеи нового сайта (или планируя изменения существующего web-ресурса), перед создателем чуть ли не главным вопросом становится подбор цвета страничек будущего творения. Для начинающих дизайнеров, как правило, данный выбор (при столкновении с ним на практике) становится серьезным препятствием к тому, чтобы работа над сайтом была проделана легко, быстро и с удовольствием.
На первый взгляд кажется все просто: мол «сайт будет в голубых тонах с прибамбасом тут и какой-нибудь полоской здесь, а на фоне голубого дорисую красивые завитки бледно-голубым». Но вот открывает умелец чудесную RGB- палитру любимого графического редактора и начинаются многочасовые муки творчества по подбору наилучшего сочетания оттенков из необъятной цифровой радуги…
А как иначе? Попробуйте воспользоваться нашими скромными советами.
Стиль сайта
Первый совет предназначен тем, кто самостоятельно брендирует сайт – если нет четких указаний от заказчика или других лиц касательно выбора цветовой гаммы. Итак, первое - это стиль: то, что поймет человек о смысловой и эмоциональной наполненности сайта, если увидел его впервые, но еще не успел ничего прочитать. Ваша задача, чтобы первое впечатление о сайте отвечало действующему назначению этого ресурса. Но, к сожалению, до сих пор интернет кишит безликими страницами, которые не оставляют никакого впечатления, скучны и не вызывают интереса к прочтению текстовой информации. Только не подумайте - мы не против минимализма, но он должен быть изысканным. Тут вам мало быть дизайнером – важно стать настоящим стилистом. «По одежке встречают» - поэтому главное внимание необходимо уделять графической наполненности страниц. Если это фото – они должны быть достаточного качества и размера, а изображения лиц и объектов различимы. Яркие краски привлекают внимание, но если фото черно-белые – важна контрастность и техническая совершенность снимков, они должны заинтересовывать. Основные цвета иллюстраций должны сочетаться и быть как бы продолжением гаммы фона и меню вашего сайта.
Цветовая композиция сайта
Что касается цветовой композиции фона, менюшек, кнопок и текста – смело прибегайте к инструментам интерьер-дизайнеров. Рекомендуем сделать своей настольной книгой томик Анны Стармер «Цвет. Энциклопедия». Вас не перестанет удивлять богатейшая база заготовленных гамм, которые сгруппированы по основным цветам: розовые, красные, оранжевые и коричневые, желтые, зеленые, синие, фиолетовые, нейтральные и серые. В каждой группе собрано около десяти гамм, представляющих собой приятные композиции из основного цвета, его оттенка и контрастных добавлений, присущих данной гамме. Богатое красочными эпитетами описание каждого оттенка и его роли в данной гамме поможет быстро и без труда определить, какое именно впечатление навевает смотрящему данная композиция, и можно ли ее применить в Вашей разработке.
Сочетание цветов на сайте
Помните, что психо-физиологическое воздействие цветов основано на многовековых ассоциациях, присущих подавляющему большинству цивилизованных людей. Например, нет сочетания цветов, наиболее метко обозначающих роскошь и богатство, чем золото на бордовом. Вряд-ли кто-то поспорит, что самые романтичные оттенки – розовые, а охра цвет красной глины, обожженной на солнце) - один из основных цветов природной гаммы. Разве салатовый – не цвет весны? И не правда, что сочетание красного и зеленого – безвкусица: именно это сочетание (особенно если добавить изящный золотой орнамент) символ монаршества, королей и царей Европы. Хотя можно поверить утверждениям о том, что длительное наблюдение сочетания фиолетового и оранжевого может привести к обострению психических проблем у душевнобольных людей, поэтому призываем использовать это сочетание лишь в ультранеординарных случаях.
Цвет текста на сайте
Уже в процессе выбора цветовой гаммы вы определили, какой тон будет фоновым, в каком цвете – меню, и как выделить кнопки с помощью цвета. Советуем не забыть и про цвет текста. Конечно, ничто не мешает сделать Вам его классически черным, но композиция будет смотреться законченно и оригинально, если цветом для текста будет выбран самый контрастирующий с фоновым и самый темный тон в гамме. Помните главное – цвет текста не должен быть ярким, иначе строчки будут сливаться при чтении и неприятно раздражать читающих. Лучше всего, если цвет фона будет самым светлым оттенком гаммы, а к тексту применить самый темный ее тон. Хорошо смотрится и наоборот: если фон темный, к тексту примените самый светлый пастельный оттенок гаммы.
Проверка выбранной цветовой гаммы для сайта
Как объективно определить, насколько хорошо получилась цветовая композиция вашего сайта после верстки? Сохраните страничку в .html, и откроейте ее в одной из вкладок вашего браузера. После этого просто попробуйте отвлечься от творения на несколько минут, отдохните. Пользуясь этим же окном браузера, погуляйте по сети, открывая другие страницы в других вкладках рядом с вашим .html-документом. Когда через какое-то время вы случайно и неожиданно для себя откроете вместо нужной вкладки – вкладку с версткой сайта – обратите внимание на ваши ощущения при ее просмотре. Ответьте себе на такие вопросы:
- Приятное ли впечатление возникает при первои беглом взгляде на страницу?
- Ощущается ли стиль композиции? Такой имидж вы подразумевали, как создатель?
- Вызывает ли любопытство используемые графические элементы и иллюстрации? Достаточно ли различимы объекты и детали, изображенные на них?
- Хорошо ли читаются меню и заголовки?
- Легко ли прочитывать и воспринимать текст?
Если чувствуете, что этот прием все равно не позволяет вам сколько-нибудь абстрагироваться от субъективного восприятия работы, покажите ее коллеге, которому доверяете, пусть он даст вам ответ на эти вопросы.
Разные оттенки на разных мониторах
Помните, что цвета отображаются по-разному на разных компьютерах, что зависит от типа и настроек монитора. Уделите полчаса и поиграйтесь с настройками своего монитора, чтобы убедиться, что искажение применяемых вами цветов происходит в допустимых рамках, и насыщенные оттенки не переходят в кислотные, а пастельные узоры не сливаются при незначительном увеличении яркости, что цвета не становятся мрачными при небольшом затемнении, и с контрастом тоже все в порядке.
Такой метод подбора цветов в web-дизайне поможет вам самым быстрым способом решить сразу несколько задач: профессионально использовать сочетание цветовых тонов в брендировании сайта, создать его собственный стиль, сделать страницу приятной для восприятия и изучения содержащихся в ней материалов.
Напоследок, хотим предложить таблицу психо-физиологического восприятия цвета в зависимости от его локализации на странице (из 2 тома Рогова “Настольная книга практического психолога»). Ее применение будет особенно полезно во время подбора вариантов расположения меню и вестки модулей и фреймов.
Успешных вам взаимоотношений с радугой!
Цвет |
Воздействие цвета в зависимости от его локализации |
||
|
вверху |
боковые поверхности или перспективы |
внизу |
Красный |
Возбуждает, мобили-зует, оказывает эротогенное воздействие |
Возбуждает |
Воспринимается неестественно, может «обжигать» |
Розовый |
Вызывает ощущение легкости, счастья |
Пробуждает чувство нежности |
Часто ассоциируется с обонятельными ощущениями |
Оранжевый |
Способствует концентрации внимания |
Вызывает ощущение тепла, способствует релаксации |
Создает эффект «принадлежности» и тепла, иногда воспринимается неестественно |
Желтый |
Внушает приятные ошущения разрядки, отвлечения, способствует релаксации |
Возбуждает, может привести к неприятным ощущениям |
Создает эффект «приподнятости», иногда — парения |
Зеленый |
Воспринимается неестественно |
Успокаивает |
Успокаивает,«охлаждает», может оказывать снотворное действие |
Голубой |
Навевает легкость, способствует релаксации |
«Охлаждает», вызывает отчуждение |
«Охлаждает» (более выраженно, чем зеленый) |
Синий |
Нагнетает тревожность, беспокойство |
Провоцирует отчуждение в группе, в отношениях с психологом |
Вселяет тревогу, «холод», ощущение бездны |
Коричневый |
Вселяет чувство тяжести, давления (для усиления чувства тяжести использовать не рекомендуется) |
Угнетает, усиливает ипохондрическую настроенность |
Укрепляет уверенность |