Необычная навигация на сайтах

в 15:53, , рубрики: Блог компании TemplateMonster Russia, веб-дизайн, Веб-разработка, вебдизайн, меню, навигация

Перевод статьи Smashing Magazine Creative And Innovative Navigation Designs.

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

Toybox

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

Необычная навигация на сайтах

Oliver Bossel

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

Необычная навигация на сайтах

Tsto

Tsto — дизайн-агентство с необычным подходом к дизайну. Навигация столь же нетрадиционна: при просмотре сайта пункты меню зафиксированы в четырех углах экрана. Очень непривычно. Удобно реализован просмотр работ агентства с кнопками, ведущими на предыдущую и следующую работы.

Необычная навигация на сайтах

Derek Boateng

Сайт-портфолио дизайнера Derek Boateng интересен эффектом при прокрутке страницы: В процессе большая заглушка пропадает, а шапка сайта уменьшается, предоставляя больше полезного пространства для контента.

Необычная навигация на сайтах

Second Story

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

Необычная навигация на сайтах

Mostly Serious

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

Необычная навигация на сайтах

Minimal Monkey

Просмотр страниц на этом сайте напоминает книжную полку, выбираем статью, и она открывается на весь экран. Также удобно решение для страниц «About» и «Contact»: при нажатии по соответствующему пункту меню вся полезная информация раскрывается в шапке сайта. Недостатком такого интерфейса является отсутствие поиска — старые статьи найти непросто.

Необычная навигация на сайтах

LayerVault

Чистый дизайн, хорошая цветовая схема, ненавязчивая анимация контента и простая, но интересная навигация привлекают посетителей на сайт LayerVault.

Необычная навигация на сайтах

Escape Flight

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

Необычная навигация на сайтах

aSCIIaRENa

Для фанатов ASCII! В дизайне дух 90-ых годов.

Необычная навигация на сайтах

The Sartorialst

Фотографии — основа этого сайта, и дизайн помогает акцентировать внимание на этом. Особенность интерфейса — необычный hover-эффект изображений.

Необычная навигация на сайтах

SilkTricky

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

Необычная навигация на сайтах

SumAll

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

Необычная навигация на сайтах

Potluck

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

Необычная навигация на сайтах

Lowdi

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

Необычная навигация на сайтах

Barcamp Omaha

Одностраничный сайт о мероприятиях, вся необходимая информация: что, когда и где будет проходить, собрана в одном месте. Красивое внедрение в дизайн иконок Твиттера и Фейсбука.

Необычная навигация на сайтах

Combadi

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

Необычная навигация на сайтах

Waller Creek Conservancy: The Final Four

Анимация при наведении должна быть не только красивой, но и информативной. Пример такого hover-эффекта изображений можно увидеть на этом сайте.

Необычная навигация на сайтах

Lift

На сайте представлен необычная 3D-анимация изображений продуктов: при наведении картинка становится похожей на книгу, Пример такого эффекта есть на Codrops.

Необычная навигация на сайтах

Snowbird

Очень интересный и информативный эффект при наведении курсора на кнопку «Full Report»: появляются дополнительные данные. Кроме того можно увидеть hover-'эффект, отражающий логотип проекта.

Необычная навигация на сайтах

Etch

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

Необычная навигация на сайтах

В дополнение несколько шаблонов TemplateMonster с интересной навигацией:

38211: шаблон с навигационной каруселью изображений на главной странице.

Необычная навигация на сайтах

38198: шаблон с круговой навигацией главной страницы.

Автор: grokru

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js