Навигация на сайте: рисуем, что хотим

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

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

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

Подборка взята из онлайн-журнала SmashingMagazine.com. В нем говорится о «тенденциях», но я не очень люблю это слово: сегодня одни тенденции, а завтра — другие. Настоящие тенденции — это то, что приходит надолго. Так что лучше использовать слово «решения». Итак, поехали!

Решение № 1. 3D.

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

Например, на этом сайте контент расположен на белой «бумаге», которую держат цветные навигационные «крепежи».

Голубая лента охватывает верхнюю часть поля с контентом.

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

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

Еще одна ленточка.

Диалоговые «пузыри» дороги сердцу каждого американского дизайнера, выросшего на комиксах. У нас комиксы не входят в пул культурных ценностей, однако «пузыри» могут украсить и русскоязычные сайты. «Пузыри» — отличный способ отказаться от банальных прямоугольников, которые господствуют в дизайне навигационных меню, и расположить ссылки в необычном порядке.

Так выглядит навигация на сайте дизайнера Алексея Абрамова.

Вариант, который называется «мыслительный пузырь». Серия овалов обозначает не речь, но мысль. А не пойти ли мне домой?

Здесь «пузыри» проистекают из речевого отверстия некоего существа, кажется пришельца.

Этот вариант — компромисс двух решений: стандартного прямоугольника и «пузыря». Не знаю, как вам, а мне здесь нравится утонченное сочетание оттенков.

То же самое, но с эффектом незавершенного наброска.

Этот дизайн примечателен сочетанием ярких «пузырей» и черного фона.

А этот тем, что «пузырный» отросток появляется только при активации раздела. Заодно меняется и цвет фона.

Решение № 3. Округлости.

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

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

Несмотря на классические корпоративные оттенки этот сайт кажется менее строгим благодаря мягким уголкам «менюшек».

На этом сайт кнопки еще и нажимаются, слегка смещаясь со своего места: немного игривости на серьезном сером фоне.

Дизайн и веб-стандарты. Округлости этого сайта заметны только в последних версиях современных браузеров: Safari, Firefox. Opera и Chrome. В Explorer кнопки меню выглядят обычными прямоугольниками.

Решение № 4. Иконки.

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

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

Выпадающее меню с иконками. Обратите внимание на углы и 3-хмерность.

Здесь иконки отмечают только активный раздел.

Нарочитый примитивизм крупных иконок в вертикальном меню.

Яблочный стиль, куда без него?

Кому-то нравится быть несерьезным.

Решение № 5. Анимация.

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

При наведении курсора полароидные снимки подскакивают. Смысла в этом немного, зато приятно поелозить мышью туда-сюда.

Здесь дизайнер использовал анимацию в практических целях. При наведении курсора всплывает подсказка: «Ну кликай же!» Белый Дом ждать не любит.

А на этот сайт дам ссылку: помотайте коровушку по полю . Бутылки надо сбивать, а на червяков не приземляться.

Решение № 6. Нестандартные формы.

«Пузыри», прямоугольники — все это те же яйца, вид сбоку. Некоторые дизайнеры экспериментируют с формами и материалами. Кстати, это несложно. Любой предмет или форма могут стать основой для навигационного меню. Те же яйца. Как вам идея пасхального сайта с панелями в виде разноцветных яиц? И почему до этого никто не додумался?

Зато есть значки.

Клейкие бумажки для заметок.

Визитки.

А можно просто намалевать нечто аморфное.

Понатыкать кружков.

Поиграть в анонимку.

Или посветить фонариком.

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

А вот иконки могут быть разные: строгие и веселые, минималистичные и барочные, однотонные и расписные.

Источник: http://btsmarketing.com