Цвет и сочетание цветов в веб-дизайне
При создании сайта нужно ответить на ряд важных вопросов:
- какие цели преследует сайт?
- чем сайт будет выгодно отличаться от конкурентов
- как организовать структуру и навигацию, чтобы пользователям было удобно?
- какую информацию разместить на той или иной странице?
- какие цвета должны присутствовать на сайте?
Это не полный список вопросов, но несомненно каждый из них очень важен. Некоторые разработчики решают эти вопросы по ходу работы. Это не очень правильно. Конечно, в процессе могут, да и чаще всего возникают новые идеи и решения, которые меняют полностью, или частично, концепцию сайта. Тем не менее именно первоначальное видение готового продукта – наиболее важно.
Цвет сайта
В этой статье мы расскажем о такой важной составляющей веб-сайта, как цветовой гамме. И подкрепим статью примером в качестве замечательного медицинского сайта gangrena.info (Инновационный сосудистый центр). Почему именно этот сайт? Медицинская тематика, как никакая другая, ассоциируется у нас с цветом.
Итак, важность выбора цветовой гаммы для сайта трудно переоценить, так как именно выбор цвета формирует лицо сайта. Опять вернемся к нашему примеру. Давайте представим, что сайт, на котором можно найти информацию о том, что такое коронарная ангиопластика +и стентирование, будет выполнен в черных, или кричащих цветах? Вряд ли найдутся пациенты, которые захотят лечиться в такой клинике, зайдя на такой сайт. Когда мы думаем о медицинских веб-ресурсах, то нам представляются белый, голубой, синий, зеленый цвета. А точнее цвета, характерные для медицины. Проанализировав цвета сайта сосудистого центра, мы видим, что он выполнен в спокойной «медицинской» цветовой гамме. Основные цвета – белый, голубой, синий, зеленый, серый, бежевый. Яркие цвета лишь на отдельных формах и кнопках.
Такой сайт вызывает доверие. Отсюда вывод – гамма сайта должна соответствовать тематике.
Сочетание цветов
Но если с гаммой все предельно просто, то гораздо сложнее с сочетанием цветов. Ведь правильно подобранные цвета не только передают настроение, но и позволяют комфортно проводить время на сайте и получать нужную информацию. Т.е. красный текст на черном фоне или белый на светло-сером – будет невозможно прочитать. Большая часть аудитории, пришедшая на сайт, просто уйдет с него.
Наш пример (сайт сосудистого центра), по цветам полностью сбалансирован. На сайте очень много информации и она гармонично разбита на блоки, выделенные каждый своим цветом. Контент – белый, отделенный тенью, с выделенными синими сносками. Серо-голубое левое меню, голубое верхнее. Рубрика. Важная информация и кнопки выделены более ярко (синий фон, зеленые кнопки). Но несмотря на яркость все цвета гармонируют друг с другом.
Раньше, дизайнеры подбирали цвета «на глаз» и результаты, чаще всего, были не очень. Однако сейчас в сети существует множество сервисов по подбору цвета. Работают они примерно так: вы задаете основной цвет, а программа подбирает к нему идеальное сочетание. Это могут быть цвета в одной гамме, или контрастирующие друг с другом. Если у вас есть изображение, на основе которого будет построен сайт (например, использование фото в качестве подложки), то загрузив фотографию на один из сервисов по подбору цвета, она будет разбита на спектр, из которого можно выбрать нужную гамму.
Итак, второй вывод: цвета должны быть друг с другом согласованы.
И опять вернемся к нашему примеру. Сайт Инновационного сосудистого цента отвечает двум критериям на все 100%. Цветовая гамма полностью соответствует тематике и сами цвета согласованы между собой.