Содержание
Перевод статьи 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»: при нажатии по соответствующему пункту меню вся полезная информация раскрывается в шапке сайта. Недостатком такого интерфейса является отсутствие поиска — старые статьи найти непросто.
0
LayerVault
Чистый дизайн, хорошая цветовая схема, ненавязчивая анимация контента и простая, но интересная навигация привлекают посетителей на сайт LayerVault.
Escape Flight
Навигация на сайте зафиксирована в верхней части экрана, имитируя табло вылетов в аэропорту. Если нажать на какое-нибудь направление и прокрутить страницу вниз, появится дополнительный горизонтальный блок навигации с полезной информацией, что очень удобно. Плюс ко всему на сайте много потрясающих фотографий, которые мотивируют путешествовать.
aSCIIaRENa
Для фанатов ASCII! В дизайне дух 90-ых годов.
The Sartorialst
Фотографии — основа этого сайта, и дизайн помогает акцентировать внимание на этом. Особенность интерфейса — необычный hover-эффект изображений.
SilkTricky
На сайте присутствует необычный и привлекательный hover-эффект в виде движения изображения статей. Кроме того сайт одностраничный.
SumAll
Чистый дизайн, без отвлекающего мусора, при наведении на информационные блоки появляются дополнительный текст. При клике — открывается блок с подробной информацией без перезагрузки страницы.
Potluck
Этот пример немного отличается от других, здесь нет сложной анимации, сайт привлекателен в первую очередь своей простотой и продуманностью. Хороший пример, когда на страницах нет ничего лишнего, только полезная информация.
Lowdi
Этот адаптивный одностраничный сайт отличается в первую очередь необычной формой информационных блоков, вместо общепринятых прямоугольных блоков используются блоки с большими закруглениями.
Barcamp Omaha
Одностраничный сайт о мероприятиях, вся необходимая информация: что, когда и где будет проходить, собрана в одном месте. Красивое внедрение в дизайн иконок Твиттера и Фейсбука.
Combadi
Интересное решения для табов, в целом дизайн хорошо отражает контент сайта, информацию о необычных идеях путешествий.
0
Waller Creek Conservancy: The Final Four
Анимация при наведении должна быть не только красивой, но и информативной. Пример такого hover-эффекта изображений можно увидеть на этом сайте.
Lift
На сайте представлен необычная 3D-анимация изображений продуктов: при наведении картинка становится похожей на книгу, Пример такого эффекта есть на Codrops.
Snowbird
Очень интересный и информативный эффект при наведении курсора на кнопку «Full Report»: появляются дополнительные данные. Кроме того можно увидеть hover-‘эффект, отражающий логотип проекта.
Etch
На этом адаптивном сайте навигация не занимает много места и может быть отключена по нажатию кнопки в верхнем левом углу.
В дополнение несколько шаблонов TemplateMonster с интересной навигацией:
38211: шаблон с навигационной каруселью изображений на главной странице.
44467: шаблон для портфолио-сайта с уже встроенной админкой Moto CMS, и его можно не покупать сразу а тестировать свою персональную версию бесплатно в течение 30 дней: вносить любые изменения и сохранять их.
