(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(95025373, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(95025373, 'hit', window.location.href);

Визуальный сторителлинг на zero-code платформе: как мы сделали сайты для дайджестов ВТБ

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

Департамент цифрового бизнеса ВТБ обратился к нам, чтобы обновить дизайн спецпроекта — сделать имиджевый сайт с интерактивной презентацией новостей. Антон Шакиров, руководитель направления Method Zero дизайн-студии Pinkman, рассказал о работе над двумя выпусками — за первый и второй квартал этого года.

Наши задачи: технологичность и вовлечение

Цель дайджеста — рассказывать клиентам ВТБ о новых функциях и услугах банка. Нам нужно было сделать сайт, который завладеет вниманием аудитории.

Реализовать интересный сторителлинг

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

Сделать современную графику

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

Добавить интерактивы

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

Визуальный дизайн почти без кода

Мы собирали дайджесты на no-code платформе Webflow. Это продвинутый конструктор, который подходит для нешаблонного дизайна. В отличие от Tilda или Readymag, которые заточены под простые и быстрые решения, Webflow в своих возможностях верстки сравним с классической разработкой сайтов на коде.

Для решения задач ВТБ мы продумали нестандартный дизайн — моушн-графику с 3D-объектами, мини-опросы по ходу дайджеста и эффекты анимации, привязанные к скроллингу — чтобы изображения двигались по мере того, как пользователь пролистывает сайт. Все задумки удалось воплотить с помощью технологии no-code, минимально прибегнув к программированию.

Анимация с трехмерной графикой

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

Так выглядит сайт на разных устройствах

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

Дайджест за первый квартал 2021 года

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

Красочная графика

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

Глассморфизм в интерфейсе

Наша команда отрисовала 3D-иллюстрации для дайджеста — они привлекают внимание и служат для визуализации новых возможностей продукта.

Трехмерная графика на сайте

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

Много анимации

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

Моушн-графика для презентации услуги

Интерактивы и ссылки

Чтобы вовлечь пользователей в рассказ, мы попросили их оценить новый сервис для сбережений, кликнув по эмоджи. После оценки появляется кнопка для перехода на сайт ВТБ — приглашение в Школу инвесторов.

Интерактив с оценкой сервиса

Есть несколько кликабельных элементов со знаком плюс — они открывают дополнительную информацию:

Кликнув, пользователь видит расширенное описание услуги

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

Ссылки на рекомендуемые статьи и более ранние дайджесты

Дайджест за второй квартал 2021 года: больше персонализации

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

Графические решения

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

Цветовое решение для второго дайджеста

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

Пример мемоджи с репликой

Видео с мемоджи

Помимо моушн-эффектов для 2D- и 3D-объектов в новом выпуске есть полноценное видео с мемоджи: в нем сотрудник ВТБ объясняет преимущества темной темы. Эта анимация проигрывается по клику пользователя. Мы решили не оставлять стандартную кнопку запуска видеоплеера и сделали для нее кастомный дизайн с помощью кода — так видео не выбивается из стилистики сайта:

Интеграция видео

Новые интерактивы

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

Опция выбора оформления

Результат

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

Аналогичная разработка кодом заняла бы четыре месяца. Это неприемлемые для клиента сроки, ведь в дайджестах нужно публиковать последние обновления сервиса. Нам удалось в несколько раз быстрее выполнить проект, при этом он ни в чем не уступает кастомной разработке:

  • мы сделали яркую современную графику, сочетающую 2D и 3D;
  • добавили эффекты анимации и привязали их к скроллингу;
  • реализовали интерактивы с разной механикой.
Опция выбора оформления

Результат показывает, что технология zero code позволяет осуществить идеи разной сложности. Нам удалось реализовать визуально привлекательный имиджевый проект. На Webflow, с минимальной интеграцией кода, мы сделали дизайн, который увлекает пользователя и помогает разбираться в новых функциях и услугах банка.

0
26 комментариев
Написать комментарий...
Товарищ

Я думал, буду еще 3 часа скролить. В итоге очень много информации (переизбыток).  Делали для эффекта "вау", а получилось, что перегрузили креативом. Более компактно и проще хотелось бы. Считать текст и запомнить - 3-4 минуты. Во времена коротких видео тик-тока и сообщений в телеге - пользователь не будет сидеть по 20 минут и зависать восторгаясь дизайном пикмана. В итоге думаешь, когда там конец. Сделали работу для других дизайнеров, чем для обычных клиентов.

Ответить
Развернуть ветку
Pavel Yakubovsky

Красиво, но палец устает скролить это все(( почему-то приходится крутить колесико для того, чтобы анимация продвинулась на 10 пискселей, потом еще на 10 пикселей и  тд

Ответить
Развернуть ветку
Varenique

Да, выглядит все, конечно, красиво.
Но как пользователь, я бы хотел видеть все преимущества продукта в пределах 2-3 скроллов экрана (особенно на мобилке)

Ответить
Развернуть ветку
Alexander Voynov

ммм, как бы написать. Для примера возмем традиционный вертикальный скрол (чисто для логики) сайта с полноэкранными тематическими скринами каждый друг за другом (например первый шапка, второй о нас и т.п.). Есть прямое управление, когда каждый поворот смещает страницу на N-строк. Тогда пользователь может даже остановится когда половина контента от первого скрина а ниже половина от второго. А есть логика когда пара поворотов запускает автоматический скрол который идет автоматом до какого то якоря. Это обычно делалось что бы скрин полностью экран заполнял, ну и красиво все было бы и плавненько и поменьше крутить пользователю. Есть и псих момент - нет монотонности. 

Любая презентация это набор квантов информации, а не линия. У вас монотонная линия сейчас. Надо делить на логические куски. Но условно - не дизайном а бехивиористикой. 
Если разделить логически всю презу на условные слайды (не визуально, а именно с точки зрения акцентов) то ее можно втиснуть в пардигму смены экранов. 
Тогда в момент когда пользователю надо вчитаться, изучить контент мокапов и вообще рассмотреть внимательно собранную в результате анимации композицию он сам управляет ею, крутит колесико и элементы продолжая свою анимацию подчиняются ему, но после определенного предела они начинают ускорятся по кривой и в какой то момент пользователь просто смотрит сменяющую анимацию и управдяет уже следующим "слайдом". Это структурирует подачу.
В дайджестах есть явные места, где нужно ускорятся (места смены декораций так сказать) и места вдумчивого просмотра (инерционные движения по слайду уже собраной декорации)

Надеюсь смог объяснить :-))))      

