avatar Анастасия Ходакова
Номинация: Веб-дизайнер года

Проектирование и дизайн карты объектов и маршрутов

Проектирование и дизайн карты объектов и маршрутов

Задача

Всем привет! Разработала карту с объектами и маршрутами для сервиса «Культурная навигация» (кстати, проектирование и дизайн сайта тоже разрабатывала я)
Задача была разработать карту, на которой можно было бы легко найти интересные объекты, найти подходящий маршрут для путешествия, изменить его или же создать свой маршрут как самостоятельно, так и совместно с другими людьми.
Карта для сервиса «Культурная навигация» - это самый основной и важный функционал. Поэтому спустя год после разработки сайта, Заказчиком было принято решение переосмыслить и доработать этот блок.

Решение

Заказчик прислал ТЗ со своими пожеланиями к функционалу. Но в процессе работы я пересмотрела весь функционал и предложила Заказчику в некоторых моментах другое решение и закрыла пробелы в логике работы карты, которые Заказчик не учел.
Для этого мне пришлось детально разобраться в логике работы с картой и создать схему, чтобы систематизировать все это в голове (см. первую ссылку).
Я предложила создание/редактирование маршрута вынести в отдельный обособленный блок и назвать это «Конструктор маршрутов». Фильтры для объектов и фильтры для маршрутов я поместила в соответствующие блоки. Изначально заказчик хотел фильтр для объектов вынести отдельно на полосу меню.

Хочу обратить внимание:
Помимо того, что все мои макеты отвечают требованиям заказчика, они также максимально проработаны для удобства верстки и дальнейшего программирования (проработаны все стили, цвета, шрифты, сетка, кнопки, иконки, элементы, состояния и так далее; при необходимости, в файле описано поведение элементов в различных ситуациях, когда это сложно показать визуально) – все по папочкам и все по полочкам 😊

Результат

Вашему вниманию представляю максимально проработанный макет в Figma. Все интерактивно, можно навести и покликать, проработаны все формы. Листать макеты можно стрелками лево/право, либо по навигации.
1) Первая ссылка: схема поведения, которая помогла мне в дальнейшей разработке
2) Вторая ссылка: сама карта с фильтрами, списком объектов, конструктором маршрутов, списком маршрутов (17 макетов).
3) Третья ссылка: Мобильная версия всего вышеперечисленного (еще в процессе разработки).

Примеры реализации