Умилялись котикам, пока разрабатывали проект «Пристрой кота» для avito.tech

06 декабря ‘24

Заказчик: Инфографика
Страница кейса/результат: https://explore.avito.tech/

Разработали лендинг, который рассказывает пользователям про внутренние процессы и технологии платформы Авито

Агентство-исполнитель кейса

Лига А.

Превращаем любой дизайн в код для диджитал‑агентств, компаний и продуктовых команд. Разрабатываем веб-продукты для любого бизнеса — от простых страничек до больших сервисов.

Заказать похожий проект:

https://ligaa.agency/
mail@liga-team.ru

Сделать заказ

1. Вводная задача от заказчика, проблематика, цели

Основная задача лендинга "explore.avito.tech" — это наглядная демонстрация внутренних процессов и технологий платформы Авито. Он помогает пользователям разобраться в функционале платформы.

Что нужно было сделать:

Сверстать лендинг по готовому дизайну
Добавить интерактивные элементы
Протестировать
Помочь клиенту разместить лендинг на его хостинге

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Подготовили макет для разработки

На этом этапы мы развернули и настроили сборки, определили базовые переменные и шрифты. Также подготовили каждую страницу — проанализировали её, разбили на компоненты, нарезали и оптимизировали графику.

Приступили к вёрстке

Создали базовую структуру директория и файлов, начали верстать страницы. Использовали JavaScript и фреймворки для создания интерактивных элементов. А потом добавили библиотеку GSAP, чтобы улучшить визуальное восприятие — теперь анимации ведут себя плавно. Также поработали над адаптивным дизайном, чтобы на десктопе/в мобильной версии сайт выглядел и работал одинаково хорошо.

Протестировали сайт разными способами и оптимизировали

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

Для SEO-оптимизации внедрили лучшие практики, чтобы улучшить видимость в поисковике.

Слайдер на сайте переключается во время скролла

А здесь дело дошло уже до объяснения технических терминов, но так, чтобы пользователям было интересно — с котом и анимациями

Показываем, за сколько шагов пользователь пройдёт модерацию на платформе Авито

3. Результаты сотрудничества

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

Tech Platform — базовая инфраструктура с облачными решениями и технологиями
Moderation — модерация объявлений
Search & Recommendations — поисковые алгоритмы и системы рекомендаций
Mobile Cluster — мобильное приложение и технологии
Publication — публикация объявлений, начиная с создания и заканчивая размещением на сайте

4. Заключение

Нам было интересно работать над лендингом по нескольким причинам:

Занимались творческой свободой и использовали интерактивные элементы
Вложились командой в повышение осведомленности пользователей
Поработали над новыми задачами и реализовали сложные анимации, оптимизировали и адаптировали дизайн