Теория цвета для начинающих веб-дизайнеров
Вы решили сделать сайт. Один из первых вопросов, с которыми вы столкнетесь, будет звучать так: какие цвета выбрать? В этом нет ничего удивительного, ведь цвет — это первое, на что обращают внимание посетители, именно поэтому дизайнеры уделяют ему так много внимания.
Цвет влияет не только на внешний вид сайта, но и на его эффективность. Да, мы имеем в виду, что от выбранной цветовой гаммы зависит и среднее время, проведенное на сайте, и количество вернувшихся посетителей, и даже конверсии. Как видите, в интернете цвет играет одну из главных ролей. Пожалуйста, не забывайте об этом, когда начнете работать над своим собственным сайтом.
Здесь, впрочем, есть одно но: некоторые из нас с трудом могут подобрать футболку, подходящую по цвету к джинсам, поэтому не совсем понятно, как выбрать подходящую цветовую гамму для своего сайта. И тут на помощь приходит теория цвета. Изучив ее основы, вы сможете создавать красивые и эффективные цветовые комбинации. Опытные веб-дизайнеры смело полагаются на теорию, а значит, вы тоже можете так делать! Давайте поговорим о главных принципах, и вы поймете, что все гораздо проще, чем кажется.
Ваш рабочий инструмент
В основе этой теории лежит цветовой круг. Думаем, вы все его видели, а если нет, то вот он:
Это ваш главный рабочий инструмент, наглядно демонстрирующий, как цвета соотносятся друг с другом. Они делятся на основные — красный, синий, желтый — и дополнительные — зеленый, оранжевый и фиолетовый.
Круг не всегда состоит из шести секторов, их может быть, например, двенадцать. В этом случае добавляется шесть цветов третьего порядка, полученных в результате смешивания основных и дополнительных. Это желто-зеленый, зелено-синий, сине-фиолетовый, фиолетово-красный, красно-оранжевый, оранжево-желтый. Бывают круги, в которых 24 сектора — там дополнительных оттенков еще больше.
Теплые и холодные цвета
Цветовой круг делится на две половины. В одну попадают теплые цвета — это желтый, оранжевый и красный (включая большинство оттенков коричневого), а в другую — холодные: синий, зеленый, фиолетовый и оттенки серого. Какие цвета лучше — теплые или холодные? Это не совсем правильный вопрос, так как «лучшего» цвета не существует. Ваш выбор должен зависеть от того, какой эффект вам нужен. Теплые цвета считаются жизнерадостными, дружелюбными, стимулирующими, а холодные — успокаивающими и расслабляющими.
Итак, делаем вывод: выбор того или иного цвета зависит от вашего фирменного стиля и от того, какую атмосферу вы хотите создать. Можно смешивать теплые цвета с холодными, просто нужно знать, как это делается.
Учимся смешивать цвета правильно
Есть несколько рабочих цветовых схем, основанных на позиции цвета в цветовом круги. Начнем с самой простой, а затем перейдем к более сложным:
Комплементарная цветовая схема. Согласно этой схеме, вы можете сочетать два цвета, расположенных друг напротив друга. Это, например, красный и зеленый, или желтый и фиолетовый. Для более совершенного сочетания рекомендуем добавить нейтральный дополнительный оттенок — бежевый, светло-коричневый, светло-серый, черный или белый. Напоминаем, что на обычном цветовом круге таких оттенков нет.
Аналоговая цветовая схема. В этой схеме задействовано три цвета, расположенных рядом друг с другом. Примеры: оранжевый, желто-оранжевый и желтый, или фиолетовый, сине-фиолетовый и синий. Все эти цвета будут хорошо между собой сочетаться из-за близкого соседства в цветовом круге.
Цветовая триада. А здесь надо надо будет вспомнить геометрию. Не бойтесь, ничего сложного: вы берете три любых цвета, равноудаленных друг от друга. Если соединить их с помощью линий, получится равносторонний треугольник. Возможные комбинации: желто-зеленый, оранжево-красный и фиолетово-синий; желто-оранжевый, красно-фиолетовый и сине-зеленый. Это очень насыщенная, контрастная схема, поэтому вам нужно найти баланс и назначить один цвет основным, а два других сделать дополнительными.
Раздельная комплементарная цветовая схема. По этой схеме вы выбираете один цвет как основной и дополняете его двумя другими, идущими сразу за его комплементарным цветом на цветовом круге. Если соединить выбранные цвета линиями, получится равнобедренный треугольник. Варианты могут быть такими: красный, желто-зеленый и сине-зеленый, или фиолетовый, желто-оранжевый и желто-зеленый. Это довольно контрастная схема, однако не такая прямолинейная, как просто комплементарная.
Четвертичная цветовая схема. Здесь вам нужно выбрать две пары комплементарных цветов. Если вы соедините их на круге линиями, получится прямоугольник. Пример: желто-оранжевый, желто зеленый, сине-фиолетовый и красно-фиолетовый. Эта схема — идеальный вариант для необычных сочетаний. Боитесь устроить цветовой хаос? Тогда выберите один цвет как основной, а другие используйте для расстановки акцентов.
Монохромная схема. Из названия понятно, что в этой схеме используются оттенки одного цвета. Можно смешать темные и светлые оттенки, а можно ограничиться либо темными, либо светлыми. Такие сочетания выглядят свежо и лаконично.
Ахроматическая схема. Это классика: черный и белый, иногда дополненные серым, но ни в коем случаем не в роли основного цвета.
От теории — к практике
Итак, вы познакомились с главными цветовыми схемами и поняли, в чем их различие. Давайте посмотрим, как использовать это знание на практике. Перед вами несколько Wix-сайтов с разными цветовыми схемами. Думаем, они станут хорошим примером и источником вдохновения.
Готовы показать миру, на что вы способны? Создайте сайт сами на Wix — это просто и бесплатно!
Автор Команда Wix
