Все такое вкусное, не знаю, с чего начать: как использовать гифки, мемы, фото, графики и видео на лендинге

Маркетолог платформы для самостоятельного создания сайтов и лендингов Flexbe.ru Данила Плешков о том, как с помощью графики и видео можно увеличить эффективность лендинга.

В закладки

Статьи с картинками получают на 94% больше просмотров. 67% пользователей считает, что качество фото очень важно при выборе продукта, а для 63% изображение важнее, чем описание. Можно продолжать, но, пожалуй, этого достаточно, чтобы не осталось сомнений: над визуальной стороной сайта стоит хорошенько поработать. Так что давайте смотреть, как использовать дизайн-артиллерию, сохранив при этом стиль, и не превратиться в «Веселые картинки».

Что можно сделать с помощью изображений?

Компактно упаковать информацию

Мозг способен обработать картинку за 13 миллисекунд. Изображение — простой для восприятия формат. Инфографики, видео с инструкциями, обзорами и отзывами — все это помогает быстро доносить большие объемы информации. Сравните, насколько быстрее вы примете решение «нравится/не нравится», если увидите фото кроссовок, а не просто прочитаете описание (исследователи говорят, примерно в 60 000 раз).

Вот наглядный пример соотношения самодостаточной картинки и (зачем-то) добавленного после описания.

(простыня текста продолжается)

Cформировать доверие

Лучше один раз увидеть, чем сто раз услышать (и тем более прочитать). Можно сколько угодно писать о том, какие вкусные пирожные вы делаете, какие уютные номера в вашем отеле или как мастерски справляется с ремонтом ваша бригада. Но пока на лендинге не будет достаточного количества фото, вряд ли многие всерьез соблазнятся вашим предложением. А вот так — вполне.

Создать «человеческое лицо»

Очевидный способ «очеловечить» бренд — показать реальных сотрудников. Другой вариант — шутить. Если вы у вас есть чувство юмора, значит, вы не робот. Так что когда это уместно, гифки, мемы и комиксы вам в помощь. Об этом подробно поговорим позже.

Структурировать текст, управлять вниманием

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

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

Поддержать интерес и не дать заскучать

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

Семь форматов: между добром и злом

Фотографии

Фотографии — основной способ показать продукт, с этим все понятно (кстати, попробуйте увеличить картинки на сайте). Но есть еще один инструмент — фотографии людей, которые автоматически привлекают внимание. Правда, типичные стоковые фото игнорируются.

Круги и линии между ними показывают движение глаз пользователей

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

Ниже список фотостоков, где можно найти что-то поинтереснее, чем женщин, хохочущих над салатом.

Бонус. Фотостоки:

И если вам нужна совсем уж тяжелая артиллерия, всегда есть фото детей и котиков.

Чем не реклама надежных окон?

Рисунки

Рисунки могут создавать фирменный узнаваемый стиль. Если есть возможность нарисовать собственные уникальные картинки — отлично, они могут стать вашей фишкой.

А вот картинки ради картинок лучше не использовать. Нет ничего печальнее, чем лендинги, оформленные вот такими наборами.

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

Инфографика

Качественно сделанная инфографика производит отличное впечатление на пользователей, ее интересно рассматривать.

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

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

Бонус. Сервисы для создания инфографики, в том числе красивых диаграмм:

Мемы

Тут действуют три золотых правила:

  • мем должен быть либо на волне популярности в настоящий момент, либо очень живучим;
  • ваша целевая аудитория должна понимать значение мема;
  • вы должны понимать значение мема (притом правильно понимать).

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

А вот этот мем по мотивам Игры Престолов явно создан «со знанием дела», но будет забавно, если его использует какое-нибудь агентство по организации праздников.

Напомним (или заспойлерим): Арья Старк устроила расправу на «банкете» и приготовила пирог с «неожиданной начинкой»

Мемы — довольно универсальная история. Привязать их к тематике проекта — вопрос креативности. Нейл Патель, гуру маркетинга, считает мемы одним из самых эффективных типов контента для привлечения трафика: «Их просто сделать. Они виральны. Они смешные».

Например, для блога о казино.

Или для интернет-магазина, продающего все для барбекю.

