Простой гид по цветам для веб-дизайнеров


Очень полезные советы, которые помогут вам грамотней работать с цветом.

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

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

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

Естественно вы подсознательно понимаете теорию. Ради фана, попробуйте вернуться к этой статье через некоторое время, и вы увидите всё в новом свете.
Многие вещи станут гораздо более осмысленными, клянусь.



Выбор основного цвета  

Есть нечто забавное в том, что мы можем использовать 10 миллионов цветов в любой момент. Вдумайтесь в эту цифру – 10 миллионов.

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

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


Как выбрать начальный цвет

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

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


Советы по выбору начального цвета

  • Используйте то, что у вас есть.
Если у клиента уже есть логотип с установленным цветом, то обычно это и будет начальный цвет.

  • Ликвидируйте цвета ваших конкурентов.
Если у одного из ваших сильных конкурентов есть свой фирменный цвет бренда, то не нужно его копировать. Найдите цвета конкурентов, и удалите их из собственных цветовых схем.

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

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

  • Играйте в «слова».
Если вы топчитесь на месте, запишите все слова, которые вы связываете с бизнесом клиента. Это поможет вам получить несколько идей для цветов. Если вы уж совсем в ступоре, зайдите на любой сайт о цветах, и посмотрите какой подойдёт лучше.

Теперь вам нужно выбрать основной цвет для дизайна. Нужны простые цвета, такие как красный, зелёный, синий, жёлтый или розовый. С оттенками разберёмся чуть позже.

Допустим, вы выбрали голубой. (Отличный выбор, кстати!)



Выбор (приятного) базового цвета

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

Сперва, перейдите на сайты Dribbble и Designspiration, и нажмите на «Colors»  в обоих.

Затем вы должны увидеть следующую картину:


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

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

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


Разные оттенки синего цвета имеют разные характеристики. Выбирайте мудро!

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


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

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



Создание единой цветовой палитры

Хорошо, теперь вы должны выбрать шестнадцатеричное (HEX) значение цвета. Моё #30c9e8 . Нам нужно сделать палитру этого цвета. И это проще чем вы думаете.

Когда вы размышляете о процессе создания цветовой схемы,  скорее всего, вы представляете себе нечто в этом духе:


Виды палитр, которые вы наверняка привыкли видеть.

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

  • Белый
  • Тёмно серый
  • Светло серый (не обязательно)

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

  • Основной цвет (в нашем случае  #30c9e8 )
  • Цветовой акцент (мы вернёмся к этому чуть позже)

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


Как Thoughtbot и TedTodd, Вы не нуждаетесь в сложной цветовой гамме, чтобы создать большой красивый сайт.


Найдите свой акцент

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

Перейдите на Paletton и введите НЕХ код в поле цвета:


Введите ваши базовые цвета в Paletton.

Здесь вы можете найти свой акцент одним из двух способов.

Во-первых, можно нажать на кнопку “Add Complementary” и бац! Показывает оранжевый? Это твой акцент.


Paletton автоматически генерирует хороший акцент для вашего цвета.

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


Щёлкните на значки, чтобы найти цвет, который будет вам по душе.

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

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


У нас уже начинает вырисовываться хорошая палитра!

Теперь нам всего лишь не хватает немного серого.


Добавление серого цвета

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

Тёмный оттенок обычно используется для текста, а светлый, чтобы создавать границы со всем белым (обычно для фона).

Вы можете выбрать эти оттенки одним из двух способов:

  • Вы можете снова воспользоваться Dribbble и Designspiration, и найти хороший серый цвет в ваших предыдущих результатах. Но, как правило, легче найти пример «синего» сайта.

  • Если у вас есть Photoshop или подобная программа, то вы можете воспользоваться техникой Эрики Шунмейкер по согласованию серого цвета с цветом базы.


Создание гармонирующего серого цвета

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

  1. Создайте две формы и залейте их  #424242  и  #fafafa .
  2. Создайте слой-заливку поверх этих двух фигур.
  3. Измените её цвет на базовый ( #30c9e8 ).
  4. Установите режим смешивания на Overlay, а непрозрачность установите в промежутке от 5 до 40% (в примере ниже он установлен на 40).
  5. Откройте палитру и скопируйте получившиеся значения.

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


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



Вуаля! У нас получилось!

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


Наша прекрасная цветовая схема готова к использованию.



Применение цветовой схемы

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

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


Создание макета сайта в чёрно-белых тонах поможет вам применить цветовую
схему.


Наша цветовая схема в действии.

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

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

Тёмно серый цвет мы использовали для текста, логотипов и очертания значков. (Не забудьте проработать цвета для иконок – это очень влияет на общую картину).

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



Заключительное слово

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


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

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

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


Автор перевода: Iamdesigner
Оригинал: smashingmagazine.com


Смотрите также:
Три легких способа сделать ваш дизайн более гармоничным

Я — дизайнер

1 комментарий:

  1. Очень полезная статья, особенно для новичка, вроде меня(´。• ᵕ •。`)
    Спасибо большое\(^▽^)/

    ОтветитьУдалить