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

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

Так есть ли хитрости и лайфхаки?

У всего есть основа

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

Но размышляя о колесе осознаешь, что оно помогает понять и объясняет (наглядно) о том, как цвета «играют» вместе. Дополнительными цветами при этом являются те, которые противоположны друг другу на цветовом колесе, и именно они-то всегда отлично сочетаются друг с другом. Похожие цвета располагаются друг с другом и обычно очень схожи.

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

Магическое число три

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

  • Доминирующий цвет (основной) используется в 60% всего дизайна.
  • Вторичный цвет – около 30% всего дизайна.
  • Дополнительный цвет – не более 10%.

Наглядные тому примеры: acrylice, capitolhillhistory, rbuilddev, ting. Все они имеют малое количество цветов и оттенков, но при этом создается впечатление, что цветов, наоборот, много. Кроме того, дизайны выглядят приятными и спокойными, даже тогда, когда кажется, что сочетание черного, алого и белого ярко и дерзко.

Секрет оттенков

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

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

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

 

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

Положительные ассоциации оттенков

  • Красный: любовь, важность, энергия
  • Оранжевый: юность, амбиции, энтузиазм
  • Желтая: приветствие, радость, энергия
  • Зеленый: рост (в любом смысле, рост прибыли или рост в понятии развития чего-либо или кого-либо), природа, удача
  • Синий: мир, доверие, безопасность
  • Фиолетовый: мудрость, уважение, богатство

Негативные ассоциации оттенков

  • Красный: предупреждение о войне, досада, опасность
  • Оранжевый: тревожность, агрессивность, нервозность
  • Желтый: неуверенность, отвлечение, паника
  • Зеленый: зависть, опасения, неопределенность
  • Синий: печаль, раскаяние, бесстрастие
  • Фиолетовый: скука, ненависть, отвращение

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

Яркость – залог успеха

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

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

Например: rockpapersimple, notpot, smth, heckfieldplace, yukienail-heartshairny, .dubaipropertyforsale. Все проекты имеют разные цветовые сочетания и разную доминанту оттенка. Но обратите внимание, что в дизайне сайта недвижимости зеленый или фиолетовый смотрелся бы не так уместно, как голубой и оттенки синего. Зеленый цвет для технологии развития бизнеса – это и олицетворение роста, и сравнение с природой. Сайт с отелем для отдыха в Грузии, в целом, хорошо сделан. Но, когда смотришь на темные фотографии интерьера, да еще и на сером фоне, создается некоторая тяжесть восприятия, будто проваливаешься в сумерки с малым количеством света (любого). Да, восприятие цветов и оттенков может стать личностным и субъективным, но в большинстве случаев оно совпадает и едино для многих пользователей.

Темное или светлое

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

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

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

Нейтральная коррекция

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

Работа с таким методом позволяет использовать цветовые слои для создания контраста в необходимых областях, сохраняя при этом насыщенность цвета. С чего удобнее начать? Установите прозрачность слоя 50 процентов – черного или белого цвета – и посмотрите, увеличить ее или уменьшить. Но именно  прозрачность, а не заливку.

Яркие тому примеры на hirschlerlaw, hotello, azwildlifehero, palazzoravizza, vesperhomes. В отдельных случаях тонировка выполнена темной, но контрастные темно-фиолетовые иконки все равно смотрятся красиво и различимо, потому как яркость цвета не позволяет оттенкам слиться. В иных вариантах в качестве тонировки используется размытое фоновое изображение с добавлением небольшого количества серой заливки. Но в любых вариантах есть общее – четкость и ясность элементов на верхних слоях, хотя и они в своем составе имеют цвета палитры.

Тренды важны всегда

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

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

Завершение

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

Таким образом, работая с цветом не столько важно использовать только модные оттенки, сколько представлять, как среди этих цветов будет «уютно» контенту, элементам, фоновому изображению или иным картинкам и так далее. Подумайте о том, какое настроение вы хотите передать пользователям, что пробудить в них, о чем заставить задуматься, может быть, стоит использовать что-то ассоциативное и метафорическое?

Каждый из нас, открывая тот или иной сайт, видит контент, цвета, но мы редко задумываемся: «А почему на сайте Подружка или Ozon именно те цвета, которые есть? Почему логотип не какой-то другой? Где скрыт явный смысл и глубокий?». Для пользователей это, может быть, и не столь важно, но они это на подсознании воспринимают, как нечто естественное. Но для веб-дизайнеров такие вопросы очень важны, так как позволяют создать более гармоничные проекты.

Как вам материал?