Главная задача любого интерфейса — сделать всё, чтобы как можно больше пользователей захотели выбрать его в качестве инструмента для решения своих задач. Дизайнеры используют разные приёмы, чтобы привлечь внимание аудитории и обеспечить погружение в UI.

В статье поговорим о нестандартном элементе, который отлично подходит для вовлечения. Разберёмся, что такое синемаграф и как правильно его использовать в информационных и коммерческих проектах.

Что такое синемаграф

Cinemagraph — изображение, сочетающее статические и динамические элементы. Обычно 70-80% площади картинки остаётся неподвижной, а остальная поверхность анимируется. На выходе получается медиаконтент с интересным эффектом, хорошо привлекающий внимание.

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

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

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

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

Синемаграф — нестандартный элемент дизайна, который редко встречается в digital-проектах. Его сложно реализовать — понадобится опытный специалист, который давно работает с анимацией.

Для хорошего синемаграфа надо сделать изображение в высоком разрешении и потратить несколько часов работы в графическом редакторе. Сделать зацикленную анимацию можно в Photoshop или Adobe Premier.

Есть даже приложения для мобильных устройств, которые подходят для решения этой задачи. Под iOS большинство платные, а вот под Android есть несколько бесплатных продуктов.

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

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

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

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

Как cinemagraph влияет на опыт пользователей

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

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

Дизайнер анализирует конкурентов, собирает идеи, формирует структуру и решает использовать на первом экране синемаграф. Он просит заказчика сделать фотографию двух людей, сидящих за компьютерами и короткий ролик, а остальное сделает сам.

После нескольких часов работы у него получается крутой синемаграф, который отлично передаёт атмосферу коворкинга. Мы видим, что парень спокойно работает за ноутбуком. У него сосредоточенное выражение лица, а развевающиеся волосы подчёркивают комфортность обстановки.

Обратите внимание, что движения девушки на заднем плане тоже анимированы. Она что-то пишет в блокноте. Остальные люди на картинке остаются неподвижными. Этот приём часто используется в синемаграфах для создания нестандартной композиции.

Пользователи, которые заинтересуются необычной картинкой, могут потратить несколько минут, чтобы найти все движущиеся детали. Некоторые синемаграфы получаются настолько крутыми, что с каждым просмотром в них появляется что-то новое.

Важно понять, что cinemagraph не просто сложная в техническом исполнении картинка. Это визуальный элемент, который помогает направить внимание пользователей в определённую сторону.

Если относиться к нему, как к полезному инструменту, получится раскрыть весь потенциал. Но стоит заранее приготовиться к многочасовой работе. Эта задача не решается за 20-30 минут активного творчества.

Задачи, которые можно решить с помощью синемаграфа:

1. Привлечь внимание к продукту. Если разместить в карточке товара ювелирного магазина изображение девушки с сережками и сделать украшения движущимися, основное внимание аудитории будет направлено на них.
2. Усилить желание купить. Есть много примеров синемаграфов, созданных для продажи продукта. В кадре размещают девушку в красивом платье и создают эффект колышущегося платья. Женщины при просмотре контента однозначно захотят получить такое платье.
3. Показать продукт в действии. Анимация в синемаграфе очень короткая и зацикленная. Поэтому визуальный инструмент не подходит, когда надо последовательно рассказать историю.
4. Раскрыть характеристики. Статические изображения не передают всю атмосферу, отображенную на картинке. Синемаграф можно использовать, чтобы показать главное и сохранить визуальный образ.
5. Установить взаимосвязь. Иногда дизайнеры делают динамическими несколько элементов на экране. Между ними прослеживается чёткая связь, которую можно по-разному интерпретировать.
6. Заинтересовать пользователей. Необязательно создавать синемаграф для решения глобальных проблем. Он подходит и для простых задач.

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

Советы по использованию синемаграфа

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

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

Продумайте сценарий

90% успеха — сценарий, прописанный по шагам. Нельзя просто «оживить» любой элемент на картинке и считать задачу завершённой. Синемаграф выходит за рамки стандартных UI элементов и требует особого подхода.

Встаньте на сторону пользователей и подумайте, какой подход мог бы удивить целевую аудиторию сильнее всего. Отталкивайтесь от особенностей продукта и сможете найти креативную идею.

Постройте композицию

Если в центре изображения лежит какой-то физический предмет, его необязательно «оживлять». Например, есть синемаграфы, где в кадре наливают чай, а на заднем плане идёт снег. При этом жидкость не льется, а остаётся неподвижной.

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

Поработайте над качеством изображения

В 2021 году пользователи рассчитывают на то, что картинки будут в хорошем качестве. Их раздражают изображения, где не видны мелкие детали, зато хорошо просматриваются визуальные «артефакты».

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

Оптимизируйте GIF

В большинстве случае синемаграф размещают в этом формате. Если файл будет слишком «тяжелым» скорость загрузки страницы сильно увеличится. В идеале вес не должен превышать 1-2 МБ.

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

Используйте эффекты с осторожностью

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

Если надо привлечь внимание к конкретному элементу, лучше ограничиться только этим. Можно анимировать всю картинку, но это будет обычная гифка, а не синемаграф. Относитесь к визуальному элементу, как к ролику с ограниченной длительностью. Нельзя выходить за рамки и переключать внимание на элементы, которые не влияют на впечатления пользователей.

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

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