Пт, 17/02/17 – 3:54 | No Comment

Что 2017-й год вносит нового в Веб? Каких главных направлений и трендов в веб-дизайне, стоит ожидать? Сейчас все выясним – в формате емкого …

Читать статью »
CSS верстка

Оформление веб-страницы: css3 html5 приемы верстки сайтов

Дизайн

Веб-дизайн: правила создания и лучшие примеры дизайна сайтов

Wordpress

Wordpress сайту: современные и креативные, шаблоны вордпресс

Интернет-маркетинг

О маркетинге в сети Интернет и web-эффективности

Свой сайт

О создании оформления сайта, как сделать свой сайт лучше

Главная » Дизайн

Дизайн меню сайта: идеи, советы, примеры

11 Май 2013 Нет комментариев

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

Информационная архитектура

Планирование построения навигации следует начать с информационной архитектуры. Вам необходимо выяснить детали и характерные особенности информации будущего сайта: что наиболее важно и что будет ниже уровнем в информационной иерархии (множество различных деталей, потребности пользователя, sitemap, тестовая и базовая модель)

  • Используйте доступные для любого пользователя технологии
  • Избегайте использования Flash, JavaScript, jQuery или чего-либо еще что может вызвать проблемы в работе из-за различий браузеров

Простая и дружественная для пользователя терминология

Лучше использовать простую и очевидную терминология (ту которые легко понять посетителю), чем узко специализированные (сугубо индустриальные) термины.

  • Любой переход в среднем занимающий  у пользователей секунду или две на обдумывание скорее всего следует считать недопустимым
  • Если же возникает необходимость в клике и переходе по ссылке только для того чтобы понять куда она ведет, то это будет ухудшать UX и юзабилити

Дизайн меню сайта на примерах

Larissa Ness сделала меню своего сайта легким для понимания, используя достаточно общие названия элементов меню. Пользователям понятен их смысл, потому как они уже имели дело с чем-либо подобным.

Дизайн меню сайта

Но вот другой пример: креативное агенство Eighty8Four (http://www.eighty8four.com) использует термин «SHOWROOM», что может  служить сбивающим с толку фактором. Под этим пунктом может быть портфолио работ, фотоотчёт или видео с презентации бренда, но это не очевидно и посетители не имеют другого выбора как проверить свои догадки сделав переход.

Наименование раздела в меню сайта

Стандартизация дизайна меню сайта

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

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

St Davids Hospice Care имеет простую и понятную навигацию: в каждом разделе все ссылки из выпадающего списка горизонтального меню дублируются на боковой панели слева.  В оформлении горизонтального и вертикального меню этого сайта используется индикация цветом для текущего раздела и подразделов.

Дизайн меню сайта: индикация цветом текущего раздела

Индикация цветом текущего раздела меню сайта

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

Austin Eastciders (http://www.austineastciders.com) в дизайне меню для текущего раздела использует индикацию цветом, и едва заметное изменение фона.

Дизайн меню сайта: использование цвета

Media Surgery (http://www.mediasurgery.co.uk) использует светлый фон на открытой вкладке меню. Просто и эффективно.

Дизайн меню сайта

Соглашения и условные обозначения в WEB

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

  • Разрабатывая дизайн и структуру навигации веб-сайта лучше придерживаться известного принципа: Не заставляйте меня думать!
  • Как минимум, пользователи должны получать то, что они ожидают увидеть  (из набора устоявшихся норм и стандартов навигации) . Это то, что на западе понимают под термином user experience (UX) и активно призывают тестировать UX-дизайн еще до выпуска продукта на рынок. Если логотип во многих случаях кликабельный  — он должен быть кликабельным и на вашем сайте

Тестирование: привлечение 3-й стороны

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

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

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

Контекстное окружение

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

Что бы дать больше информации о директориях  своего сайта My Own Bike использует простые иконки в дизайне меню.

Иконки в дизайне меню сайта

Красивые анимированные иконки в навигации завлекают пользователей. Сайт высокотехнологичной компании элегантно использует этот эффект.

Вертикальное навигационное меню с красивыми анимированными иконками

Дизайн Sarah Parmenter разработан в духе современных трендов — стильный минимализм адаптивного сайта с элементами Flat дизайна. Помимо нестандартного расположения панели навигации, оригинален сам дизайн: короткие и понятные подписи под иконками, подсветка их окружения с цветовой индикацией выбранного раздела. Выглядит стильно и реалистично. Крупные элементы, при нижнем размещении меню, делают сайт удобным для пользователей планшетов.

Навигационное меню в современном веб-дизайне

Чистый и современный дизайн

SEO Werkz  это пример дизайна меню современного сайта — чистого и адаптивного, в плоском стиле.

меню сайта с плоским адаптивным дизайном

Примеры красивого оформления меню сайта

Сайты с эффективным и стильным (а также необычным) дизайном навигационного меню для вдохновения и новых идей.

Hablemos de Cervezaкрасивое меню для сайта

Veranda Cafeсайт с оригинальным меню

Creative Agency Square Circleпример креативного дизайна меню сайта

Bloom Search Marketing Inc.красивое оформление меню сайта

Hydroholisticкрасивое оформление меню сайта

Kukralкрасивое оформление меню сайта

Golden Islesкрасивое оформление меню сайта

4 Pines Beerкрасивое оформление меню сайта

Hunters Winesкрасивое оформление меню сайта

MonstersМеню на сайте: примеры красивого оформления

WEB EngineerПримеры дизайна меню сайта

Marc BedikianОригинальное навигационное меню

Configura tu VW
очень необычное меню навигации

Lmnop StudiosНестандартное вертикальное меню сайта

Читайте также:  Главная страница – оформление по правилам продающего сайта