Что такое Duotone и как его использовать?

Именно этот тренд сподвиг нас еженедельно готовить колонку. Что такое duotone, какие особенности в использовании и как его применяют бренды. Сегодня будет так!

Автор Ognjen Divljak

Что такое Duotone?

Представьте себе монохромное изображение, только с добавленным поверх цветом или ярким градиентом — это и есть Duotone. С помощью этого эффекта можно сделать любое изображение сочнее и ярче. Естественно этот приём приехал к нам из печати.

Где и как его использовать?

В 2017 году мы наблюдали использование цветовой схемы у Spotify, SoundCloud, Uber и других. Чаще всего duotone берут вместе с другими фишками. А сейчас я покажу на примерах особенности использования эффекта:

Два контрастных цвета — можно цвета бренда, а можно и контрастные оттенки одного цвета. Используйте даже несовместимые цвета, градиенты и ступенчатые переходы — результат может быть позитивно непредсказуемым.

ubersignlanguage.com

Лучше брать фотографии с конкретными фокусированными изображениями, пейзажи лучше не использовать.

Благодаря синему оттенку мы будто заглядываем в офис компании. Если уберём насыщенный синий, согласитесь, уже не будет такого настроения. moddit.nl

Качество снимков тоже очень важно —  размытые и низкого качества не подходят. Хотяяяяяя, если добавить шумов, то можно получить неплохой результат, как мне кажется

Duotone может работать и на серьёзном портале. Здесь мы используем этот приём как фон, поэтому снимок привносит атмосферу, главный акцент делаем на содержании страницы. invest.mosreg.ru by ZephyrLab

Хотя снимок и немного размытый, прекрасно передано настроение evoluircultural.com.br

Контраст, контраст и ещё раз контраст!

Молодые, неординарные, яркие — именно такими видит команда Spotify своих пользователей. Spotify для Dribbble

Важно держать в голове информацию о том, куда пойдёт эта картинка: где будет текст, где кнопки и другие элементы интерфейса.

Хотя автор использует фотографию с огромным количеством деталей, мы этого не замечаем из-за правильно расставленных акцентов. ourstory.qso.com.au

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

Desert Nights

Если вам уже не терпится испытать все приёмы на своих работах, то вот здесь можете скачать 40 пресетов.

Заключение

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

Ничего нового не скажем, просто экспериментируйте!

Мы начали эту колонку для того, чтобы лишний раз посмотреть по сторонам. Будем рады, если вы тоже поделитесь с нами своими примерами и впечатлениями. Просто оставляйте в комментариях ссылку на проект и пару слов от себя. Всем вдохновения!✌️