Ответить
Развернуть ветку
Alexander Voynov

а млин еще забыл написать - инерция. Это тоже сильно нативности прибавляет

Ответить
Развернуть ветку
Alexander Voynov

Сли нужно больше возможностей управления именно анимацией (в вебфло всетаки это не основное) то советую инструмент InVision Studio - там тоже кода не нужно. 

Ответить
Развернуть ветку
Artyom Petrovich

Очень красивые лендинги, анимации просто бомбические.

Только к середине уже забываешь зачем ты там оказался и что ты там делаешь, слишком много всего )))

Ответить
Развернуть ветку
Семен Смирнов
zero code
с минимальной интеграцией кода

Ну не знаю
Замените хотя бы на low code

Ответить
Развернуть ветку
Алексей Осипенко

Красивое, но читать такой лонгрид я бы конечно же не стал...
1. Укачивает
2. Тормозит
К слову про скорость, это очень слабый показатель даже для мобилы, а для десктопа прям очень плохо...

Ответить
Развернуть ветку
Nikolai Kovalev

Олдскульно же ))

Ответить
Развернуть ветку
В А

Ссылку на работу дайте

Ответить
Развернуть ветку
pinkman
Автор

добрый день! 

оставили ссылки во втором абзаце статьи и дублируем вам: здесь лежит ссылка на первый дайджест: https://digital.vtb.ru/digest/2021-apr/, а здесь - на второй: https://digital.vtb.ru/digest/2021-jul/

Ответить
Развернуть ветку
Причинно-следственная связь

люблю когда сайт подлагивает на i7. зато красиво) 

Ответить
Развернуть ветку
Nikolai Kovalev

500 Internal Server Error

nginx/1.6.2

Хабрэффект?

Ответить
Развернуть ветку
Злюк Бессон

Русская раскладка, но “space” и “return”, а не «пробел» и «ввод». Браво, Pinkman.

Ответить
Развернуть ветку
Атанов Владимир

Ах, вот почему тормозное Web приложение от втб стало ещё тормознутее. Вы хоть тестировали свои поделки на не очень производительных компа? 

Ответить
Развернуть ветку
Artyom Petrovich

На слабых компах видимо будет плохо работать. Ну и что?

Ответить
Развернуть ветку
Ilya Evtihevich

Круто понимаю почему люди говорят о двух-трех экранах, но к сожалению по опыту знаю, что ЛПР-ов не так просто на это продавить)
В целом - очень достойно, мое уважение.

Ответить
Развернуть ветку
Сергей Гринцов

Какое то скроллинговое безумие..

Ответить
Развернуть ветку
Alexander Voynov

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

Ответить
Развернуть ветку
He He

Привет, 
а расскажи, пожалуйста, подробнее, что ты имеешь в виду (по поводу скролла)?
если можно, раскрыть бы историю про «можно совместить блоки прямого контроля плея и блоки самостоятельного проигрывания до метки»

Ответить
Развернуть ветку
Alexander Voynov

Сорян, мои разъяснения случайно выше в комментах вставились 

Ответить
Развернуть ветку
He He

Спасибо за такое подробное объяснение!

Ответить
Развернуть ветку
Alexander Voynov

Не за что, работа то бомбическая в целом

Ответить
Развернуть ветку
Юрий

больше всего убивает адрес online-old.vtb.ru ))

Ответить
Развернуть ветку
Vasilii Petrov

Выглядит красиво! Надо бы затестить этот Webflow для интерактивных презентаций. Вроде не сложнее, чем в PowerPoint набросать, но смотрится красивее.

Ответить
Развернуть ветку
23 комментария
Раскрывать всегда