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