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

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

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

Toybox

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

b522678d14c32b1b964a480887214cc9

Oliver Bossel

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

766f6ef400d67445ec244ed11a990793

Tsto

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

4671417f3af316b0ce1483ea6759990d

Derek Boateng

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

fb6f6034b92c0ed2518af524f6e08e01

Second Story

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

67d2c7813e1bdac1c302b12b09e7ded0

Mostly Serious

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

b78fd8018271fea31bb0f9a4affd5c1b

Minimal Monkey

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

2f5dc6dfa5d0b8e4a9681722b2473d9f0

LayerVault

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

85979479253b86c03189af32ba6976d0

Escape Flight

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

bc87ee0301079c64aacad42ca0efebe2

aSCIIaRENa

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

8cf779e5af29f785b07876dd9b130586

The Sartorialst

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

7dd7a779af992838958daf5313058c16

SilkTricky

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

6f24a896772e288413cd937b16296a51

SumAll

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

dfddbda25e7b03659fd45c44dcd2971e

Potluck

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

635574c540c3bf61d73af19489709858

Lowdi

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

183f938f9f4d24ca04a633101a17980b

Barcamp Omaha

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

35ce00f33669b6c1bb9d88d5c660619d

Combadi

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

bb32d64fc3d77f89d51b5b87fe05ae680

Waller Creek Conservancy: The Final Four

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

8ba5f847ad3d026f878f432fa65fdd3b

Lift

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

4ebc9a1e2db06afdf004ba8345a7e2ba

Snowbird

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

2dd3548739aff254ab30db63d8969fff

Etch

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

cd0bb46425ca84eb31936be04b9048fe

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

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

139c960092f8407d3099f0d7be68c0c7

44467: шаблон для портфолио-сайта с уже встроенной админкой Moto CMS, и его можно не покупать сразу а тестировать свою персональную версию бесплатно в течение 30 дней: вносить любые изменения и сохранять их.

609b4e2332041181f7581388d6b6eaa6