Одной из сложных задач во время работы над дизайном того или иного проекта всегда есть и будет выбор цвета и подбор цветовой палитры. Хорошо, если есть возможность оттолкнуться от цветов бренда, но удобно такое не всегда. Как минимум, если логотип черно-белый или бело-красный. В интернете уже столько тех же красно-белых сайтов, что от очередного становится попросту скучно и неинтересно, даже безразлично, что продаётся или о чем рассказывается на его страницах. Дизайнеры по-разному подбирают цвета для очередного дизайна, но почему-то идеи и мысли об использовании монохромной палитры приходят не сразу.
А ведь в действительности одноцветные проекты обладают большим эмоциональным влиянием на пользователей, предлагают больше пространства для фантазии и творчества и даже могут быть очень разными и… разносторонними. Некоторым мастерам удается создать сайты в одноцветной палитре настолько красивыми и поразительными, что обычный пользователь совсем иначе начинает воспринимать самые банальные вещи на странице. Им даже кажется, что цветов очень и очень много.
В этом материале мы посмотрим подробнее особенности монохромной палитры в веб-дизайне и разберемся, как её проще и быстрее всего можно создать.
База
Самый непростой момент в начале работы над монохромной палитрой – выбор основного цвета. Цвета, от которого придется отталкиваться, который будет присутствовать самостоятельно достаточно часто. Цвета, оттенки которого подходят для тематики и стиля в целом. Но самое простое – настроение. Подумайте о нем и выберете основу, исходя из принятых за многие века ассоциации.
Красный – любовь, зеленый – надежда (эко), розовый – романтика, синий – доверие, желтый – энергия, фиолетовый – фантазия, вера.
Внимательнее рассмотрите бренд и обратите внимание на один какой-то цвет. Возможно, именно он может стать главным, задать настроение всему проекту. Или если логотип бесцветный, подумайте над тем, зачем создается сайт и для кого, подберите базу под эти цели.
Но перед тем как утвердиться, стоит задуматься о насыщенности и оттенках этого базового цвета. Они могут вопреки самому цвету не подойти под проект, быть вызывающими или, наоборот, очень светлыми (пастельными). Возможно, придется как-то скомбинировать их, но и аляповатым это не должно выглядеть.
Проекты coaxsoft, .niika, normsugar созданы как раз в монохромном цвете, но при этом разброс оттенков настолько велик, что создается впечатление о множестве самостоятельных цветов. Более того, использование усреднённых оттенков между фиолетовым и розовым делает сайт внешне значительно интереснее. Тематику «сахара» можно отнести и к женской аудитории (розовый), и к особенностям достоверной информации для всех (фиолетовый).
Тон, насыщенность, оттенки
Ранее мы подробно разбирались с вопросом отличия оттенков, тонов и насыщенности друг от друга, поэтому сейчас детально рассматривать это уже не будем. Но отметим тот момент, что для работы с монохромной палитрой использование тонов и оттенков обязательно, причем в немалом количестве. При этом гораздо проще думать о каждом таком элементе, как об отдельном цвете и полагать, что палитра состоит из самостоятельных цветов.
Аналогично тому, как палитра содержит несколько разных цветов, монохромная палитра включает в себя базовый цвет, оттенки, тона и насыщения. При этом у каждого элемента своя роль в дизайне. Тона подчёркивают акценты, оттенки затемняют фоны, насыщения выделяют главное. Нагляднее видно в дизайнах hoyermotors, ouestsecuritemarine, labottegavail, oneupstud.
Некоторые примеры обладают высоким контрастом и даже благодаря одному постороннему цвету изменения в цветах видимы и очевидны, а пользователям становится понятнее куда нажимать, и где, и что читать, смотреть. Для упрощения подбора оттенков лучше всегда иметь под рукой таблицу цветов и оттенков. Мы о них тоже много рассказывали (ссылка выше в статье). Тогда выделить основные рабочие «цвета» будет гораздо проще и быстрее. И, разумеется, не стоит забывать о том, что монохромная палитра это не только цвет. Нет, это еще и работа с текстурами для фона, изображениями, тонировкой, градиентами.
Сочетание с элементами
Отлично, мы выбрали цветность монохромной палитры! Но как теперь сделать так, чтобы от переизбытка оттенков и тонов глаза пользователей (да и собственные тоже) не разбегались по всему холсту. Обычно для этого веб-дизайнеры используют не самые близкие цветовые отклонения друг от друга. Тогда разброс тонов получается более резким и сконцентрироваться визуально становится проще.
Проект ouestsecuritemarine наряду с оттенками черного цвета использовал контрастный красный цвет для выделения элементов пользовательского интерфейса. Аналогично futuramo использовали в фоне фиолетовые тона для выделения некоторых элементов, но основные главные иконки, кнопки и заголовки, наоборот, окрасили в яркие и совсем немонохромные цвета. Таким образом, они смогли подчеркнуть те моменты, на которые лучше сразу обратить внимание и взгляд пользователям. Дизайн investmentcalculator также создавался в монохромной палитре, но её применили в явном виде очень мало.
Таким образом, стоит обратить внимание на некоторые детали:
Цветовая тонировка – прежде чем использовать монохромную палитру и делать тонирование изображения, обесцветьте его, дабы цвета не смешивались, а ваш рабочий тон был явным.
Полужирные шрифты – тонкие шрифты могут потеряться на ярких или светлых пастельных тонах, каким бы цветом они не были окрашены сами. Поэтому жирные или с жирными элементами, штрихами гораздо лучше подойдут для монохромии.
Тени – иногда элементы дизайна сайта нужно оттенять и немного выделять, чтобы они не сливались. Да, сделать это с помощью небольших теней можно. Но гораздо интересней смотрятся тени не серые (как обычно), а имеющие монохромные оттенки и тона рабочей палитры.
Наглядно это видно на investmentcalculator. Каждая карточка обладает едва заметной тенью, а также и окрашенной градиентной рамкой, но очень тонкой, воздушной.
Иллюстрирование – используйте небольшие иллюстрации в фоне, дабы подчеркнуть монохромность вашего проекта. Это придаст ещё больше внимания, она не потеряется (не превратиться в сплошной некий безликий цвет). eulerr именно об этом и думали. С одной стороны – более «живой» дизайн получился, с другой – четкие контрастные цвета, но монохромность проявила себя в оттенках на текстуре, на окрашивании кнопок и иконок.
Совпадения цветности – если у вас уже есть какие-то картинки или видео в монохромном виде, то тогда все значительно становится проще, поскольку цвета должны соответствовать и в дизайне сайта, и в использованных изображениях.
Стиль и мода
Не стоит забывать о палитрах Material Design, тем более что этот год приветствует смелые и яркие решения, а ультрафиолет и сам по себе не бледненький цвет. Между тем стоит обратить внимание также на розовый, оранжевый, нежно-зеленые тона, желтоватые, голубоватые.
Не стоит полагать, что главное в монохромной палитре светлость и пастельность. Она как раз и удобна тем, что можно играть с цветами, тонами, насыщенностью. Добавляя по небольшой капле черного или белого, можно создать множество вариантов базового тона, и это замечательно. Если один вариант смотрится неказисто и немного будто бы сливается, можно добавить нейтральных цветов и изменить насыщение.
В тоже время есть один момент. И это – непостоянство моды. Сейчас тенденции более-менее не меняются (за пару последних лет), но что станет в следующем году или осенью? Что если цветность монохромных палитр перестанет вдруг быть актуальной? Поэтому, конечно, нужно осторожнее подбирать оттенки, чтобы не получился перевес цветов. Если создается зимний дизайн, то лучшим выбором станет синий, голубой, светло-фиолетовый, если для весны, то оранж, желтизна, зелень. Или небольшие смешения цветов, в качестве, например, выделения элементов, расставления акцентов.
Например, проект lifewisepetfood обладает разными цветами, но, по сути, все это тональности и оттенки бежевого. И этот цвет тематически наилучшим образом подходит в любое время года. Или вариации ahk-prod, fullrotation, ginoangelinifoods, где выбор цвета соответствует тематике проекта в той или иной степени, а значит, устареть не может в принципе.
Черный монохром
Не все монохромные палитры вообще обладают цветностью. Речь идет о темных палитрах из черного, серых оттенков или темных (темно-зеленый, темно-красный). То есть тех, что сами по себе уходят в черное. Такие палитры не менее интересны и создавать их сложнее, поскольку уже нет возможности разными тонами подчеркнуть разные элементы. Здесь всё черное (темное).
Но между тем, такой дизайн создаёт ощущение современности и новаторства. И используют черную монохромность в сочетании с цветом уже тогда, когда на страницах очень много контента, а домашнюю страницу нужно как-то оформить со вкусом и «построже». Вот и используют дизайнеры темный монохром с одним каким-то светлым цветом. Не более.
Например, antmoves, bee-creations, freshsince2015, lesanimals, minthisresort, clearmotion
Почти, но еще не монохромный
Почти монохромная палитра похожа на тот вариант, когда к монохромной добавляется чужеродный цвет. Но в данном случае, веб-дизайнеры уменьшают собранную ими палитру для конкретного проекта до пары цветов (тонов) и добавляют совершено иной цвет, который находится в спектре, ну, очень далеко. Например, к серым – алый, к зеленым – оранжевый, синим – желтый и так далее. Такой вариант нельзя назвать полностью монохромным, скорее, он – «почти монохромный».
Зато способен решить несколько проблем с выделением элементов, важных кнопок, заголовков, блоков и прочего. Также очень удобно использовать контрастный цвет для мелкого текста. В качестве примеров посмотрите на nstudio, cfli, в которых оттенки синего и фиолетового доминируют над красным и оранжевым. Но именно яркие и контрастные теплые цвета ломают монохромность. И сравните с lochduart, где всего-то и есть оттеночный голубой и белый. Интересны также finethought, nikoskatrina, Juste Debout.
Выводы
Монохромная цветовая палитра может стать не просто интересной для работы с ней, но и интересной для создания. Для попытки её сбора под некий проект и некоторую тематику. И причина тому банальна. Монохромность не устаревает, не выходит из моды, как таковая. Приоритетность к цветам, яркости, насыщению может меняться сезонно или годично, но сам стиль цветовой схемы всегда в тренде.
Многие известные проекты используют монохромность, чтобы представить новые продукты или услуги и это считается удобным для пользователей, так как человеческий глаз не отвлекается на разнообразие цветности; он, наоборот, получает возможность сконцентрироваться на контенте.
Непростой момент для всех веб-дизайнеров, новичок он или мастер, когда приходит надоедание для постоянных пользователей. Зачастую, мы с вами устаем от одного и того же дизайна в течение лет пяти, если посещаем каждый день один и тот же ресурс. Глазам и нашему восприятию хочется чего-то новенького, свежего. Поэтому удачными решениями становятся использование монохромности не в течение всего проекта, а только в некоторых областях, секциях или на отдельных страницах. Тогда цветовые переходы можно со временем заменить, обновить данные отдельно и немного освежить дизайн. Или, например, подбирать периодические новые цвета для какой-то одной страницы сайта и тем самым привлекать пользователей: «оу, у нас обновление дизайна страницы услуг. Зацените, что скажите?». И, своего рода, обратная связь с клиентами, и привлечение к посещению сайта.
Таким образом, монохромная палитра играет множество важных ролей в веб-дизайне и может быть невообразимо разной. Но при этом каждый отдельный сайт выглядит впечатляюще красивым и приятным визуально.