Циан Карьера

Команда Циана запустила масштабное обновление карьерного сайта. Основная идея проекта — освежить визуал сайта, улучшить его технические показатели, повысить вовлеченность и удобство для соискателей.

В этом проекте мы разделили зоны ответственности с HR-агентством АР: партнеры взяли на себя коммуникацию с клиентом, подготовку контента и создание дизайн-макетов. Наша задача — pixel-perfect верстка, разработка анимаций и подготовка кода для интеграции в закрытый IT-контур Циана.

Главным вызовом стали сроки и объем проекта. На реализацию 13 страниц сайта отводилось ровно 5 недель, при этом макеты поступали асинхронно. Мы получали контент итерациями: часть десктопных экранов, затем их адаптивные версии, потом новые десктопные блоки.

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

‍

‍

Сборка проекта велась в Webflow, а в качестве архитектурного стандарта мы выбрали методологию Client-First. Это решение гарантировало чистоту кодовой базы для инхаус-разработчиков Циана, которым предстояло работать с проектом после нас. Всего мы заверстали 29 уникальных секций, включая главную страницу, шаблоны под контент команд и сотрудников. Также мы подготовили динамические страницы вакансий, заложив логику под будущую интеграцию с корпоративным API заказчика.

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

Для реализации интерактивных элементов и бизнес-логики мы написали 14 модулей кастомного JS-кода общим объемом более 37 тысяч символов. В них вошли обработчики форм, валидация данных и маски ввода, скрипты модальных окон и аккордеонов, кастомные контролы слайдеров, скрипт-автотипограф и прочие функциональные компоненты.

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

Что касается технической базы — на каждой странице мы выстроили строгую структуру заголовков и подготовили on-page SEO: добавили разметку Schema.org и настроили aria-labels для доступности. Перед передачей архива клиенту мы детально прокомментировали каждый фрагмент кода и предоставили документацию по фреймворку, чтобы разработчики Циана могли легко развернуть сайт в своем контуре.

‍

Работы по проекту были полностью завершены за выделенные 5 недель. Нам удалось перенести в код сложный визуальный язык макета, оживить интерфейс, обеспечить бесшовный пользовательский опыт и дружелюбный вайб продукта. Благодаря команде агентства АР Циан получил визуально свежий и конверсионный инструмент, а наша экспертиза позволила безупречно воплотить эту идею с технической стороны.

Перед сдачей мы провели серию синтетических тестов и довели до идеала все ключевые характеристики сайта — Accessibility, Best Practices и SEO. Главным достижением стали финальные замеры производительности в PageSpeed Insights: несмотря на тяжелый визуал, обилие анимаций и объемный кастомный код, нам удалось наскорить 98 баллов в категории Performance на десктопе и 83 балла на мобильных устройствах, значительно превзойдя показатели прошлого сайта.

‍