Анимировали сайт крупного российского вендора

О компании

Avanpost — крупный российский вендор в области безопасности идентификационных данных. Основные направления деятельности компании — защита учетных записей и безопасный доступ к приложениям.

Задача

Этот проект нам принесли ребята из креативного агентства Zapal. Их клиент Аванпост больше 15 лет помогает работать предприятиям защищённо. В 2024 они готовились к обновлению стиля и сайта — дизайн Zapal взяли на себя, а для разработки подключили нас на проект.

Клиент хотел обновить старый сайт и сделать акцент на главной странице

Именно главная страница рассказывает пользователям о компании и продуктах. Причём делает это с помощью погружения в космическую тематику.

Цели

1. Разработать главную страницу по готовым макетам;
2. Реализовать анимации в каждом блоке;
3. Оптимизировать страницу.

Вызовы и решения

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

Обычно мы подмечаем ошибки в макетах сразу и говорим про это дизайнеру

Если у него появляются сомнения или вопросы по поводу технических моментов, то выходим на созвон и на примерах объясняем что к чему и где нужно поправить.

В этот раз мы обратили внимание на такие моменты:

• Высота в макетах слишком большая — за основу взяли просто разрешение экрана, а не высоту в браузере.
• Заголовки со сложными ромбовидными градиентами, которые при экспорте становятся радиальными и не выглядят так, как в макете.
• Много блюров, которые мы не сможем повторить технически. Их очень сложно анимировать + количество повлияет на производительность.

Эти пункты было важно отловить на старте и исправить, чтобы потом по итогам разработки не получилось неудачи в цепочке «ожидание → реальность».

Эффект блюра

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

Оптимизировать сияние звезды было сложно, но мы справились

Приходилось создавать сияние и эффект блюра за счёт картинок на фоне. Мы наложили их друг на друга, немного размыли и выиграли по производительности.

Выводы

Рады, что добились на проекте:

• Плавных анимаций без задержек;
• Быстрых страниц, которые летают, как и корабли на сайте;
• Результата, который был заложен в концепцию и дизайнерские решения;
• Довольного клиента.