avito.tech
Оформление образовательного курса: разработка визуальной структуры, верстка формул и графиков, создание гайдлайна для всей команды. Полное сопровождение проекта — от черновиков до финальной версии.
> 3 часов хрона
2023-2024
Задача
Образовательный проект в сфере технологий. Нужно было оформить курс: много данных, разрозненная структура, сложная подача. Задача — сделать сложное понятным через ясный визуал. Сделали гайдбук. Оптимизировали под анимацию: вся графика — с учётом движения. Настроили чёткую структуру и навигацию, чтобы дизайнеры, редакторы и аниматоры работали синхронно.
Поиск стиля
На старте нужно было определить визуальную концепцию курса. Мы подготовили несколько поисковых направлений, но в итоге клиент решил опираться на фирменный стиль. Дальнейшая работа велась в рамках брендбука Avito.
Гайдлайны
Из-за ограничений редакторов и формул в SVG возникли проблемы с выравниванием. Всё собирали вручную по мелкой сетке. Чтобы избежать хаоса, разработали строгий гайдлайн: зафиксировали размеры, отступы и правила для формул и графиков. Это помогло создать чёткую структуру и упростить работу всей команды.
Cтруктура данных
Материалов было много — понадобилась чёткая структура. Выделила отдельный этап на организацию файлов и слайдов. Для команды ввела документацию с описанием всех элементов.
Latex
Редактор не поддерживает нужное количество математических символов. Поэтому формулы набирали кодом в LaTeX, экспортировали в SVG и вручную выравнивали по сетке.
Адаптация данных
Все статичные файлы передавались в анимацию. Чтобы движения были плавными, продумала логику: разделила элементы на группы, разложила по слоям и подписала каждый — так аниматору было проще работать.
Все данные в кейсе вымышлены.