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

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

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

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

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

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

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

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

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

  • Доминирующий цвет (основной) используется в 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, именно те цвета, которые есть? Почему логотип ни какой-то другой? Где скрыт явный смысл и глубокий?». Для пользователей это, может быть, и не столь важно, но они это на подсознании воспринимают, как естество миробытия. Но для веб-дизайнеров такие вопросы важны, и очень сильно, так как позволяют создать более гармоничные проекты.

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