Разработка сайта конференции
по искусственному интеллекту AI Journey
UX-аудит
[01]
Дизайн-концепция
[02]
UX/UI-дизайн
[03]
Разработка сайта
[04]
2025
Aij.ru
Контекст
В декабре 2024 года Сбер запланировал провести очередное такое мероприятие в гибридном формате — онлайн и офлайн. Для этого нужно было разработать сайт, где пользователи могли бы посмотреть программу или посмотреть трансляцию.
Конференция предназначена для исследователей ИИ, студентов и выпускников технических вузов, академического сообщества. Помимо лекций, в рамках AI Journey проводятся и другие мероприятия — соревнования для разработчиков AIJ Contest, трек для молодежи AIJ Junior, конкурс научных статей AIJ Science Journal.
С 2024 году Сбер провел 9-ю ежегодную
Международную конференцию по искусственному интеллекту и машинному обучению AI Journey. Мероприятие посвящено использованию искусственного интеллекта в различных отраслях — науке, бизнесе, экономике, социальной сфере. Спикерами выступают ведущие российские
и международные исследователи, ученые, представители органов власти и бизнеса.
Задача
Нам необходимо было выполнить полный комплекс работ для запуска сайта конференции
AI Journey 2024.
Для этого предстояло:
Челленджи
Чтобы ускорить процесс разработки визуалов и предложить команде Сбера обширный выбор вариантов, мы решили подключить к процессу нейросети. Помимо скорости, нейросети помогли нам разработать подходящие
по стилистике образы, так как конференция была напрямую связана с ИИ.
Необходимо было учесть интересы всех ЛПР и сделать согласования максимально быстрыми и продуктивными.
AI Journey — крупный
и сложный проект,
в организацию которого вовлечены несколько команд Сбера одновременно.
с несколькими информационными страницами о конференции,
а затем постепенно наполняли сайт новыми разделами.
Релиз сайта AI Journey
проходил в несколько этапов. Сначала мы запустили MVP
04
Запуск трансляции
05
Закрытие разделов
03
Публикация программы
Страница «Как это было»
02
Запуск AR-версии
Внедрение цифровой доступности
01
Запуск MVP с русской и английской версиями
Этапы
Запуск проекта
Работа над проектом
Мы проанализировали UX прошлогоднего сайта,
разработали новую дизайн-концепцию и UX/UI-дизайн. Реализовали фронтенд и провели QA-тестирование
Использовать одинаковую концепцию
нейминга в меню и заголовках страниц;
[01]
Закрепить меню в верхней части страницы, чтобы оно всегда отображалось при скролле;
[02]
Добавить больше информации об образовательных треках и конференции в целом;
[03]
Разработать креативные обложки для видеороликов,
чтобы привлекать к ним больше внимания.
[04]
UX-анализ
Перед редизайном мы изучили пользовательский опыт сайта
AI Journey 2023 и определили векторы для оптимизации UX:
Фишка дизайна — кастомные визуалы, которые сгенерировала нейросеть.
Чтобы пользователь погружался
в атмосферу AI Journey с первого экрана, мы создали на главной странице динамичный сторителлинг. Сначала пользователь видит эффектный видеоряд
о функциях искусственного интеллекта, затем — кадры с прошлогодней конференции и описание мероприятия
2024 года.
Так мы визуально подчеркнули принадлежность AI Journey
к высокотехнологичным проектам.
При этом у сайта узнаваемая цветовая гамма: градиенты насыщенного фиолетового и бирюзового.
Запуск проекта
Интерфейс сайта выполнен
в темной палитре, которая обычно ассоциируется
с темой искусственного интеллекта.
В дизайн-концепции
мы объединили узнаваемый визуальный язык продуктов Сбера и технологичный стиль AI Journey.
Для этого мы использовали передовые нейросетевые инструменты — Stable Diffusion 3 и Flux. Генерация качественных изображений требует особых навыков — знания настроек нейросетей, креативности, умения составлять промты. Также важную роль играет понимание концепции и четкое представление желаемого результата.
Наши дизайнеры обладают всеми этими скиллами, что позволило им отлично выполнить задачу.
Визуалы
Чтобы подчеркнуть направленность конференции,
мы решили подключить искусственный интеллект
для оформления сайта
и сгенерировать кастомные визуалы с помощью нейросети.
Разработка концепции — мы определили референсы и требования к изображениям.
[01]
Создание гибких промптов — для каждого типа изображения мы разработали детализированные и адаптивные текстовые запросы, которые нейросеть могла корректно распознать.
[02]
Тестирование и оптимизация — мы провели несколько итераций генерации, чтобы определить оптимальные параметры изображений и настройки промтов.
[03]
Сам процесс был поделен
на несколько этапов:
В итоге мы в короткие сроки сгенерировали подходящие под концепцию изображения высокого качества и детализации. Визуалы были успешно использованы
в дизайне интерфейса сайта.
Чтобы снять ограничения облачных серверов и обеспечить стабильную работу без задержек, мы развернули обе нейросети локально.
UX-UI дизайн
Поэтому мы сделали интерфейс максимально лаконичным и простым,
чтобы он не отвлекал от контента.
Крупные шрифты, минимум элементов, баланс пространства снижают когнитивную нагрузку и позволяют полностью погрузиться в содержание сайта.
Главную роль на сайте
играет контент: пользователи заходят, чтобы узнать подробнее о конференции
и проектах, посмотреть программу и увидеть трансляции лекций.
Одна из главных страниц сайта —
«О конференции». Именно здесь пользователь знакомится с проектом.
Мы переработали структуру страницы,
по сравнению с предыдущим сайтом, добавив информацию об AI Journey
и таймлайн со статистикой прошлых лет.
Разработали новые страницы сайта: AI для ESG и детальную страницу партнера.
Чтобы навигация была более интуитивной, мы закрепили меню в верхней части экрана и добавили в некоторых разделах перелинковку с внутренними страницами.
В шахматном расписании выступления выводятся на одном уровне и друг
за другом, даже если они проходят
в разное время и с перерывом.
В результате такого решение блок
с программой уменьшился,
а навигация по нему упростилась.
Чтобы программа мероприятия была более компактной, мы сделали ее в шахматном формате. Обычно расписание делают линейным, из-за чего в нем образуется много лишнего пространства, и это негативно влияет на пользовательский опыт.
На странице с программой мы использовали цветовое кодирование. Если лекционный блок еще идет, в расписании он выделен цветом, если уже закончился — серым.
Это также облегчает пользовательский опыт.
UI-kit — довольно кропотливая и масштабная работа. В данном случае он готовился параллельно с созданием дизайн макетов, и нам это очень помогло. В определенный момент было решено менять тему сайта со светлой на темную, и нам не пришлось ничего создавать с нуля — нужно было только скорректировать уже готовые элементы UI-кита.
UI-kit
Мы разработали для
AI Journey собственный UI-кит.
В нем собраны палитры цветов, стили типографики, компоненты кнопок и плашек, навигационные элементы, фоны и градиенты.
Этот набор правил поможет клиенту в дальнейшем поддерживать единство дизайна.
Кирилл Авдонин,
фронтенд-разработчик
«Сайт реализован так, что даже при сбоях на бэкенде, пользователь увидит весь нужный контент на фронтенде. Челлендж был в том, что серверная архитектура полностью находится в закрытом контуре Сбера и посылать запрос в API можно тоже только внутри этого контура. Поэтому для реализации мы выбрали статику JSON-файлами с проверкой путем пробрасывания билда в контур Сбера. В критической ситуации это позволяет редактировать контент без повторной сборки проекта".
Разработка
Мы с нуля разработали фронтенд сайта AI Journey на React v18 и Next. js v14. Для бэкенда была использована административная панель Sberlive, которая реализована на Python в контуре Сбера
Одним из вызовов было реализовать арабский язык, так как слова там читаются справа налево, и это влияет
на верстку. Но мы успешно справились.
Мультиязычность
Сайт AI Journey доступен на трех языках: русском, английском
и арабском. Мы реализовали мультиязычность с помощью библиотеки i18n, которая позволяет гармонично встроить перевод в интерфейс, но оставить код понятным.
Пришлось делать 4 разных видео
для разных разрешений, так как в каждом видео с краю была надпись AIJ, и ее нельзя было обрезать;
[01]
Нужно было передвигать картинки относительно текстов на разных языках, чтобы сохранить желаемый эффект;
[02]
Анимация
Понадобилось исправлять отступы, анимации и слайдер для арабского языка — в нем тексты читаются справа налево, и верстка не такая, как, например, в русском или английском языке.
[03]
Анимации на главной странице разработаны с помощью библиотеки GSAP. Все что можно сказать про главную страницу.
Сами анимации не сложные,
но возникли нюансы:
Для сравнения — так выглядит один и тот же экран сайта на арабском и русском языке.
Страница программы с трансляцией
До конференции, когда добавляется программа;
[01]
Во время конференции, когда идет лайв-трансляция лекций;
[02]
После конференции, когда все видео
переносятся в архив.
[03]
Для предзаписей мы подключили VK-плеер,
а для трансляций — Live-плеер от Сбера.
Чтобы успешно справляться с высокими нагрузками на сайте клиент решил поместить
всё на cdn. Список докладов можно было фильтровать по видам, поддерживалось переключение между активными докладами.
Также мы реализовали трансляцию так,
что в любом часовом поясе лекции выходили
в одинаковое время.
Записи докладов были доступны уже через
5 минут после окончания трансляции. Каждый доклад размечен на таймкоды с уникальным id,
по которому фронтенд связывался с бэкендом. Запросы по id отсылались каждую минуту, за счет чего контент в разделе трансляций обновлялся бесшовно.
Для этой страницы
мы реализовали три состояния:
Цифровая доступность
Чтобы контент сайта был доступен
для пользователей с особенностями восприятия, мы реализовали рекомендации по цифровой доступности a11y — использовали специальную разметку внутри html. Также мы применяли UI-компоненты библиотеки Radix-UI, которые отвечают стандартам сайтов для лиц с особенностями восприятия.
Также мы убрали из верстки кнопки остановки слайдера и сделали озвучку контента невидимых слайдеров в Swiper.
Версию с цифровой доступностью успешно протестировал незрячий сотрудник Сбера.
Особой сложностью стало тестирование арабской версии, так как все элементы были отзеркалены, по сравнению с главной версией сайта. Это потребовало больше внимание
к RTL-верстке — направлению текста, прокрутки и навигации, расположению кнопок на странице). Также мы более тщательно проверили шрифты и написание, чтобы избежать грамматических и логических ошибок.
После этого мы провели кросс-браузерное и кросс-платформенное тестирование. Так как предрелизный тест проходил в контуре Сбера, возможности использования устройств были ограничены. Поэтому мы использовали адаптивы браузеров и ферму устройств Сбера.
Тестирование
Мы создали отчетность
о тестировании каждого релиза.
В ней зафиксированы все страницы сайта, а также данные нефункционального тестирования:
производительность, отсутствие редиректов, требования к шрифтам и ресурсам.
Для каждого этапа релиза
мы разработали чек-листы
для проверки функций и общего состояния сайта. В итоге получилась QA-документация на 8 страниц и 18 частей.
Результаты
За три дня конференции сайт посетило
более 1,2 млн уникальных пользователей;
[01]
Сайт объединил информацию
о конференции и других мероприятиях,
доступных для разработчиков, молодежи
и тех, кто интересуется ИИ;
[02]
Клиент получил UI-кит, который в дальнейшем может использовать для разработки других сайтов по AI Jorney.
[03]