Найти в Дзене

Как создать стильный сайт в ArcGIS StoryMaps: 7 советов

Если вы планируете представить исследование, рассказать визуальную историю или оформить проект в формате сайта, платформа ArcGIS StoryMaps может стать отличным инструментом. Однако, чтобы ваш проект выглядел современно и профессионально — как, например, этот пример, — важно знать не только, как загружать текст и карты, но и как работать с дизайном, навигацией и мультимедиа. В этой статье мы собрали ключевые советы и приёмы для создания собственного сайта на базе StoryMaps. Одна из наиболее удобных функций StoryMaps — навигация по разделам, которая отображается в виде бокового меню слева или сверху. Она особенно полезна для длинных историй с несколькими смысловыми блоками. Как включить: Совет: рекомендуем включать навигацию, если в вашем проекте более 3–4 крупных разделов (например, «Введение», «Методы», «Результаты», «Выводы»). Это существенно повышает удобство восприятия для читателя. StoryMaps позволяет вставлять кнопки с гиперссылками, ведущими, например, на документы, опросы или ст
Оглавление
Раздел дизайна в StoryMaps
Раздел дизайна в StoryMaps

Если вы планируете представить исследование, рассказать визуальную историю или оформить проект в формате сайта, платформа ArcGIS StoryMaps может стать отличным инструментом. Однако, чтобы ваш проект выглядел современно и профессионально — как, например, этот пример, — важно знать не только, как загружать текст и карты, но и как работать с дизайном, навигацией и мультимедиа. В этой статье мы собрали ключевые советы и приёмы для создания собственного сайта на базе StoryMaps.

1. Используйте навигацию (Story Navigation), если у вас много разделов

Одна из наиболее удобных функций StoryMaps — навигация по разделам, которая отображается в виде бокового меню слева или сверху. Она особенно полезна для длинных историй с несколькими смысловыми блоками.

Как включить:

  1. Перейдите во вкладку Design в верхней панели редактора;
  2. Прокрутите вниз и активируйте опцию Enable navigation;
  3. Убедитесь, что каждый раздел оформлен с помощью заголовка, чтобы он появился в навигационном меню.
Совет: рекомендуем включать навигацию, если в вашем проекте более 3–4 крупных разделов (например, «Введение», «Методы», «Результаты», «Выводы»). Это существенно повышает удобство восприятия для читателя.
Навигационное меню всегда фиксируется сверху
Навигационное меню всегда фиксируется сверху

2. Добавляйте кнопки (Button) для перехода к дополнительным материалам

StoryMaps позволяет вставлять кнопки с гиперссылками, ведущими, например, на документы, опросы или сторонние сайты.

Как это сделать:

  1. В текстовом блоке нажмите Insert → Button;
  2. Введите название кнопки (например: «Открыть PDF» или «Пройти опрос»);
  3. Вставьте ссылку (на Google Drive, другую StoryMap, сайт и т.п.)
Совет: Используйте кнопки, когда хотите выделить важное действие — доступ к полному отчёту, заполнение формы или просмотр презентации.
Размер и положение кнопок можно регулировать
Размер и положение кнопок можно регулировать

3. Встраивайте внешние ресурсы через Embed: видео, презентации, графики

StoryMaps поддерживает встраивание различных мультимедийных и аналитических элементов. Вы можете интегрировать:

  • Видео с YouTube или Rutube;
  • Презентации Google Slides;
  • Интерактивные панели из Tableau, Flourish;
  • ArcGIS Dashboards и другие ресурсы.

Как встроить элемент:

  1. Нажмите Insert → Embed;
  2. Вставьте ссылку или код iframe (если доступен)
Совет: для презентаций Google Slides рекомендуется включать автопрокрутку и полноэкранный режим. Это делает визуализацию более динамичной.
В данном случае в StoryMaps встроили Dashboards
В данном случае в StoryMaps встроили Dashboards

4. Добавьте блок с источниками и благодарностями (Credits)

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

Как это оформить:

  1. Добавьте обычный текстовый блок в конце;
  2. Назовите его, например, «Источники» или «Благодарности»;
  3. Добавьте структурированный список с гиперссылками (если есть)
Совет: это не только хороший тон, но и повышает научную добросовестность и доверие к информации, размещённой в проекте.
В авторах можно указать ссылки на веб-сайт или страницу соцсети каждого автора
В авторах можно указать ссылки на веб-сайт или страницу соцсети каждого автора

5. Настройте внешний вид: цвета, шрифты и стили

В StoryMaps можно создать собственную тему оформления, которая будет применяться ко всему проекту. Это позволяет адаптировать визуальный стиль под вашу аудиторию, организацию или личные предпочтения.

Как настроить тему:

  1. Перейдите во вкладку Design → Manage themes;
  2. Нажмите Create new theme;
  3. Настройте следующие параметры:
  4. Основной и акцентный цвета;
  5. Фоновый цвет;
  6. Цвет текста и ссылок;
  7. Шрифты заголовков и основного текста
Совет: Используйте светлый фон, тёмный текст и 1–2 ярких акцента для кнопок и ссылок. Избегайте слишком контрастных цветовых решений.
Всего можно использовать не более 7 цветов для всего сайта
Всего можно использовать не более 7 цветов для всего сайта

6. Используйте блок Sidecar для визуально насыщенных секций

Sidecar — это комбинированный блок, в котором можно разместить текст и медиа (фото, карту, видео) рядом. Он позволяет создавать эффект «журнальной» верстки или пояснять каждую карту отдельным комментарием.

Возможности Sidecar:

  • Фиксированное изображение с прокруткой текста;
  • Возможность смены карты при смене подписи;
  • Поддержка переходов, аннотаций и анимаций.
Совет: используйте Sidecar для пошагового объяснения карты или визуального рассказа. Это повысит вовлечённость аудитории.
Sidecar можно разместить слева, справа или по центру - в зависимости от "фокуса", который вы хотите сделать в работе
Sidecar можно разместить слева, справа или по центру - в зависимости от "фокуса", который вы хотите сделать в работе

7. Обязательно проверьте, как сайт выглядит на мобильных устройствах

Перед публикацией проекта:

1. Нажмите Preview;

2. Перейдите в мобильный режим (иконка смартфона);

3. Проверьте читаемость текста, отображение медиа и корректность всех ссылок

На конкретном примере видно, что для просмотра со смартфона сайт требует некоторой вёрстки
На конкретном примере видно, что для просмотра со смартфона сайт требует некоторой вёрстки
Совет: помните, что значительная часть вашей аудитории будет просматривать сайт с телефона. Убедитесь, что изображения не обрезаются, а текст не уходит за экран.

Заключение

ArcGIS StoryMaps — это не просто платформа для карт, а полноценный инструмент для создания визуально привлекательных и логически структурированных сайтов. Используйте навигацию, кнопки, внешние встраивания, стилизованные темы и обязательно завершайте проект блоком с благодарностями и источниками. С учётом этих приёмов ваш StoryMap будет восприниматься не как черновик, а как профессиональный и законченный продукт.

Для того, чтобы получше ознакомиться с нашим примером, перейдите по ссылке