Кейс компании «Далее»: разработка сайта конференции Сбера AI Journey

О мероприятии

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

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

Помимо лекций, в рамках AI Journey также проводятся соревнования для разработчиков AIJ Contest, трек для молодежи AIJ Junior и конкурс научных статей AIJ Science Journal.

Анализ и оптимизация UX

На первом этапе работы над проектом команда «Далее» провела анализ пользовательского опыта на сайте AI Journey 2023 и определила направления для улучшения пользовательского интерфейса:

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

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

При разработке дизайн-концепции специалисты придерживались рекомендаций, указанных в гайдланах AI Journey.

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

Поддержание тематики и работа с ИИ

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

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

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

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

𝓲

Фото: Сбер

UX/UI дизайн

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

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

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

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

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

𝓲

Фото: Сбер

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

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

𝓲

Фото: Сбер

𝓲

Фото: Сбер

Разработка

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

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

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

Чтобы сделать сайт доступным на трех языках, специалисты «Далее» использовали библиотеку i18n. Она позволяет гармонично встроить перевод в интерфейс и при этом оставить код понятным.

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

𝓲

Фото: Сбер

𝓲

Фото: Сбер

Анимация

Анимации на главной странице разработаны с помощью библиотеки GSAP. Все что можно сказать про главную страницу. Сами анимации не сложные, но возникли нюансы: пришлось делать 4 разных видео для разных разрешений, так как в каждом видео с краю была надпись AIJ, и ее нельзя было обрезать; нужно было передвигать картинки относительно текстов на разных языках, чтобы сохранить желаемый эффект; понадобилось исправлять отступы, анимации и слайдер для арабского языка — в нем тексты читаются справа налево, и верстка не такая, как, например, в русском или английском языке. Кирилл Авдонин, фронтенд-разработчик

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

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

1. До конференции, когда идет добавление программы.
2. Во время конференции, когда лекции транслируются в прямом эфире.
3. После конференции, когда все записи переносятся в архив.

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

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

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

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

Чтобы сайт был доступен для всех пользователей, разработчики «Далее» внедрили специальную разметку в HTML. Они также использовали компоненты из библиотеки Radix-UI, соответствующие стандартам доступности. Кнопки остановки слайдера были убраны из верстки, а контент невидимых слайдеров в Swiper озвучен.

𝓲

Фото: Сбер

𝓲

Фото: Сбер

Результаты

На сайте была собрана вся информация об основной программе конференции и других ее мероприятиях, которые могут заинтересовать разработчиков, молодых специалистов и всех, кто увлекается искусственным интеллектом. Также компания «Далее» создала UI-кит, чтобы клиент мог применить дизайн сайта для своих будущих мероприятий.

Примечательно, что за три дня работы конференции сайт привлек более 1,2 миллиона уникальных пользователей.

• Вера Осолодкина — аккаунт-директор.
• Таисия Смирнова — менеджеры проекта.
• Максим Линдерман — UX-аналитик.
• Николай Селезнев, Максим Григорьев — UX/UI-дизайнеры.
• Владислав Голодников — руководитель команды QA.
• Кирилл Авдонин — фронтенд-разработчик.