впа

аервкер Я помню, какой восторг у меня впервые вызвало смешивание базовых цветов во второстепенные, и как я считал, что если два цвета могут создать красивый новый цвет, значит, смешивание всех цветов вместе приведет к чему-то прекрасному! И как меня разочаровало осознание, что любые попытки сделать это неизменно приводили к странному цвету, который можно было назвать только одним словом: "ГРЯЗЬ".

Спустя годы, будучи неоперившимся веб-дизайнером, я продолжал экспериментировать с этим процессом. По мере обучения я попал в неизбежную ловушку, используя слишком много цветов, или смешивая их неправильно, и в результате у меня опять получалась "ГРЯЗЬ".

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

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

В процессе этого я извлек для себя "базовые принципы" по цветовым схемам в вебе, и жаль, что я не знал о них с самого начала. Для начала, нет необходимости в детальном изучении теории цвета, чтобы начинать ее применять. Зачастую вам сначала нужно приступить к практике, что-то вроде "раскрашивания по номерам".

В этой статье я поделюсь шестью верными советами, которым вы можете последовать и добиться эффективного использования цвета в веб-дизайне, это касается основ. Это не строгие правила, так как за свою карьеру вы создадите массу цветовых схем, которые могут значительно отличаться в применении. Скорее всего, они станут для вас отправной точкой, своеобразным гидом о том, как выжить, делая первые шаги в веб-дизайне и не оказаться затянутым в "ГРЯЗЬ".

1. Цветовая схема - это палитра, а не картина

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

Самый обычный процесс в веб-дизайне - создать отдельный дизайн в приложении типа Photoshop или Sketch. Если у вас нет примерного контента на месте, легко обнаружить, что у вас есть потрясающий дизайн, и клиенту понравится макет, но в реальной жизни он будет слишком отвлекать посетителей сайта. На самом деле процесс веб-дизайна очень плотно связан с контентом, при этом многие высококачественные дизайны кажутся пустыми, без особого контента на странице.

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

2. Для основы возьмите простую градацию серого

Для основного фона и текста можно выбрать неограниченное количество цветовых комбинаций. Однако моей рекомендацией будет освоить самые простые основы, и поэтому вам помогут белый или светло-серый на фоне с темно-серым текстом.

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

Размещение примерного контента-заполнителя поможет создать базовую раскладку в оттенках серого. Например:

В общем, вам стоит избегать чисто черного цвета для текста, так как темно-серый легче читается. Удобный диапазон находится где-то в границах #333333 и #666666.

Для фоновых цветов чистый белый #FFFFFF - самый надежный выбор для фонов под любой текст. Для других элементов фона вы можете выбирать любой в диапазоне #FFFFFF - #CCCCCC.

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

3. Выбирайте только один цвет для выделения

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

Выбирайте этот цвет, создав рамку вокруг базы, чтобы вам было видно, как он будет взаимодействовать со всеми остальными элементами. Затем откройте панель выбора цвета и щелкните в центре верхней правой четверти цветовой карты.

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

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

Вы только что узнали:

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

"Н" означает тон (hue), и как только вы найдете подходящий цвет, номер, отображающийся в окне будте вашим тоном.

4. Когда не знаете, что выбрать, выбирайте синий

Если вы сомневаетесь в выборе цветового акцента, выбирайте синий. Правда. Синий - самый многофункциональный цвет для работы, и он подойдет к широкому ряду сайтов. Цвета наподобие фиолетового или желтого могут выглядеть красиво, но они могут все испортить, если их неправильно использовать.

С другой стороны, вы можете сделать что угодно с синим цветом, и в качестве цветового акцента не ошибетесь. Если не уверены, с чего начинать работу с цветом, или какой цвет выбрать для проекта, начните с синего. Оттенок синего может отличаться, как в сторону темно-синего (235), так в сторону бирюзового (190) - в любом случае вы не ошибетесь.

В моем примере выбран оттенок 205. Когда вы выберете цветовой акцент, включите его в свой дизайн и посмотрите, подойдет ли он вам. Если вы используете цвет акцента на кнопках или в любой текстовой области, измените также и цвет текста. В моем примере я изменил текст в выделенных областях на белый.

5. Добавьте оттенки цветового акцента

Как только вы определились с цветовым акцентом, оставьте слайдер там, где он был. Вам понадобятся дополнительные цвета в дизайне, но они все станут вариациями основного цвета, который вы уже выбрали. Это упростит процесс.

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

Воспользуйтесь этим видом цветовых вариаций для:

Эффекты при наведении курсора

Границы

Более мягкий текст поверх цветового акцента

Градиенты

Эффекты света и тени

6. Держитесь подальше от верхнего правого угла

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

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

Для примера посмотрите, что произойдет, когда я слегка изменю тон своего дизайна, даже не прикасаясь к цветовой карте.

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

Глаза режет! Если вы хотите позаботиться о глазах посетителей вашего сайта, следуйте общим правилам тонировки вещей, оставаясь вне пределов правого верхнего угла на цветовой карте.

Вы только что узнали:

В предыдущих двух разделах вы научились использовать несколько разных аспектов цветовой теории. Вы научились работать с:

Насыщенность и яркость.

Когда вы перемещаете слайдер по цветовой карте, вы увидите, что меняются параметры "S" и "B", они означают "насыщенность" и "яркость" соответственно. Вы также увидите, что номер тона остается прежним. Итак, вы работаете над цветовыми вариациями, меняя насыщенность и яркость первоначального тона.

Насыщенность и оттенки

Насыщенность - насколько ярко выражен цвет. Например: "Моя рубашка пропиталась пролитым красным вином". На типичной панели выбора цветов насыщенность определяется тем, как много белого смешано с базовым тоном. Чем меньше белого, тем больше насыщенность.

Когда вы перетаскиваете курсор вправо по цветовой карте, вы снижаете количество белого, а значит, повышаете насыщенность, и значение в графе "S" повышается. Когда вы перетаскиваете курсор влево, ближе к белому углу, вы снижаете насыщенность, и значение в графе "S" снижается.

Это смешение белого с оригинальным тоном также называется оттенком. Эот термин возник из живописи, когда белая краска смешивалась с цветной краской.

Яркость и тени

Яркость относится к тому, сколько черного смешано с цветом. Чем меньше черного, тем больше яркость.

Когда вы перетаскиваете слайдер вверх по карте и уменьшаете количество черного, вы повышаете яркость, и величина в графе "B" повышается. Когда вы перетаскиваете его вниз, увеличивается количество черного, и величина "B" повышается.

Смешивание черного с оригинальным тоном, также называется созданием "тени". Этот термин также пришел из смешивания красок, когда черный смешивался с пигментом.

Оттенки

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

Опять-таки, термин возник из смешивания краски, где сначала смешивается серый, а затем он смешивается с цветным пигментом. Именно отсюда и пришло выражение "приглушить тона". Здорово, правда?

Монохроматические цветовые схемы

"Монохроматический" цветовой ряд - когда вы берете базовый цвет, и дополняете его оттенками, тенями и тонами. Вы только что научились, что означают все эти термины на практике. Итак, выбрав один цвет акцента и создав его вариации, вы создали монохроматичную цветовую схему.

Что дальше?

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

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

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

Если вы сомневаетесь, то всегда можете вернуться к "безопасным" советам, и убережете себя от "ГРЯЗИ" в изображениях.