Разработка сайта для компании Modus — лидера на рынке ETL и BI-решений

modusbi.ru

«Modus» — признанный лидер на рынке российских ETL и BI-систем. Компания разрабатывает флагманское решение для автоматизации управленческого учёта, финансового планирования, консолидации и бизнес-аналитики.

Компания поставила задачу создать дизайн сайта, усиливающий позиции лидера рынка. Требовалось разработать убедительную презентацию продукта для топ-менеджеров и директоров, современный инструмент для генерации заявок.

Задача

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

Дизайн решение

Наша команда создала современный и технологичный дизайн, основанный на фирменном стиле компании. Мы отразили в визуальной коммуникации силу и надёжность лидирующего продукта через бескомпромиссную структурную чёткость, сдержанную технологичную эстетику и акцент на глубине и деталях. Дизайн говорит на языке своей аудитории: он деловой, информационно насыщенный, но при этом лишён визуального шума, что подчёркивает уверенность и зрелость бренда. Pазработали уникальные иллюстрации и наглядно проработали ключевые схемы, такие как архитектура платформы Modus ETL, для лучшего объяснения сложных концепций. Для проекта были подготовлены как светлая, так и тёмная версии интерфейса. В светлой версии использована чистая, воздушная палитра с мягкими белыми тонами (стиль neumorphism) для создания ощущения ясности и открытости. В тёмной версии ключевые элементы оформлены с использованием современных эффектов стекла (стиль glassmorphism), что подчёркивает технологичность и глубину продукта.

Цели технического рефакторинга

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

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

Технологический стек

Для реализации проекта был использован следующий набор технологий:

Фронтенд:

HTML5, CSS3 (с препроцессором SASS);
JavaScript (ES6+);
библиотека GSAP (GreenSock Animation Platform) для плавных анимаций;
PostCSS с плагинами для автопрефиксации и оптимизации CSS;
Webpack в качестве сборщика модулей.

Бэкенд:

PHP 8.1;
база данных MySQL 8.0;
Nginx в качестве веб‑сервера с настройкой кэширования.

Интеграции:

вебхуки для синхронизации с CRM‑системой (на базе Bitrix24);
Яндекс Метрика для аналитики.

Вёрстка: два стиля — неоморфизм и глассморфизм

Сайт поддерживает два визуальных режима, переключаемых пользователем:

1. Неоморфизм

Использует мягкие тени и градиенты для эффекта «выпуклости»
Элементы имитируют тактильную глубину, сохраняя минималистичность

2. Глассморфизм

Эффект «матового стекла» за счёт полупрозрачного фона, размытия фона, тонкой границы
Динамическая адаптация к фону через CSS‑переменные

Переключение между стилями реализовано через CSS‑классы корневого элемента, сохранение выбора в localStorage, плавный переход через CSS‑трансitions.

Мягкая анимация

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

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

Интеграция форм с CRM

Разработана индивидуальная интеграция форм сайта с CRM‑системой:

Фронтенд‑часть:

Валидация полей через JavaScript;
Отправка данных через fetch с обработкой ошибок;
Индикаторы загрузки и уведомления об успехе/ошибке.

Бэкенд‑часть:

Передача в CRM через:

REST API CRM (аутентификация по API‑ключу);
очередь заданий для асинхронной отправки;
логирование ошибок в систему мониторинга.

Дополнительные меры:

reCAPTCHA v3 для защиты от спама;
дублирование данных в базу сайта для резервного хранения;
вебхуки для обратной связи от CRM (например, статус заявки).

Оптимизация производительности

Скорость загрузки:

минификация и сжатие ресурсов;
ленивая загрузка изображений;
предзагрузка критических CSS/JS.

Кэширование: Nginx‑кэш для статических файлов.

Итоги технической реализации

В результате обновления:

время загрузки главной страницы сокращено на 40% (с 3.2 s до 1.9 s);
поддерживаются все современные браузеры (Chrome, Firefox, Safari, Edge, Yandex Browser);
формы передают данные в CRM с надёжностью 99.8 %.

Результат

В рамках проекта для компании Modus был выполнен полный цикл редизайна сайта. Результатом стал комплекс готовых к вёрстке адаптивных макетов, включающий продуманную структуру, интерфейсы ключевых страниц и UI-кит. Разработчики внедрили весь необходимый функционал. Дизайн-решение обеспечивает понятную презентацию продукта и соответствует целям по привлечению корпоративных заказчиков.

Один шаг
до решения задачи

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