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