Интерактив, динамика, анимация: делаем сайт, который вызывает эмоции
Когда вы делаете имиджевый сайт, страницу с поздравлением или промо-лендинг, чтобы рассказать о продукте, вы решаете одни и те же задачи: вызвать у посетителя эмоциональный отклик и запомниться. В этом случае недостаточно собрать понятную и удобную страницу: нужно выделиться на фоне других.
К нам в Atman иногда обращаются за сайтами и лендингами, которые должны вызвать у посетителей удивление, радость и любопытство. Рассказываем, как подойти к работе и какие инструменты использовать, чтобы получившийся сайт вызывал положительные эмоции и запоминался.
1. Продумать концепцию
Эмоциональный сайт начинается с концепции — истории, в основе которой лежит описание целевой аудитории, задача, которую должен решить сайт, и креативная идея. Концепция описывает, кто окажется на сайте, что он должен сделать, и почему сайт ему запомнится. Если не задумываться об аудитории и задаче, то входящий трафик уйдёт в молоко. Если забыть про креативную идею, получится среднестатистический сайт, который вряд ли вызовет эмоцию.
В конце 2019 года к нам обратился производитель онлайн-касс Эвотор. Они хотели сайт-поздравление для сотрудников и партнёров: небольшой лендинг, на котором перечислены достижения компании за последний год. Логика такая: сотрудник видит, как Эвотор развивался на протяжении года, гордится и радуется за себя и коллектив, заполняет открытку в конце и делится ей с друзьями или у себя в соцсетях.
Получается, у Эвотора уже была часть вводных для концепции:
Аудитория — сотрудники и партнёры.
- Задача — рассказать об успехах за год так, чтобы ими хотелось поделиться.
Осталось доработать креативную идею.
В Эвоторе знали, что хотят видеть на сайте анимацию при скролле, новогодние иллюстрации в цветах и стиле компании, а также интерактивный элемент с поздравлением, которым можно было бы поделиться через соцсети, почту или мессенджер.
Вместе с партнерами из Multiways мы придумали креативную идею: Дед Мороз проникает в дом Эвотора, ходит по этажам и собирает подарки, каждый из которых символизирует достижение компании. Дед Мороз складывает их в мешок, который постепенно растёт. В какой-то момент на дедушку налетает снежный ком и подарки рассыпаются. Пользователь собирает из них открытку и делится с друзьями и коллегами.
Продумайте, у кого и в ответ на что должна возникнуть эмоция. Соберите мысли в текст и подкрепите набросками. У вас получится концепция — основа будущего сайта.
2. Добавить интерактив
В проекте для Эвотора задачей открытки было подтолкнуть пользователя поделиться брендовым контентом. Но использовать интерактив можно и для других целей: вовлечь в изучение нужного раздела, предложить посоревноваться с друзьями, дать возможность собрать продукт или услугу из индивидуальных опций.
У интерактивного сайта больше шансов вызвать у посетителя эмоции. В этом помогают ползунки с конфигурациями, тесты, анимация объектов на сайте при наведении или клике. Когда пользователь может с чем-то взаимодействовать, он сильнее вовлекается в изучение контента, сайт получается живее.
Например, открытку в проекте с Эвотором мы решили построить вокруг механики перетаскивания: подарки Деда Мороза рассыпаются, теперь ими можно украсить ёлку, перетащив по одному. Над ёлкой оставляем пустое место для имени получателя. Когда пользователь заканчивает собирать подарки на ёлку, он нажимает «создать открытку» и отправляет картинку по почте или в мессенджере.
Но будьте осторожнее. Главная сложность в работе с интерактивными элементами — продумать, как они будут работать на мобильных устройствах. Так, чтобы сделать открытку, мы использовали связку из нескольких JS-библиотек и самописный рендер картинки из вектора в растр. Это помогло оптимизировать открытку под любые устройства, но потратило дополнительно время разработчика. С одной стороны — трата, с другой — дополнительная ценность для пользователя — открытку создало 400 человек.
Нестандартные интерактивные элементы могут повлиять на бюджет проекта. Но затраты зачастую окупаются положительными эмоциями от сайта.
3. Добавить динамические иллюстрации
Красиво показать продукт и вызвать «вау-эффект» у пользователя стоит дорого. Если вы строите жилой комплекс или развиваете сеть отелей, то для хорошей фото или видеосъёмки придётся остановить работу, убраться на площадке, вывести сотрудников. Товарному бизнесу немного проще, но всё равно нужно найти подходящего фотографа, подготовить реквизит, списать часть товара, который будет использован во время съёмки.
Мы используем более доступный способ достигать «вау-эффекта» на сайте — живые иллюстрации. Это анимированные картинки, которые мы умеем по-разному подать: анимировать при скролле, клике, наведении или движению мыши, зацикливать воспроизведение. Способ анимации зависит от задачи.
Тренд на использование рисованных иллюстраций появился несколько лет назад, и сейчас они встречаются довольно часто, поэтому одними иллюстрациями пользователя не удивить. Но когда эта штука вдруг начинает двигаться — это всегда приятный сюрприз.
Самый простой сделать живую иллюстрацию — создать gif-файл (гифку), но тут есть три проблемы. Во-первых, у гифки нельзя сделать прозрачный фон, так что её сложно сочетать с фоном сайта. Во-вторых, гифка — это, по сути, последовательность изображений, поэтому она может весить несколько мегабайт, а для сайта это слишком — скорость загрузки снизится. В-третьих, гифку не привяжешь к скроллу, поэтому возможности использования ограничены.
Вместо gif-файлов мы рисуем векторные иллюстрации и анимируем их в After Effects. Чтобы добавить анимацию на сайт, используем плагин Bodymovin. Если делаем сайт не с нуля, а на конструкторе Webflow, то разработчик не потребуется: анимации настраиваются в два клика.
Динамические иллюстрации — выгодный инструмент для создания эмоций. Они дают вау-эффект, но не требуют использования дорогих технологий и не утяжеляют веб-страницу.
4. Анимировать мелочи на главной странице
Если ваш сайт выстроен на сильной креативной концепции, содержит интерактивные элементы и динамические иллюстрации, он уже будет выгодно отличаться от конкурентов. Чтобы закрепить этот эффект, стоит уделить время главной странице: расставить акценты, добавить микро-анимации для кнопок и картинок или продумать, как элементы будут появляться при скролле.
Главная страница — первое, что увидит пользователь, она задаёт тон всему сайту. Если уже по главной пользователь поймёт, что вы продумали всё до мелочей, ему будет приятнее изучать контент. Шансы вызвать положительный эмоциональный отклик вырастут.
Не перетрудитесь с красотой. Если изображений и анимации будет слишком много, упадёт скорость загрузки страницы. В одном из кейсов нам пришлось переоптимизировать и убрать часть фотографий, потому что вес изображений перевалил за 8Мб — это плохо для юзабилити и SEO.
Используйте анимацию там, где пользователь ожидает реакцию, например, при наведении на заголовок или кнопку. Когда закончите работу, проверьте, что анимации не снижает скорость загрузки сайта. Это можно сделать через сервис PageSpeed от Google. Сайт должен набирать от 60 баллов на десктопной версии, хотя бы 50 на мобильной и загружать первый контент как можно быстрее, в идеале — меньше чем за секунду.
Анимации на главном экране — эффектная вишенка на торте. Пользователь оценит, что каждый элемент отзывается на его действия.
Закрепим
Как создать сайт, которые вызовет эмоциональный отклик:
- Продумать концепцию. Это описание целевой аудитории, задач сайта и креативной идеи. Обычно концепция — это текст, подкреплённый набросками дизайна или прототипом.
- Добавить интерактива. У сайта больше шансов вызвать эмоциональный отклик, если с ним можно взаимодействовать. Интерактив — это ползунки с конфигурацией, тесты, виртуальные туры — всё, что требует участия от пользователя.
- Добавить динамические иллюстрации. Используйте возможности Bodymovin, чтобы оживить векторные иллюстрации. Такая анимация весит меньше, чем гифка, и может вызвать «вау-эффект».
- Уделить внимание главной странице. Она задает тон всему сайту. Стоит расставить на странице аккуратные акценты, которые дополняют интерфейс: анимировать кнопки, заголовки, слайдеры, карточки и изображения.
В целом, это конечно всё круто, но ровно до того момента как тебе становится нужен трафик на этот сайт. И вот твоя анимация на сайте идёт в минус качеству объявления на рекламных площадках. Цена клика возрастает до небес. И веся твоя концепция вызывания эмоционального отклика идёт нахер, ты убегаешь анимацию сайтов, меняешь картинки на пережатые, добавляешь всякую тупую хрень на сайт чтобы увеличить время сессии. И вот твой сайт уже нравится роботу из Яндекса. И теперь как опытный создатель сайтов понимаешь, что твой сайт должен нравится не целевой аудитории и даже не заказчику, а роботам из Яндекса, Гугла и Фейсбука. И ты грустно скролишь беханс, понимая что красивый дизайн ушел в прошлое и сейчас важнее kpi
спорно, притянуто, предположения.
Сайт с рейтингом объяв не связан, даже с отказами.
Робот на анимации нормально реагирует, если они в нормальном сжатом формате.
Первый раз слышу, что гифку нельзя сделать с прозрачным фоном. Алё, вы чего? Так же её можно оптимизировать и пожать, просто нужно уметь работать с этим видом графики. Вообще читать было интересно ровно до места про гифку - весь уровень доверия упал из-за ошибки в такой мелочи.
Может это мое субъективное мнение и как разработчика, а не дизайнера:
1. Шрифты и определение заголовков в первом варианте не совсем верное.
3. Использование json анимации просто как элементов страницы не совсем то, для чего она предназначена. Она больше определяет анимацию элементов интерфейсов.
В целом, любой сайт хорош тогда, когда Несет в себе хороший контент, содержащий правильную подачу информации. Это не означает, что его нудно превращать в новогоднюю ель, это просто какой-то бум: «если продавать и представлять - надо изрисовать и «запестрить».