Насколько вообще уместны мемы на лендинге? С одной стороны, многие из них актуальны очень недолго, а когда теряют актуальность, выглядят совершенно неуместно. С другой стороны, если вы регулярно обновляете сайт, почему бы не попробовать? Например, примерно год назад «посадить» Ждуна рядом с надписью «Мы очень ждем вашего звонка» было вполне милым.

Ну а блог — прекрасное пространство для экспериментов с актуальными мемами и гифками. Была бы фантазия.

Бонус. Здесь можно сделать свой мем:

Гифки

В умелых руках гифки становятся отличным инструментом для вовлечения и развлечения пользователя. Использование GIF-анимации можно сделать частью узнаваемого стиля. Остроумные гифки делают страницу более живой и динамичной (до тех пор, пока она не превращается в психоделический клип из 70-х).

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

  • Вы можете записать последовательность действий, заменить или дополнить длинную пошаговую инструкцию гифкой. Иллюстрированные инструкции более чем на 300% эффективнее, чем текстовые.

Такую GIF можно сделать с помощью, например, Licecap или GifCam.

  • Попробуйте использовать гифки в блоках Call to Action. Огромные красные мигающие кнопки «Заказать» — не лучший вариант, но протестировать небольшие GIF-элементы можно. Анимация привлекает внимание:
  • Покажите продукт. Гифка это сделает быстрее, чем видео.

Бонус. Инструменты для создания гифок:

Синемаграфия

Синемаграфия — это «живые фото», особая разновидность GIF. Как правило, это фотографии с высоким разрешением, в которых есть зацикленный динамичный элемент, остальное изображение статично.

Синемаграфы (синемаграммы) могут стать дизайнерской изюминкой лендинга. На них трудно не обратить внимание. И оторваться от просмотра очень сложно (мы предупреждали).

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

Бонус. Приложения для создания синемаграмм:

На некоторых фотостоках можно найти бесплатные синемаграфы, например, здесь.

Видео

Видео вовлекает пользователей и помогает установить более близкий контакт. Судите сами:

  • в одном из экспериментов размещение видео на лендинге увеличило конверсии на 86%, в другом — на 100%;
  • 80% пользователей могут пересказать содержание ролика, который они увидели на сайте в течение последнего месяца;
  • 90% считают, что видео важны для принятия решения о покупке;
  • 1 из 3 миллениалов признает, что покупка — прямой результат просмотра видеообзора или инструкции к товару.

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

  • продукцию или товары;
  • процесс и результат работ;
  • пошаговые инструкции;
  • интервью с вами или командой;
  • вопросы и ответы;
  • отзывы клиентов;
  • неформальные развлекательные ролики.

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

Вариантов может быть очень много, в зависимости от характера вашего бизнеса и фантазии: мини-ролики об альтернативных способах заваривания кофе, съемки пляжей с дронов, выдувание стекла, жизнь вашего офиса в таймлапс и т.д.

Конечно, в идеале видео должны быть собственного производства, но это не единственный вариант. Если вам нужно показать что-то универсальное, что не имеет привязки к конкретному бренду (например, кофе), можно использовать стоковые ролики (как и с фотостоками, часть видео бесплатна, за другие надо платить). Или же можете разместить крутое видео с указанием источника, если такое использование не запрещено авторским правом.

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

Можно начать с совсем мелких форматов — вайнов. Вот, например, 6-секундный видео-рецепт коктейля куба либре от Bacardi.

Гармония победит хаос

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

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

Вперед, к красивым сайтам и восторженным пользователям!

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Данила Плешков", "author_type": "self", "tags": [], "comments": 2, "likes": 7, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 36923, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 36923, "author_id": 156956, "diff_limit": 1000, "urls": {"diff":"\/comments\/36923\/get","add":"\/comments\/36923\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/36923"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

2 комментария 2 комм.

Популярные

По порядку

0

Откровенно сказать, гифки бесят. Когда страница дергается, невозможно сосредоточиться на тексте. Так что гармония — это важно. Важнее прикольного сюжета в гифке.
А вот синемаграммы надо попробовать, это неплохой компромисс)

Ответить
0

Гифка на кнопку "Заказать"?
Гифка, Карл!
Шёл 2018 год...

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления