2025

Aij.ru

Контекст

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

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

Задача

Нам необходимо было выполнить полный комплекс работ для запуска сайта конференции AI Journey 2024.
Нам предстояло:

Необходимо было учесть интересы всех ЛПР и сделать согласования максимально быстрыми и продуктивными.

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

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

Челленджи

Мы проанализировали UX прошлогоднего сайта, разработали новую дизайн-концепцию и UX/UI-дизайн. Реализовали фронтенд и провели QA-тестирование.

Работа над проектом

информационными страницами о конференции, а затем постепенно наполняли сайт новыми разделами.

Релиз сайта AI Journey проходил в несколько
этапов. Сначала мы
запустили MVP с несколькими

04

Запуск трансляции

05

Закрытие разделов

03

Публикация программы
Страница «Как это было»

02

Запуск AR-версии
Внедрение цифровой доступности

01

Запуск MVP с русской и английской версиями

Запуск проекта

Этапы

Использовать одинаковую концепцию
нейминга в меню и заголовках страниц;

[01]

Закрепить меню в верхней части страницы, чтобы оно всегда отображалось при скролле;

[02]

Добавить больше информации об образовательных треках и конференции в целом;

[03]

Разработать креативные обложки для видеороликов, чтобы привлекать к ним больше внимания.

[04]

UX-анализ

Перед редизайном мы изучили пользовательский опыт сайта AI Journey 2023 и определили векторы для оптимизации UX:

Дизайн-концепция

Интерфейс сайта выполнен
в темной палитре, которая обычно ассоциируется
с темой искусственного интеллекта.

В дизайн-концепции
мы объединили узнаваемый визуальный язык продуктов Сбера и технологичный стиль AI Journey.

Так мы визуально подчеркнули принадлежность AI Journey к высокотехнологичным проектам. При этом у сайта узнаваемая цветовая гамма: градиенты насыщенного фиолетового и бирюзового.

Для этого мы использовали передовые нейросетевые инструменты — Stable Diffusion 3 и Flux. Генерация качественных изображений требует особых навыков — знания настроек нейросетей, креативности, умения составлять промты. Наши дизайнеры обладают всеми этими скиллами, что позволило им отлично выполнить задачу.

Визуалы

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

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

Сам процесс был поделен
на несколько этапов:

UX-UI дизайн

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

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

Разработали новые страницы сайта:
AI для ESG и детальную страницу партнера.

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

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

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

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

UI-kit

Мы разработали для AI Journey собственный UI-кит. В нем
собраны палитры цветов, стили типографики, компоненты кнопок
и плашек, навигационные
элементы, фоны и градиенты.

Этот набор правил поможет клиенту в дальнейшем поддерживать единство дизайна.

Разработка

Мы с нуля разработали фронтенд сайта AI Journey на React v18 и Next. js v14. Для бэкенда была использована административная панель Sberlive, которая реализована на Python в контуре Сбера.

Кирилл Авдонин,
фронтенд-разработчик

«Сайт реализован так, что даже при сбоях на бэкенде, пользователь увидит весь нужный контент на фронтенде. Челлендж был в том, что серверная архитектура полностью находится в закрытом контуре Сбера и посылать запрос в API можно тоже только внутри этого контура. Поэтому для реализации мы выбрали статику JSON-файлами с проверкой путем пробрасывания билда в контур Сбера. В критической ситуации это позволяет редактировать контент без повторной сборки проекта».

Мультиязычность

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

Сайт AI Journey доступен на трех языках: русском, английском
и арабском. Мы реализовали мультиязычность с помощью библиотеки i18n, которая позволяет гармонично встроить перевод в интерфейс, но оставить код понятным.

Пришлось делать 4 разных видео для разных разрешений, так как в каждом видео с краю была надпись AIJ, и ее нельзя было обрезать;

[01]

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

[02]

Анимация

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

[03]

Анимации на главной странице разработаны с помощью библиотеки GSAP. В процессе работы мы столкнулись с несколькими задачами:

Страница программы с трансляцией

До конференции, когда добавляется программа;

[01]

Во время конференции, когда идет лайв-трансляция лекций;

[02]

После конференции, когда все видео
переносятся в архив.

[03]

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

Для предзаписей мы подключили VK-плеер, а для трансляций — Live-плеер от Сбера. Чтобы успешно справляться с высокими нагрузками на сайте клиент решил поместить всё на cdn. Список докладов можно было фильтровать по видам, поддерживалось переключение между активными докладами. Также мы реализовали трансляцию так, что в любом часовом поясе лекции выходили в одинаковое время.

Для этой страницы мы реализовали три состояния:

Цифровая доступность

Мы применяли UI-компоненты библиотеки Radix-UI, которые отвечают стандартам сайтов для лиц
с особенностями восприятия.

Также мы убрали из верстки кнопки остановки слайдера и сделали озвучку контента невидимых слайдеров в Swiper.

Чтобы контент сайта был доступен
для пользователей с особенностями восприятия, мы реализовали рекомендации по цифровой доступности a11y — использовали специальную разметку внутри html.

Версию с цифровой доступностью успешно протестировал незрячий сотрудник Сбера.

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

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

Особой сложностью стало тестирование арабской версии, так как все элементы были отзеркалены, по сравнению с главной версией сайта. Это потребовало больше внимание к RTL-верстке — направлению текста, прокрутки и навигации, расположению кнопок на странице). Также мы более тщательно проверили шрифты и написание, чтобы избежать грамматических и логических ошибок.

Тестирование

Для каждого этапа релиза
мы разработали чек-листы для проверки функций и общего состояния сайта. В итоге получилась QA-документация на 8 страниц и 18 частей.

Результаты