Основные тренды дизайна 2016

Вот что в тренде на ближайшие месяцы:

1. Множество многослойных элементов

Многослойные элементы и 3D-эффекты — это маст-хэв двухмерного веб-пространства. Многослойные элементы сейчас встречаются в самых разных проектах — благодаря классным техникам и еще более классным инструкциям, большинство из которых пришли к нам из Material Design.

Что особенно классно в многослойности, так это то, что она делает сайты более реалистичными. Пользователь словно может дотянуться и схватить тот или иной элемент дизайна. (И это хорошо!) Фишка в том, чтобы каждый слой выглядел легко и реалистично, ведь сама по себе многослойность естественна для объектов реального мира.

Вот несколько идей, как вы можете поэкспериментировать со слоями в своих проектах:

• «Приподнимите» элементы над фоном при помощи простых теней или анимаций. Olle, например, разместили множество элементов в разных плоскостях, но все они при этом выглядят взаимосвязано и естественно.
• Позвольте элементам пересекаться. Текст вполне может «заехать» на картинку.
• Скролинг с эффектом параллакса дает нам интересную возможность создавать многослойность — элементы плавно переходят с переднего плана на задний, и это не перегружает пользователя.
• Используйте геометрические формы, анимации и различные цвета, чтобы создать глубину. Пользователю должно казаться, что он буквально проваливается в визуальный дизайн — как в этом дизайне от Delete Agency.
• Создавайте слои, выходя за рамки. Пусть элементы дизайна выходят за границы фона и экрана.
• Расположите элементы поверх текстурного фона, чтобы визуально отделить верхний слой (который пользователь словно может потрогать) от самого фона.

2. Темные цветовые схемы

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

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

Зато темная цветовая схема в выгодном свете выставляет такие элементы дизайна, как крутое видео или анимация (даже если они едва различимы), жирная белая типографика, призывы к действию (call-to-action) в виде ярких цветных пятен; кроме того темные цвета отлично задают специфическое общее настроение в дизайне.

Кроме того, важно помнить, что темный — это не обязательно черный. Темные цветовые схемы могут основываться на множестве оттенков: от красных до синих и зеленых. Черные схемы самые распространенные — и здесь важно правильно подобрать «богатый» черный цвет, созданный из множества цветовых комбинаций. Плоский черный (или как его называют в полиграфии — «K black») будет создавать ощущение, что в дизайне чего-то не хватает.

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

3. Градиенты возвращаются

Градиенты — одна из техник, которые плоский дизайн оставил за бортом — возвращаются. (Более того, их теперь используют в основном в плоских паттернах).

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

Вот как дизайнеры применяют их сейчас:

• Градиент и плоский дизайн в связке создают очень уверенный образ, как на этом сайте для WPcrew.
• Двухцветные градиенты служат отличным фото-фильтром: они могут сделать скучные фотографии интереснее или добавить фону недостающей глубины.
• Хотя большинство градиентов сегодня используются в большом масштабе, их также применяют и для оформления мелких элементов (например, кнопок) или для привлечения внимания к определенной информации. Тем не менее, применимо к градиентам существует несколько дизайнерских “нет”. (Вы же не хотите создать дизайн, который словно выпрыгнул из 2012!)
• Осторожнее с мелкими градиентами. Использовать градиенты в иконках до сих пор не рекомендуется.
• Не перегружайте зрителя контентом. Градиентный фильтр на фотке может выглядеть классно (вспомните те крутые эффекты, которые постоянно использует Spotify), но само фото должно оставаться различимым.
• Дерзкие цветные градиенты обычно привносят в дизайн легкость и веселье. Убедитесь, что это настроение соответствует вашему контенту.
• Обратите внимание на сочетание цветов и контраст с точки зрения читаемости текста. Некоторые градиенты переходят в слишком светлый оттенок — и тогда на их фоне сложно читать белый текст. Обязательно протестируйте читаемость в разных вариантах адаптивной компоновки и на разных устройствах. (Когда используешь градиент, проблемы с читаемостью могут вдруг возникнуть там, где их вообще не ждешь).

Заключение

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