Краткий обзор
Торговому центру Augusts требовалось простое цифровое решение для отображения расположения магазинов.
2410 создала интерактивную адаптивную карту с редактируемыми метками и ссылками.
Пользователи могут удобно изучать торговый центр на любом устройстве, а обновления управляются через панель администратора.
История клиента
Торговый центр Augusts хотел простое, но современное решение для отображения расположения магазинов на своем сайте. Сложные анимации или 3D-функции не требовались - нужен был чистый и практичный инструмент.
Клиенту нужна была понятная карта магазинов, как в других крупных торговых центрах, с отображаемыми названиями магазинов, которые впоследствии можно было бы редактировать без изменения макета. Благодаря рекомендациям 2410 конечная карта обеспечила именно это: понятный план этажа, ясные метки и динамические ссылки - удобное в обслуживании решение для мобильных устройств, визуально соответствующее бренду.
Обзор проекта
2410 разработала интерактивную карту торгового центра Augusts, чтобы на понятном плане одного этажа показать расположение всех магазинов. Проект реализован с помощью Editor X, обеспечивая адаптивность карты и интуитивное использование на компьютерах и мобильных устройствах.
Названия магазинов постоянно отображаются на карте, а эффекты при наведении выделяют отдельные локации. При нажатии на магазин пользователь переходит на страницу соответствующего магазина. Названия магазинов и размеры шрифтов управляются через специальную панель администратора, что позволяет удобно обновлять их в реальном времени без помощи разработчика.
Чтобы интерфейс не выглядел перегруженным, всплывающие подсказки намеренно не использовались. Вместо этого основное внимание уделили простоте и ясности - пользователи сразу видят всю важную информацию.
Решение разрабатывалось и тестировалось итеративно с постоянным учетом отзывов клиента. Хотя рассматривалось создание раздела подарочных карт с использованием Octobercms, этот этап решили отложить из-за ограничений бэкенда и бюджетных соображений.
В результате была создана полностью функциональная, SEO-оптимизированная карта магазинов, которая упростила навигацию пользователей и обеспечила более удобный цифровой опыт покупок.
- Shopping center "Augusts"
Реализованные ключевые функции
- Интерактивная 1D-карта магазинов с 17 отмеченными магазинами
- Эффекты при наведении для визуальной обратной связи
- Адаптивный размер шрифта в динамических блоках магазинов
- Динамический контент из базы данных администратора (названия магазинов, настройка размера шрифта)
- Поддержка нескольких устройств (компьютер, планшет, мобильное устройство)
Технологический стек
Результат
Конечный результат - элегантная, полностью адаптивная интерактивная карта магазинов торгового центра Augusts , бесшовно интегрированная в сайт клиента. Разработанная с использованием подхода mobile-first , она обеспечивает удобный и интуитивный просмотр на всех устройствах.
Созданная с помощью
Editor X
, карта позволяет пользователям удобно ориентироваться среди 17 магазинов, каждый из которых четко отмечен и связан со своей страницей. Названия магазинов и размеры шрифтов динамически загружаются из подключенной базы данных администратора, обеспечивая быстрые и простые обновления.
Совет: Администраторы могут настраивать размеры шрифтов непосредственно в CMS с помощью системы числовых значений, обеспечивающей гибкость при дальнейших изменениях макета.
С учетом производительности и простоты вместо всплывающих окон или подсказок использовались эффекты при наведении. Это минималистичное дизайнерское решение сохраняет интерфейс чистым и одновременно обеспечивает выразительную визуальную обратную связь.
- Оптимизировано для мобильных устройств и компьютеров с пропорциональным изменением размера шрифта
- Обновления под контролем администратора с использованием
Shops database - Динамические ссылки на страницу каждого магазина
- Адаптивный макет, подстраивающийся под разные размеры экрана
Процесс разработки включал несколько итераций и визуальных улучшений на основе отзывов клиента в реальном времени. Это обеспечило соответствие функциональности и визуального оформления требованиям сайта торгового центра премиум-класса.
Финальная версия уже доступна: tcaugusts.lv/map
Думаете о создании похожей системы?
Здесь собраны самые частые вопросы от клиентов, которые интересуются разработкой интерактивных карт или аналогичных индивидуальных веб-модулей для торговых центров, площадок для мероприятий или платформ недвижимости. Эти ответы помогут лучше понять, что возможно, что потребуется и как проходит процесс.