4 современные техники добавления цвета в веб-дизайн

4 современные техники добавления цвета в веб-дизайн
12.11.2017 КОММЕНТАРИИ: 1

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

  1. Монотонная цветовая схема

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

Монохромная цветовая палитра сайта Sydneystockhom 

  1. Дуотон

В отличие от монотонной техники, двухцветная строится на использовании двух контрастных цветов. В зависимости от целей и характера сайта, вы можете использовать провокационные сочетания спорящих кислотных оттенков или гармоничные смеси приглушённых тонов.  К примеру, веб-студия New Deal Design, чтобы выделиться на фоне многомиллионных конкурентов, применила «ядерный» микс фуксии и кричащего голубого. И кажется, им удалось достичь поставленной цели. Альтернативность, смелость и артистичность компании легко считываются с «обложки»…

Дуотон на сайте New Deal Design

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

Дуотон на сайте Evoluir

  1. Градиент

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

Однотонный градиент на сайте Zample

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

Двухцветный градиент на сайте Symodd

  1. Оверлей

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

Одноцветный оверлей на сайте Outlines

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

В качестве оверлея можно использовать как один, так и несколько цветов, и даже градиент. Пример последнего можно увидеть на сайте Bloomberg. Здесь градиент накладывается как бы средним слоем — поверх фотографий, но ниже текстовых подложек. О том, что градиентный слой един для всех снимков на странице, можно судить по цветовым переходам на горизонтальной полоске с последними новостями.

Наложение градиента на сайте Bloomberg

Подводя итоги…

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

Источник: www.webdesignerdepot.com

 

Комментарии

profile 31.10.2018 10:58
Need cheap hosting? Try webhosting1st, just $10 for an year.

Ответить Ответить с цитатой Цитировать

Добавить комментарий


Защитный код
Обновить