Экспериментальные навигационные шаблоны

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

Экспериментальные навигационные шаблоны, при достаточной интуитивности, могут быть довольно интересными. Различные стили навигации могут добавить занимательности маленьким сайтам, на которых немного контента, или если вы хотите, чтобы пользователь перемещался по нему каким-то особым способом.

Хотя экспериментальная навигация не подойдет под каждый дизайн, для правильного проекта она может стать интересной альтернативой.

Боковая навигация

Боковая навигация может быть разной. Статической, динамической, при этом, она может быть почти любой ширины.

Хотя такой подход не покажется особо экспериментальным, он способен перевернуть ваш дизайн хотя бы потому, что меняет соотношение сторон холста.

Затем, вам придется подумать о том, как эта навигация будет выглядеть на экранах меньшего размера, и что делать с длинными словами. Задуматься будет над чем.

Лучшая боковая навигация проста, в ней применяются короткие слова, и она занимает фиксированный объем пространства. Дизайн сайта Sanctum, на изображении выше, прост и чист. При скроллинге, навигация не меняет положение, но при смене цвета фона, цвет текста меняется с белого на темный.

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

Скрытая, и всплывающая навигация

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

Нажимаете на кнопку, и появляется навигация, закрывая собой часть экрана.

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

Тем не менее, стиль, примененный Caava Design на изображении выше, интересен. В то время, как большинство дизайнеров используют плоские, более простые элементы, в дизайне этого меню присутствует глубина.

Горизонтальный скроллинг

Сперва, горизонтальная прокрутка покажется вам немного необычной. Из-за странной разницы в физическом и визуальном движении, чтобы такой поток хорошо смотрелся, требуется определенный дизайн.

Чтобы сделать эту идею более привычной, дизайнерам нужно использовать визуальные подсказки. Тут помогут стрелки, и разного рода направляющие элементы.

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

Читать далее на нашем сайте: http://uxgu.ru/experimental-navigation/

Show your support

Clapping shows how much you appreciated Ux guru’s story.