Промо-сайт digital-агентства с детальной проработкой UX.
Основные технологии
Команда Intelsy отвечала за весь фронт- и часть бэкенд-разработки.В фокусе был фронтенд: технологии, детали, анимации и доступность. Оптимальные решения, современные технологии и выверенные инструменты.
Frontend
Nuxt.js
SSRBackend
Django
Python
MST
MST – передовое диджитал-агентство полного цикла, известное сильным креативом и запоминающимися решениям. Среди клиентов – крупнейшие бренды в России и за рубежом, и новый сайт MST должен был отражать их уровень: не просто красиво, а безукоризненно.
Сделать сайт, который:
• выглядит как флагман на рынке
• соответствует международным требованиям digital-платформ
• выигрывает награды и становится витриной технологического мышления агентства
• работает быстро, стабильно и без компромиссов
Перед началом работы мы оценили предыдущие версии сайта MST и провели UX-аудит.
Особое внимание уделили техническим и визуальным деталям:
• скорости загрузки и плавности анимаций
• сценариям навигации с клавиатуры
• доступности для скринридеров
Результаты аудита легли в основу финальной версии дизайна и технической реализации сайта. Это позволило MST выйти на новый уровень восприятия.
«Разработка сайта MST шла в четыре этапа, в процессе которых мы вместе с клиентом дорабатывали как дизайн, так и архитектуру продукта. Ключевыми ориентирами было удобство, эстетика и актуальность на годы вперёд»
Глубокая проработка UX
Глубокая проработка UX
Каждый пользовательский сценарий детально продуман: например, плавная навигация по материалам кейсов. Визуально переключение между кейсами выглядит как слайдер, но на самом деле происходят переходы по URL с подгрузкой данных. Это повышает вовлечённость без ущерба SEO.
Продуманная архитектура
Сайт построен на SSR-архитектуре, что позволяет быстро подгружать страницы и обеспечивать доступность для поисковых систем. Все изображения загружаются асинхронно, чтобы не заставлять пользователя ждать, а на их месте отображаются блоки под цвет кейса для предотвращения сдвига макета.
Заботливая анимация
Все анимации разработаны с учетом управления захвата и перетаскивания, а не просто состояниями начала и конца: это обеспечивает полный контроль за интерфейсом для пользователя
Детализация и логика
Учтены и продуманы даже самые мелкие детали. Например:
– Для самых заинтересованных разработчиков, которые пожелали углубится и познать секреты, как мы это сделали, мы добавили сообщения в DevTools с приглашением откликнутся на наши вакансии.
– Уделили внимание навигации через клавиатуру: весь интерфейс визуально реагирует на взаимодействие. Также внедрили поддержку скринридеров, добавив правильные нотации.
– Визуализировали страницу контактов в 3D: показали на модели Земли, где находятся офисы организации, а также – анимировали её вращение для центровки при выборе города.
MST сейчас
Создали бурю входящих обращений: :по данным MST, в разы увеличилось количество входящих обращений от целевых клиентов и специалистов, заинтересованных в сотрудничестве. Это сказалось и на заметности проекта в диджитал-среде – в России сайт получил более 7 наград и номинаций.
Получили признание на международной арене: сайт получил награды на международных платформах Awwwards и CSS Design Awards, подтвердив высокий уровень UX, UI и технологической реализации.
Создали гибкую основу с потенциалом к развитию: архитектура сайта позволяет быстро добавлять новые страницы и фичи, а компонентный подход – переиспользовать блоки без потерь в качестве.
Ваша оценка кейсу: