Дуплекс в веб-дизайне: обзор цветового тренда, который захватывает мир
Современный веб-дизайн наполнен цветами: от сдержанных оттенков до ярких, кричащих тонов. Встречайте: дуплекс — самый крутой цветовой стиль 2016 года.
Чистый дуплекс и другие тональные группы
Дуплекс сейчас везде — нравится он вам или нет. Как можно догадаться по названию, дуплекс — это изображение, в котором используются два цвета. Обычно предпочтение отдается ярким оттенкам, но если нужно, вы можете выбрать что-то более сдержанное.
Дуплексом часто ошибочно называют изображения с тремя или четырьмя цветами (не спрашивайте); на самом деле такие изображения правильнее было бы называть «триплексом» и «квадроплексом» соответственно.
То, что я называю «чистым дуплексом» получается, когда мы заменяем цвета темных и светлых тонов изображения.
Я поиграл с некоторыми популярными черно-белыми фотографиями — такими как фото Элизабет Тейлор в заголовке (кстати, именно это фото — триплекс, остальные дуплексы).
Авраам Линкольн |
Мохаммед Али |
LZ 129 «Гинденбург» |
Как видите, результаты выглядят прилично, если учесть насколько легким был сам процесс. Старые черно-белые фотографии обрели новую жизнь в стиле поп-арт.
Можно использовать эти изображения для оформления сайта или образа бренда — и они будут уместны.
Они несут ощущение счастья и радости: после легкой коррекции дуплексом даже фотография катастрофы Гинденбурга оказывается какой-то веселой и отчасти успокаивающей.
А теперь пример настоящего сайта.
New Deal Design |
За счет контраста между оттенками розового и желтого получилось очень энергичное изображение, но оно отлично работает — особенно с этими дурачащимися людьми. Я улыбаюсь всякий раз, когда смотрю на эту картинку (а ведь в этом вся суть дуплекса — вызывать улыбку).
Градиенты
Градиенты — это тоже дуплекс (или мультиплекс, в зависимости от количества цветов), но в градиенте другое распределение цветов.
По сути цвет делится на зоны, которые контролируются линией градиента или радиусом.
Градиенты часто используются в качестве фонов, но иногда их применяют для наложения (на другое изображение). Градиенты стары как мир, но в 2016 они снова в тренде.
Опять же покажу вам несколько примеров на скорую руку:
Очень базовый макет приложения с градиентным фоном |
Наложение градиента на фото Дональда Трампа |
Можем ли градиент сделать Дональда Трампа веселым и клевым? Задача, конечно, сложная, но градиент почти справился, невероятно!
Ниже вы найдете еще пару примеров использования обоих методов, которые я нашел в сети.
Solid Giant |
Snippet |
В примере Snippet мы видим достаточно стандартное наложение градиента, но благодаря прохладным оттенкам сайт выглядит благонадежно и расслабленно. Эффект простой, но работает хорошо.
Solid Giant выглядит более сложно и профессионально. У меня сложилось впечатление, что дизайнер следит за трендами дизайна и способен профессионально использовать их в своей работе.
Применить эффект триплекса совсем не сложно, но он фантастически выглядит и создает отличное первое впечатление.
Fantasy Premier League |
В этом примере одни и те же четыре цвета используются для оформления разных элементов страницы. Это дополняет баннеры в стиле дуплекс и привлекает внимание.
Полный текст статьи читайте на CMS Magazine