Редизайн сайта для разработчика импортозамещающих решений для банков

В основе концепции — Liquid Glass: новейшая эволюция глассморфизма. Первичной задачей было удобство пользователя, которое мы соединили с красотой и инновационностью. Мы учли, что клиенты выбирают как бизнес-решения, так и IT-решения, поэтому выстроили удобную архитектуру, чтобы пользователь не запутался в количестве продуктов. Для этого мы создали отдельный блок для выбора именно той услуги или платформы, которая необходима.

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

Основой визуального языка стал Liquid Glass — новейшая эволюция глассморфизма, представленная Apple в 2025 году и впервые в веб-разработке для российского рынка реализованная в проекте Dynamika. В отличие от классического глассморфизма, который ограничивается размытием фона и полупрозрачностью, Liquid Glass — это полноценная имитация оптических свойств реального стекла: преломление света, хроматическая аберрация, зеркальные блики и «жидкие» анимации, реагирующие на движение пользователя.

Эффект построен на пяти оптических составляющих:

• Полупрозрачность и размытие — контент за стеклом мягко просвечивает;
• Преломление — стекло работает как линза, искажая фон по краям;
• Хроматическая аберрация — красный, зелёный и синий каналы преломляются по-разному, создавая цветовую кайму на границах;
• Зеркальный блик — направленный световой отблеск и тонкая светящаяся кромка;
• Движение — органичные волны и деформации, которые заставляют поверхность восприниматься как жидкая, а не как матовый пластик.

Для демонстрации сложных концепций, таких как архитектура платформы «Dynamika экосистема» и микросервисная модель, были разработаны уникальные схемы и иллюстрации. Проект поддерживает адаптивную вёрстку с корректным отображением эффекта Liquid Glass на всех типах устройств — от широкоформатных мониторов до мобильных экранов.

Liquid Glass — технология, которая только начинает распространяться за пределами экосистемы Apple, и её вёрстка требует принципиально иного подхода, чем классический глассморфизм. В этом мы первопроходцы на российском рынке веб-разработки.

Наш разработчик проделал огромную работу, добившись одинакового эффекта для пользователей на разных устройствах. Ключевая сложность заключалась в том, что стандартный CSS-подход через backdrop-filter: blur() даёт лишь эффект «матового стекла» без истинного преломления. Для полноценной реализации Liquid Glass использовалась комбинация CSS и SVG-фильтров: размытие фона через backdrop-filter, полупрозрачный фон, тонкая граница и внутренняя тень для имитации световой кромки, а также SVG-фильтр с картой смещения для создания эффекта преломления по краям панелей.

Для обеспечения кросс-браузерной совместимости была реализована прогрессивная деградация: в браузерах, не поддерживающих SVG-фильтры в backdrop-filter, эффект автоматически упрощается до размытия с сохранением читаемости контента. Динамическая адаптация к фону выполнена через CSS-переменные, что позволяет сохранять контрастность текста и элементов управления на любых разрешениях.

При обновлении сайта dynamika.ru ставились следующие технические задачи:

• переход на адаптивную вёрстку с поддержкой всех современных устройств;
• реализация Liquid Glass-эффектов с корректным отображением на разных браузерах и устройствах;
• оптимизация производительности (снижение времени загрузки, уменьшение количества HTTP-запросов);
• интеграция форм с CRM-системой заказчика;
• повышение доступности (accessibility) и SEO-показателей.

Для повышения UX внедрены плавные анимации на основе:

• GSAP — для сложных последовательностей (появление блоков, смена слайдов, анимация схем архитектуры);
• CSS transitions — для базовых эффектов (наведение на кнопки, плавное появление glass-элементов).

В рамках проекта для компании Dynamika был выполнен полный цикл редизайна сайта. Результатом наших дизайнеров стал комплекс готовых к вёрстке адаптивных макетов, включающий продуманную структуру, интерфейсы ключевых страниц и UI-кит. Мы сгенерировали более 50 ИИ-изображений и создали более 80 2D и 3D-иконок. Продумали архитектуру сайта и разработали свыше 30 продуктовых страниц — под разные решения с учетом пути пользователя. Наши разработчики внедрили весь необходимый функционал, учли SEO и GEO/AEO оптимизацию, настроили удобную админ-панель. Дизайн-решение обеспечивает понятную презентацию продуктовой линейки — от платформы «Dynamika экосистема» до отдельных решений для фронт-офиса, кредитного конвейера и CRM — и соответствует целям по привлечению корпоративных заказчиков в банковском секторе.