14 сентября 2016

Дуплекс в веб-дизайне: обзор цветового тренда, который захватывает мир

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

Обзор цветового тренда, который захватывает мир

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

Дуплексом часто ошибочно называют изображения с тремя или четырьмя цветами (не спрашивайте); на самом деле такие изображения правильнее было бы называть “триплексом” и “квадроплексом” соответственно. То, что я называю “чистым дуплексом” получается, когда мы заменяем цвета темных и светлых тонов изображения.

Я поиграл с некоторыми популярными черно-белыми фотографиями — такими как фото Элизабет Тейлор в заголовке (кстати, именно это фото — триплекс, остальные дуплексы).

Авраам Линкольн

Авраам Линкольн

Мохаммед Али

Мохаммед Али

LZ 129 «Гинденбург»

LZ 129 «Гинденбург» 

Как видите, результаты выглядят прилично, если учесть насколько легким был сам процесс. Старые черно-белые фотографии обрели новую жизнь в стиле поп-арт.

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

А теперь пример настоящего сайта.

За счет контраста между оттенками розового и желтого получилось очень энергичное изображение, но оно отлично работает — особенно с этими дурачащимися людьми. Я улыбаюсь всякий раз, когда смотрю на эту картинку (а ведь в этом вся суть дуплекса — вызывать улыбку).

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

Градиенты часто используются в качестве фонов, но иногда их применяют для наложения (на другое изображение). Градиенты стары как мир, но в 2016 они снова в тренде.

Опять же покажу вам несколько примеров на скорую руку:

Очень базовый макет приложения с градиентным фоном

Очень базовый макет приложения с градиентным фоном

Наложение градиента на фото Дональда Трампа

Наложение градиента на фото Дональда Трампа

Можем ли градиент сделать Дональда Трампа веселым и клевым? Задача, конечно, сложная, но градиент почти справился, невероятно!
Ниже вы найдете еще пару примеров использования обоих методов, которые я нашел в сети.

В примере Snippet мы видим достаточно стандартное наложение градиента, но благодаря прохладным оттенкам сайт выглядит благонадежно и расслабленно. Эффект простой, но работает хорошо.

Solid Giant выглядит более сложно и профессионально. У меня сложилось впечатление, что дизайнер следит за трендами дизайна и способен профессионально использовать их в своей работе.

Применить эффект триплекса совсем не сложно, но он фантастически выглядит и создает отличное первое впечатление.

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

Дальше — большe

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы.

26 сентября 2017

Как снизить когнитивную нагрузку на пользователя: 7 принципов дизайна

5 июля 2016

Будущее брендинга — это дебрендинг

28 сентября 2016

Сергей Попков. Почему вам стоит перестать быть контрол-фриком

21 июля 2016

Что ждёт цифровой банкинг в 2016—2017

15 сентября 2017

Как Netflix использует аналитику для подбора фильмов, создания контента и принятия многомиллионных решений

29 ноября 2016

Оптимизация воронок при помощи User Journey