Поделиться , , Google+, Pinterest,

Опубликовано в:

Тренды использования цвета в веб-дизайне в 2016 году

В этой статье мы расскажем вам о 7 трендовых цветах сегодняшнего дня. Мы объясним логику каждого из них и приведем примеры удачного использования этих цветов на реальных сайтах.

Тренды по использованию цвета в веб-дизайне в 2016 году

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

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

1. Одноцветные схемы

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

image_1

Line Equality  — это яркий пример использования данного тренда в дизайне веб-сайта. Лаймовый цвет обычно плохо сочетается с другими цветами. Но здесь фон взаимодействует с главным объектом.

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

2. Контраст приглушает цвета

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

image_2

Дизайнеры в Studio Stylistic  используют всплески бирюзового на черном фоне для создания решительного шаблона. Бирюзовый повторяется в словах, лого. Графику укрепляет каждый элемент, заметно выделяющийся на черном фоне.

3. Блокинг и hover-эффекты

Тренды блоков и hover-эффектов популярны не только из-за их наружности, но также за их удобство. Блоки хорошо работают с решеточным макетом, в котором они выделяются драматичными цветами.

image_3

С hover-эффектом элементы при прокрутке меняют цвета. Примером может служить сайт PFD . Яркие цвета некоторых карточек заметно выделяются на белом фоне. По окончании hover-эффекта карточки закрашиваются (как верхняя левая карточка) и отображают количество лайков. Этот эффект дает понять, что объект кликабельный. Блокинг и hover-эффекты не только очень практичны, но и стильно выглядят. Цветные блоки создают макет, который подталкивает к взаимодействию, когда по окончании hover-эффекта блок закрашивается.

4. Текстура

Текстура используется чаще всего на нейтральных фонах. Для эксперимента она может комбинироваться с яркими цветами.

image05

Сайт Tacospillet  использует заполненный фон, а на передний план выносятся картинки с текстурой. Яркие цвета слегка смягчаются. Текстура также придает графике уникальную эстетику.

image_5

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

5. Выделяющийся текст

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

image07

На сайте For the Love of the Reef акцент падает только на слово «love». Это хороший визуальный трюк, потому что кнопка, призывающая к действию, также выделена желтым. Создается искусное взаимодействие между ними.

6. Кнопки и UI элементы

Как и со словами, яркие цвета могут выделить кнопки или другие UI элементы. Это привлекает внимание и упрощает юзабилити.

image_7

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

image09

 

7. Навигационные средства

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

image10

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

Источник: say-hi.me

Оригинал источника: Web Design Book of Trends 2015-2016 

comments powered by HyperComments