Анимируем дашборд: иллюстрация потока данных розничной цепочки поставок

Анимируем дашборд: мгновенная загрузка, качественная картинка.

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

Чтобы её сделать, пришлось пройти через следующие круги digital-ада (шучу, не так уж это и сложно было):

• Отрисовываем дашбордики, кнопочки, графики, диаграммки в Figma. Мне так удобнее. В будущем обещаю это делать это сразу в Иллюстраторе. Пока без букв. Экспортируем в PNG.

• Импортируем картинки в After Effects.

• Там же выстраиваем анимацию и добавляем буквы.

• Экспортируем картинку в JSON-файл через After Effects плагин Bodymovin.

• Загружаем JSON-файл в сервис Lottiefiles. Получаем код для встраивания на сайт.

• Код встраиваем в Тильду.

Всё!

Чтобы сделать из этой анимашки смотрибельное видео, находим в сервисе типа Envato супер-футуристический футаж для фона. Создаем проект в Premiere Pro. Кидаем в проект найденный футаж и импортируем композицию из After Effects. Слегка анимируем появление композиции и рендерим под формат HD.

Если что-то непонятно, спрашивайте — научу. В любом случае, я смог — вы сможете тоже))