Блог

Цветовые схемы

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

Цветовые схемы в разработке дизайна – рекомендации новичкам

Цветовые схемы в разработке дизайна – рекомендации новичкам

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

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

Интернет полон информации о цветовых решениях и теориях. Это дает возможность понять все тонкости яркости, насыщенности, тонов, цветовых схем.

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

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

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

Цветовая схема – это всего лишь фон

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

Цветовые схемы в разработке дизайна – рекомендации новичкам

Иллюстрации на нежном цветовом фоне смотрятся красиво, выделяются и привлекают внимание.

Цветовые схемы в разработке дизайна – рекомендации новичкам

Изображения на фоне ярких цветовых схем теряются в глазах посетителей, все внимание идет на задний план. К сожалению, в сети таких примеров масса.

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

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

Оттенки серого – хорошее начало

Вы можете применять бесконечное количество цветов в работе над своими проектами. Но, для начала лучше выбирать самые простые – белые, светло-серые фоны, текст темно-серого оттенка.

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

Вот хороший пример:

Цветовые схемы в разработке дизайна – рекомендации новичкам

Для текста не стоит использовать самый черный цвет, напоминающий уголь. Самым оптимальный вариант – это темно-серый. Желательно, чтобы ваш оттенок был в диапазоне #333333-#666666.

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

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

Выделения одного цвета

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

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

Цветовые схемы в разработке дизайна – рекомендации новичкам

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

Сейчас мы работаем всего с тремя цветами:

Цветовые схемы в разработке дизайна – рекомендации новичкам
  • Фон.
  • Текст.
  • Выделение.

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

Теперь вы умеете выбирать оттенки. Обратите внимание на параметр «Н», он меняется, когда вы двигаете ползунок. В нем выводится оттенок выбранного цвета.

Цветовые схемы в разработке дизайна – рекомендации новичкам

Если есть сомнения, пользуйтесь синим

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

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

Цветовые схемы в разработке дизайна – рекомендации новичкам

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

Цветовые схемы в разработке дизайна – рекомендации новичкам

Варьируйте цвет

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

Для этого, нужно перемещать курсор на карте выбранного цвета.

Цветовые схемы в разработке дизайна – рекомендации новичкам

Эта вариация подойдет таким компонентам:

Свет и тень

Цветовые схемы в разработке дизайна – рекомендации новичкам

Градиенты

Цветовые схемы в разработке дизайна – рекомендации новичкам

На фоне оттенка выделения светлый текст

Цветовые схемы в разработке дизайна – рекомендации новичкам

Рамки

Цветовые схемы в разработке дизайна – рекомендации новичкам

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

Цветовые схемы в разработке дизайна – рекомендации новичкам

Избегайте правого верхнего угла

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

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

Для наглядности сначала попробуем взять другой цвет не перемещая курсор.

Цветовые схемы в разработке дизайна – рекомендации новичкам

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

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

Цветовые схемы в разработке дизайна – рекомендации новичкам

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

Яркостью и насыщенностью

Изменяя положение курсора на цветовой карте, мы видим смену значений «B» и «S», которые означают Яркость (Brightness) и Насыщенность (Saturation). При этом, заметьте, что значение параметра «Н» (оттенок) не меняется.

Цветовые схемы в разработке дизайна – рекомендации новичкам

Бледностью и насыщенностью

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

Чтобы ее увеличить, нужно перемещать курсор по цветовой карте вправо. Таким образом мы будем уменьшать количество белого, что делает цвет более насыщенным. И наоборот, если перемещать его влево, мы делаем цвет бледнее, то есть насыщенность падает.

Цветовые схемы в разработке дизайна – рекомендации новичкам

Приглушенностью и яркостью

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

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

Цветовые схемы в разработке дизайна – рекомендации новичкам

Тонами

Образование тона – это процесс добавления в цвет серого. Делается это при перемещении курсора в низ и влево. Исходя из этого можно сделать вывод, что, если значения яркости и насыщенности ниже 100% мы будем иметь тон, всегда.

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

Монохромная цветовая схема представляет собой несколько вариаций определенного оттенка, которые достигаются изменением яркости и насыщенности, соответственно образованием тонов.

Цветовые схемы в разработке дизайна – рекомендации новичкам

Куда двигаться далее?

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

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

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

Перевод, автор статьи Kezz Bracey

Соц. сети