Веб-дизайн с использованием карт

загруженное (4)

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

Дизайнеры таких веб-ресурсов не стали просто использовать стандартный макет. Вместо этого они сделали шаг назад, поразмыслили над содержимым и создали и интерфейс, который «вращается» исключительно вокруг содержимого.
Таким путем карты превратились в первичный интерфейс, на котором базируется все остальное. Руководствуясь подобным вариантом, дизайнеры часто находят радикальные решения, которые удивительно хорошо работают, в то же время отступая от норм.

Взгляните на сайт Mapitat, насколько незаурядным является его макет. Я называю его нетипичным, однако он выглядит интуитивно понятным. При поиске жилища его местоположение зачастую оказывается наиболее важным аспектом, уступающим в этом плане только цене. Интерфейс рассматриваемого сайта позволяет вам фильтровать варианты на основе этих критериев.

Вы визуально фильтруете локации, а расположенный на видном месте ползунок дает возможность сузить круг результатов. Такой подход не соответствует типичному подходу «Поиск/результаты/подробности» к фильтрации данных и, вероятно, не является самым простым и очевидным подходом.

Тем не менее он представляет собой превосходное решение соответствующие задачи. Еще одним отличным примером можно назвать сайт Whatwasthere.com. Этот сайт мог бы просто представлять собой список вариантов. Однако благодаря применению Google Maps и совершенного особого уровня разработки конечный продукт получился интуитивно понятным и интересным в использовании. Длинный список элементов данных показался бы намного скучнее.

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*


*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>