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

Автор Ognjen Divljak

Что такое Duotone?

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

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

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

  • Два контрастных цвета — можно цвета бренда, а можно и контрастные оттенки одного цвета. Используйте даже несовместимые цвета, градиенты и ступенчатые переходы — результат может быть позитивно непредсказуемым.
ubersignlanguage.com
  • Лучше брать фотографии с конкретными фокусированными изображениями, пейзажи лучше не использовать.
Благодаря синему оттенку мы будто заглядываем в офис компании. Если уберём насыщенный синий, согласитесь, уже не будет такого настроения. moddit.nl
Как оживить офисный снимок? Просто берём приём Duotone. wonderfour.se
  • Качество снимков тоже очень важно —  размытые и низкого качества не подходят. Хотяяяяяя, если добавить шумов, то можно получить неплохой результат, как мне кажется 🙂
Duotone может работать и на серьёзном портале. Здесь мы используем этот приём как фон, поэтому снимок привносит атмосферу, главный акцент делаем на содержании страницы.
invest.mosreg.ru by ZephyrLab
Хотя снимок и немного размытый, прекрасно передано настроение evoluircultural.com.br
  • Контраст, контраст и ещё раз контраст!
Яркие и насыщенные цвета передают настроение и задают тон всему сайту. xiangjiaoxiansheng.com
Молодые, неординарные, яркие — именно такими видит команда Spotify своих пользователей. Spotify для Dribbble
  • Важно держать в голове информацию о том, куда пойдёт эта картинка: где будет текст, где кнопки и другие элементы интерфейса.
Хотя автор использует фотографию с огромным количеством деталей, мы этого не замечаем из-за правильно расставленных акцентов. ourstory.qso.com.au
Duotone-блоки на главной странице — ярко, необычно и сочно. myfest.es
  • Кстати, не обязательно использовать только фотографии. Можно обыграть векторное изображение. Здесь, конечно, уже не ограничиваются одним цветом или оттенком.
Desert Nights

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

Заключение

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

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

Total
29
Shares

Хочу подписаться

Получайте последние новости первыми