Smartlanding

Сinemagraphs: тренд web-дизайна

cinemagraph - тренд веб-дизайнаПривет, друзья. Сегодня поговорим об одном из трендов в веб-дизайне — синемаграфах (cinemagraphs). Для тех, кто еще не в курсе — это что-вроде «живых» фотографий (гифок), но отличающихся тем, что вся картинка неподвижна, а анимирован только один (реже 2-3) отдельных элемента.

Получается зацикленная, плавная анимация, которая и акцентирует на себе внимание.

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

Вот несколько примеров, которые мне понравились:

По настоящему популярными синемаграфы стали после того, как социальные сети разрешили автоматически воспроизводить видео и gif, а также появилась возможность создавать их при помощи камеры в телефоне.

На сегодняшний день их называют трендом 2018 года, который активно используется не только в соц. сетях. И неудивительно, по данным различных исследований, вирусность синемаграфов от 40 до 70% выше, чем у обычных картинок, что, в свою очередь, свидетельствует и о большей вовлеченности аудитории, что, в свою очередь, увеличивает время пребывания на странице, что, в свою очередь, положительно влияет на поведенческие факторы и т.д.

Цепочку можно и продолжить :)

Как использовать cinemagraphs

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

Часто, от разных экспертов мы слышим, что на landing page, возле формы, нужно показать товар, пример его использования или результат. Так почему бы вместо картинки не использовать cinemagraph?

Довольно интересно смотрелся бы слайдер.

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

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

синемаграф

пример синемаграфа

cinemagraph

Да, в карточках товаров это может быть слишком навязчиво, но почему не оживить фото при наведении курсора?

А какие у вас идеи использования cinemagraphs?

3 комментария

  • Михаил

    Круто. А как их можно сделать?

    Ответить
  • Александр

    тоже интересует вопрос этот

    Ответить
  • Дмитрий

    Да полно уроков на YouTube, особенно на англ. Кто-то в фотошопе, кто-то в after effects, кто-то умудряется просто на iphone. Кроме того есть даже специальные программы.

    Ответить

Добавить комментарий