Yandex Pet Day

Анализ референсов и фирменного стиля
Первым делом я изучила существующие лендинги мероприятий Яндекса, а также открытые гайды по бренду (типографика, палитра, сетка). Это позволило понять принципы построения макетов:

• Используется модульная сетка 60x, большинство размеров кратно 6.
• Разные отступы между смысловыми блоками нужны для баланса визуального веса.
• В основе подачи информации — мягкий бенто-стиль, который удобен для мобильных устройств.

Разработку я начала с десктопной версии, чтобы затем аккуратно адаптировать её под мобильные устройства.

Создание прототипа и дизайн-концепции
На основе полученных данных я собрала общую композицию блоков, распределила текстовый контент и настроила базовые стили типографики. Затем подобрала цветовую палитру, изображения для фона первого экрана и плашек, добавила фирменный шрифт.
Для поддержания спокойного, делового настроения (tone of voice Яндекса) на лендинге оставлен минимум анимации. Но так как тематика связана с питомцами, я добавила 3D-графику, чтобы сделать интерфейс более дружелюбным.

Работа с графикой
Проанализировав доступные изображения, я составила промпты для Midjourney, сгенерировала 7 вариантов, доработала их и отобрала 4, которые можно анимировать при вёрстке. В макет также добавлены фотографии спикеров на идентичном фоне.

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

Адаптация под мобильные устройства
Бенто-стиль, использованный в дизайне, оказался очень удобен для вёрстки на автолейаутах. Я создала отдельные стили шрифтов для мобильных устройств, чтобы аккуратно адаптировать макет. Дополнительно настроила анимацию раскрытия меню и переходов к блокам в режиме прототипирования.