идеи, советы, примеры — Seo Design
Навигационное меню сайта подобно дорожным знакам и разметке в реальной жизни или системе нумерации секций и уровней торговых комплексов. Вы не можете легко ориентироваться и двигаться в желаемом направлении, если не понимаете прежде всего – где вы находитесь сейчас. Продуманный дизайн меню сайта существенно упрощает задачу нахождения необходимой информации, нужного товара и т.д. Речь идет о заметности и понятности различных элементов в навигации сайта.
Информационная архитектура
Планирование построения навигации следует начать с информационной архитектуры. Вам необходимо выяснить детали и характерные особенности информации будущего сайта: что наиболее важно и что будет ниже уровнем в информационной иерархии (множество различных деталей, потребности пользователя, sitemap, тестовая и базовая модель)
- Используйте доступные для любого пользователя технологии
- Избегайте использования Flash, JavaScript, jQuery или чего-либо еще что может вызвать проблемы в работе из-за различий браузеров
Простая и дружественная для пользователя терминология
Лучше использовать простую и очевидную терминология (ту которые легко понять посетителю), чем узко специализированные (сугубо индустриальные) термины.
- Любой переход в среднем занимающий у пользователей секунду или две на обдумывание скорее всего следует считать недопустимым
- Если же возникает необходимость в клике и переходе по ссылке только для того чтобы понять куда она ведет, то это будет ухудшать UX и юзабилити
Larissa Ness сделала меню своего сайта легким для понимания, используя достаточно общие названия элементов меню. Пользователям понятен их смысл, потому как они уже имели дело с чем-либо подобным.
Но вот другой пример: креативное агенство Eighty8Four (http://www.eighty8four.com) использует термин «SHOWROOM», что может служить сбивающим с толку фактором. Под этим пунктом может быть портфолио работ, фотоотчет или видео с презентации бренда, но это не очевидно и посетители не имеют другого выбора как проверить свои догадки сделав переход.
Стандартизация дизайна меню сайта
Без единообразных по стилю решений, пользователь при внутреннем перемещении может подумать, что попадает на другой сайт.
Единство принципов в дизайне меню навигации (элементы графики, цветовая палитра, расположение информации и т.д.) позволит избежать этого.
Единство стиля в дизайне меню подразумевает узнаваемость, а не скучный шаблонный вид для всех разделов, рубрик, страниц сайта. Узнаваемость выражается в стиле, деталях оформления и необходима для продвижения бренда, а набор отличных по дизайну страниц нельзя назвать стильным дизайном
St Davids Hospice Care имеет простую и понятную навигацию: в каждом разделе все ссылки из выпадающего списка горизонтального меню дублируются на боковой панели слева. В оформлении горизонтального и вертикального меню этого сайта используется индикация цветом для текущего раздела и подразделов.
Индикация цветом текущего раздела меню сайта
Пользователю важно знать свое положение на сайте в любой момент. Предоставьте ему такую возможность: изменением фона пунктов меню, полужирным шрифтом, цветом и т.
д.
Austin Eastciders в дизайне меню для текущего раздела использует индикацию цветом и едва заметное изменение фона.
Media Surgery (http://www.mediasurgery.co.uk) использует светлый фон на открытой вкладке меню. Просто и эффективно.
Соглашения и условные обозначения в WEB
Несколько слов о связи интуитивной понятности меню и удобством навигации по сайту.
- Разрабатывая дизайн и структуру навигации веб-сайта лучше придерживаться известного принципа: Не заставляйте меня думать!
- Как минимум, пользователи должны получать то, что они ожидают увидеть. Это то, что на западе понимают под user experience (UX) и призывают тестировать UX-дизайн еще до запуска продукта. Если логотип во многих случаях кликабельный – он должен быть кликабельным и на вашем сайте
Тестирование: привлечение 3-й стороны
Всегда тестируйте дизайн меню навигации с привлечением независимых, т.е. не участвующих в создании и разработке людей.
- Стоит обратить внимание на предпочтения в использовании методов навигации по сайту
- Прежде всего анализировать надо временные затраты на нахождение нужной информации, а для достоверного результата привлекать больше людей
Если есть проблемы, то тщательный послетестовый разбор выявит их и станет источником неожиданных идей.
Контекстное окружение
В соответствии с вашим контентом и навигацией создайте в дополнение к ней некий графический или текстовый контекст. Возможно, это будут небольшие иконки или короткое описание (в виде заголовков под рубрикой) дающие общее представление о странице, при условии тематичности поста из связанной рубрики или раздела сайта.
Что бы дать больше информации о директориях своего сайта My Own Bike использует простые иконки в дизайне меню.
Красивые анимированные иконки привлекают внимание. Сайт высокотехнологичной компании элегантно использует этот эффект в меню навигации.
Мега меню с иконками на сайте канадской компании SNIPCART выглядит привлекательно.
Пункты меню заглавными буквами, свободное пространство, понятные названия разделов и крупно обозначенная подсветка при наведении делают большое выпадающее меню дружественней к мобильным пользователям и удобней для сенсорного ввода.
Чистый и современный дизайн
SEO Werkz – это пример дизайна меню современного сайта – чистого и адаптивного, в плоском стиле.
Примеры красивого и креативного оформления меню сайта
Сайты с эффективным и стильным (а также необычным) дизайном навигационного меню для вдохновения и новых идей.
Snailbird
Hydroholistic
Kukral
Golden Isles
4 Pines Beer
Hunters Wines
Monsters
Mecannical
WEB Engineer
Marc Bedikian
Lmnop Studios
Сайты с интересным решением меню
Меню на сайте — вроде ничего сложного с первого взгляда, но как сделать так, чтобы меню отличало сайт, делало его особенным и в тоже время целиком соответствовало стилю всего сайта? Создать меню — несложно, а вот создать оригинальное интересное меню — не так то и просто.
Даже небольшие элементы — подсветка, подчеркивание, стрелочки, обводка, меню с небольшими иконками, выпадающие разноцветное меню, меню с эффектом перелистывания, другое, делают сайт более интересным, интерактивным, предоставляют пользователю небольшой элемент игры и просто такое меню — приятно для работы с сайтом. Надеемся, что сайты с подборки подскажут вам новые идеи и решения.
1. Сайт Gnosh
2. Bern. Голубая подсветка при наведении, но главное то, что меню визуально служит как будто продолжением порваной кромки коробки — достаточно ярко и в тоже время абсолютно в стилистике всего сайта.
3. Racket — чрезвычайно креативная и необычная австралийская студия дизайна, специализирующаяся на неординарном визиальном и экологическом дизайне.
На этом сайте можно застрять надолго, изучая каждую деталь интерфейса и то, куда та или другая надпись или картинка могут привести пользователя.
4. Яркая и удобная газета Южного Уельса This is South Wales. Сайт создан таким образом, чтобы максимально охватить как можно большую аудиторию с разными интересами. При этом сайт уельской газеты дает ощущение непринужденности, а не официальности серьезной газеты. Обратите внимание на визуализированное меню.
5. Интересное решение-презентация всех работ голландского агентства 75b
6. Cтудия Grafik. Работы представлены как плиточки. При этом при выборе каждой отельной рубрики (фотографии, веб, бренды), все работы «гаснут» и на экране остаются яркими только те, которые относятся к той или другой рубрике. Помимо этого существует еще и выпадающее меню вверху страницы сайта.
7. Оригинальная презентация магазина сумок Noonstyle. Меню чуть заметно в правой части сайта, зато на весь экран выводится фотография, которая как-будто имитирует текстуру изделья.
8. Интересный сайт студии Tisha creative , на котором как бы протекает обычная жизнь Лондона — меняется день и ночь, а меню для удобства пользователей подсвечивается белым.
9. Learnlakenona. Попутешествуйте по озеру, ведь это — настоящая карта со всеми надписями. Никогда не знаешь, что найдешь под очередным объектом на карте.
10. Alexbuga предлагает нам настоящее сложное технически меню. У пользователя создается впечатление, что он зашел не послушать музыку, а заглянул в настоящую аппаратную. Так и чешутся руки поклацать кнопки и потянуть все рычажки. На этом сайте даже можно самому сочинить музыку 😉
11. Campfirenyc. Меню на этом сайте можно рассматривать с разных ракурсов. Интересно, что само меню оформлено в виде характерного прямоугольника, который создает аллюзию с прямой речью, что часто используется в комиксах. Однако, это не главное. Самым интересным элементом сайта является реализация каждой из рубрик меню — рубрика открывается не вниз, и не на ширину всей страницы сайта, как стоило того ожидать, а вправо одновременно в две колонки.
12. Wearefellows — меню как будто выпадающее меню в левом верхнем углу, которое сначала совсем незаметно для пользователя. Этот сайт — подтверждение идеи, что минимализм нынче в моде — только черные и белые оттенки — ничего более. Стильно и эффектно.
13. Usu На сайте видим сразу несколько вариантов реализации меню — это и нетипичный белый шрифт в черных прямоугольниках, которые при наведении подсвечиваются красным, а также меню на сайте реализовано посредством приема доски объявлений — ненавязчиво и по-студентчески.
14. Добро пожаловать в бар Getraenke-kukral! Хотите воды, лимонада, пива или сока? Меню на этом сайте реализовано посредством использования больших иконок, которые олицетворяют тот или другой напиток. При наведении контур меню слегка подсвечивается темным цветом.
15. Typographica Меню этого сайта — типографические работы, но в придачу существует выпадающее меню с детальным описанием содержания всей рубрики.
Интересно, что в развернутом виде можно открыть все рубрики одновременно.
16. Workatplay — меню сайта спрятано в верхнем левом угле страницы, но открывается при движении мышки в соответствующем направление. Кроме этого — красивое сочетание цветов — розовый шрифт на черном фоне.
17. Benhulse. Типичное плиточное меню. При этом каждая рубрика слегка подсвечивается при наведении. Просто и понятно.
18. Rednoseday Каждая рубрика при открытии перекрашивается в белый цвет, а по краю образовывается своеобразная строчка от шва — оригинально и стильно.
19. Molanphydesign Оранжевая еле заметная подсветка меню.
20. Синяя подсветка Fullyillustrated реализовуется одновременно в двух ракурсах — сверху страницы и снизу фотографии. Таким образом, обозначено, что каждый пример с галереи задается одновременно двумя рубриками (одной нижней и одной верхней).
21. Builtbybuffalo— Обратите внимания на обозначения активного меню оранжевой каплей.
22. Mariecatribs На активное меню указывают стрелочки.
23.
24. Carbonmade . Еще один вариант интеграции меню с иконками — оригинально и забавно.
25. Richbrown Меню служат темные квадраты, которые анонсируют работу, которые будут представлены в следующих светло-серых квадратах.
26. Danwiersema. Меню по правой стороне реализовано не без участия иконок.
27. Creativespark. Черно-желтый сайт, и меню подсвечивается соответственно. Кроме того, не забудьте клацнуть на надписи на рисунках.
28. Jacoblee Активное меню указывается небольшой стрелкой-треугольником. Аллюзия стрелки к типичной клавиши «проигрывать».
29. Hardgraft Меню этого сайта представлено на фоте геометрической фигуры в виде клапана сумки или кошелька.
30. Resoluut. Меню создано с эффектом подкрутки. При этом, название рубрики не меняется.
Автор — Дежурка
Tweet
�
[an error occurred while processing the directive]
10 замечательных примеров навигации по веб-сайту
Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство на нашем веб-сайте. Для получения дополнительной информации нажмите здесь. Понятно
Дизайн
04 сентября 2019 г.
Создать сеть ссылок, по которой пользователь может перемещаться, непросто. Посмотрите эти 10 веб-сайтов, которые не только сделали это, но и сделали это стильно!
Дизайн навигации по сайту.
Это такой важный строительный блок любого прототипа веб-сайта — когда вы в последний раз сталкивались с веб-сайтом, на котором вообще не было навигации? Напротив, мы все посещали определенные веб-сайты только для того, чтобы быть сбитыми с толку или раздраженными дизайном навигации.
Спроектируйте и протестируйте UX и взаимодействие ваших веб-сайтов. Это бесплатно. Неограниченное количество проектов!
Возможность не просто перемещаться по сайту, а исследовать и находить то, что им нужно. Но что делает хороший дизайн навигации? Это сложная часть: то, чего должен достичь ваш дизайн навигации, будет меняться от веб-сайта к веб-сайту. Как и во многих других аспектах UX-дизайна, здесь нет универсального подхода.
При этом многие дизайнеры обращаются за помощью к часто используемым шаблонам пользовательского интерфейса, используя эти структуры для создания скелета своей навигации.
Несмотря на то, что мы не можем составить контрольный список для идеального дизайна навигации, мы можем составить список веб-сайтов, на которых все сделано правильно! Либо из-за того, насколько легко ориентироваться, насколько красиво он выглядит, либо из-за того, насколько крутой опыт — все эти веб-сайты выделялись, потому что пользователи могут свободно перемещаться и наслаждаться своим временем на веб-сайте.
Посмотрите их и почувствуйте вдохновение!
10 примеров навигации по веб-сайту, которые вдохновят вас
1. NKI
NKI — студия, специализирующаяся на визуальных эффектах: CGI, анимация и VFX, расположенная во Франции. Из-за совершенно удивительного характера их бизнеса можно было бы уже возлагать большие надежды на визуальные эффекты, которые можно увидеть на их веб-сайте, и NKI оправдывает эту задачу.
Сама навигация по веб-сайту является инновационной и почти игровой: навигация в полноэкранном режиме с использованием прокрутки для смены экранов. Вы чувствуете их индивидуальность в том, как пользователи испытывают что-то другое, что-то захватывающее.
Мы фанаты, в частности, экрана Works, где мы можем найти их предыдущие проекты. Пользователи видят сетку изображений, и когда они попытаются щелкнуть одно из них, они обнаружат, что экран также использует курсор для навигации. Это неожиданное удовольствие делает просмотр их предыдущей работы интересным и пробуждает желание исследовать.
Поскольку на веб-сайте есть фиксированное меню в левом нижнем углу, пользователи могут перемещаться, не чувствуя себя потерянными. Это важная деталь для обеспечения хорошей навигации!
Нетрадиционный? Абсолютно. Но работает ли это? О да, это так. Это заставляет людей хотеть осмотреться и найти больше интересных вещей о самой навигации по веб-сайту — достижение, за которое многие веб-сайты электронной коммерции готовы убить.
2. VERK
Великие вещи не обязательно должны быть сложными. VERK показывает нам, насколько мощным может быть сосредоточение внимания на сути — четкие линии и пустое пространство на каждом экране не дают пользователям ничего, что могло бы отвлечь их или смутить.
Пользователи сталкиваются с короткой навигационной панелью в верхней части экрана, которая содержит две основные категории продукции VERK: часы и ремешки для часов. У нас также есть современное меню, похожее на гамбургер, которое выделяется, но при этом остается узнаваемым.
Помимо еще пары экранов, которые призваны представить бренд и его философию, это весь веб-сайт.
Пользователи также имеют карту сайта в нижнем колонтитуле, которая содержит все страницы веб-сайта, которые могут заинтересовать пользователя. Даже с нижним колонтитулом Verk отлично справляется с тем, чтобы навигация была легкой, когда дело доходит до электронной коммерции. У пользователей есть свобода выбора, но при этом у них не так уж много вариантов, которые заслуживали бы беспокойства по поводу парадокса выбора.
3. Питомник Petersham
Среди примеров навигации по веб-сайту питомник Petersham выделяется двумя панелями навигации в верхней части экрана, а также нижним колонтитулом панели навигации.
Нам нравится, что визуальный аспект элементов управления навигацией является прямым ударом по индивидуальности бренда — тонкие зеленые линии заставляют нас чувствовать, что запахи сада вторгаются в офис. Но на более функциональном уровне мы ценим то, что две панели навигации вверху четко различаются: одна для новых клиентов и одна для участников.
Расширяемое меню, которое открывается из второй верхней панели навигации, является хорошим примером дизайна навигации в действии. Он простой, хорошо организованный и охватывает все важные места на их веб-сайте. Это означает, что пользователь, который хочет увидеть домашнюю страницу магазина, и пользователь, который ищет посуду, могут добраться до места назначения за одно и то же время: одним щелчком мыши.
Нам особенно нравится категоризация их большого расширяемого меню. Маркировка страниц и элементов — один из самых сложных аспектов дизайна навигации. Важным фактором, стоящим за этой трудностью, является идея о том, что один предмет может принадлежать к двум категориям.
Питомники Petersham установили четкую иерархию категорий и включают одну и ту же подкатегорию более чем в одну категорию.
Просто зайдите в их расширяемое меню и посмотрите, есть ли у вас «Украшения» в разделе «Товары для дома». Однако у вас также есть другие «декоративные элементы» в разделе «Уникальные» — это означает, что некоторые декоративные элементы являются уникальными, а другие — нет.
И что еще более важно, пользователи могут напрямую связаться с одним или другим, в зависимости от того, что им нужно.
4. Панк пр.
Это дизайнерское агентство — прекрасный пример навигации по сайту. Ребята из Punk Ave создали отличную навигационную панель в верхней части всех экранов веб-сайта. В нем есть не только основная концепция, но и очень краткое описание того, что пользователи найдут на каждом экране.
Еще лучше, когда дело доходит до ориентации пользователя: дополнительная панель навигации появляется сразу под заголовком экрана. Например, на странице «Наша работа» пользователи найдут несколько других перечисленных подкатегорий — в зависимости от того, какую работу пользователи хотели бы видеть на Панк-авеню, 9.0003
Взаимодействия незаметны, но заметны из-за ярких цветов на работе. Анимации короткие и тонко ориентированы на добавление опыта навигации.
Сам веб-сайт небольшой, а это означает, что было небольшое количество реальных страниц, которые дизайнеры должны были учитывать при создании дизайна навигации.
Однако Punk Ave — прекрасный пример навигации по веб-сайту для компаний, у которых нет сотен товаров или категорий.
Дело не в том, чтобы получить как можно больше страниц на этой панели навигации, а в том, чтобы каждая страница считалась.
Спроектируйте и протестируйте UX и взаимодействие ваших веб-сайтов. Это бесплатно. Неограниченное количество проектов!
5. ПОЛИТИКА
Дизайн навигации не прост, и он не становится проще, когда у вас есть сотни и сотни элементов или страниц для учета. Вот почему дизайн навигации на крупных веб-сайтах, таких как Amazon, служит точкой отсчета: потому что это сложно сделать правильно. Вот почему мы решили включить POLITICO в наш список примеров навигации по сайту.
Отличительной чертой дизайна навигации в POLITICO является расширяемое меню. Он занимает весь экран и не отвлекает внимание. Вместо этого у пользователей есть простые группы категорий в наиболее важных уголках веб-сайта. POLITICO имеет огромное количество контента, что делает их навигацию еще более впечатляющей.
Пользователи могут находить контент по теме, области, автору… Настоящая задача здесь состоит в том, чтобы предложить пользователям достаточное количество вариантов, чтобы они могли найти область контента, которая им нравится или нужна — во многом так, как Amazon хочет, чтобы покупатели находили нужный контент. правильная категория для того предмета, в котором они нуждаются.
Итак, это замечательная идея — предлагать не только высшие категории, такие как «Оборона» или «Торговля», но и сохранять гибкую позицию в меню. «Выборы 2020» — это высшая категория, которая, вероятно, исчезнет после выборов, но до тех пор она наверняка будет нравиться публике.
6. Dataveyes
У Dataveyes есть один из самых известных примеров навигации по веб-сайту. У них довольно много последователей за дизайном их веб-сайта, и неудивительно, почему: он отвечает всем требованиям. Это инновационно, но не сбивает с толку и очень наглядно с оттенком научного шарма.
Этот пример навигации по веб-сайту имеет классический элемент, такой как панель навигации вверху, а также нетрадиционные элементы.
Например, на домашней странице у пользователей есть возможность щелкнуть стрелку, которая инициирует знакомство с агентством и его философией — чтобы данные говорили и преобразовывались в опыт. Нажав на маленькую стрелку или просто прокрутив страницу, пользователи просматривают страницы с прекрасными визуальными эффектами и анимацией, которые почти гипнотизируют.
7. ETQ
ETQ — это белые линии и минималистская атмосфера. Пользователи обнаружат, что их глаза естественным образом притягиваются к элементам на странице, руководствуясь негативным пространством вокруг экрана. Следуя тому же стилю, что и остальная часть веб-сайта, ETQ предлагает простую навигацию, которая не отвлекает от более крупного опыта: покупок.
В этом примере навигации по веб-сайту панель навигации в верхней части экрана используется как путь к сокращенному количеству категорий. В результате панель навигации оставляет много пустого пространства — даже с расширяемым меню, которое пользователи видят, когда наводят курсор на панель.
Подробнее о минималистичных сайтах читайте в нашей статье.
Еще одна интересная деталь навигации по веб-сайту ETQ — это страница продукта. Подобно Amazon, ETQ осуществляет перекрестные продажи так, что пользователи даже не заметят этого.
В разделе «Вам также может понравиться» пользователи находят 3 разных товара, которые так или иначе относятся к основному товару на странице. Это тонко и позволяет пользователям получать эти дополнительные предложения естественным образом. Никакого давления, да?
Нам нравится, что при всей своей простоте ETQ удалось обрести голос. Сама идея бренда заключается в том, чтобы создавать продукты, которые не охвачены брендингом — так почему их веб-сайт должен быть покрыт визуальными эффектами?
8. Alfa Charlie
Этот пример навигации по сайту также прост по своей структуре, но сделан красиво. Веб-сайт Alfa Charlie, созданный для креативного агентства из Сан-Диего, посвящен элегантности и взаимодействию.
Сама домашняя страница работает как знакомство с агентством, с меню гамбургеров в правом верхнем углу. Сама иконка меню бургера не имеет никакого взаимодействия, но как только пользователи открывают меню, все зависит от взаимодействия. Меню открывается, чтобы занять весь экран, с четырьмя более важными страницами, перечисленными справа.
Вот интересная часть: не только меняется экран, когда пользователь наводит курсор на разные ссылки, но и сам курсор работает как индикатор выполнения, показывающий, насколько далеко находится пользователь. Курсор работает одинаково на всем сайте. Состояние ссылок меняется, и это работает не только для того, чтобы внести ясность для пользователя, но и для того, чтобы подчеркнуть индивидуальность веб-сайта.
9. The Good Burger
Эта компания по производству бургеров является прекрасным примером навигации по веб-сайту. Ресторану Good Burger (TGB) удалось создать что-то одновременно функциональное и индивидуальное.
Он отвечает всем требованиям: он интерактивен, прост в освоении, уникален и доставляет удовольствие — то есть, если вам вдруг захотелось съесть гамбургер.
На главной странице есть значок меню гамбургера, который включает верхнюю часть булочки, что само по себе потрясающе. Когда пользователи открывают расширяемое меню, их приветствуют 5 разных ссылок на самые важные страницы. Взаимодействие и визуальные эффекты, когда пользователи наводят курсор на различные параметры, делают весь процесс навигации интересным и запоминающимся.
Наш любимый аспект дизайна навигации в этом примере — страница «Меню». В нем перечислены все категории продуктов, предлагаемых TGB, но с изюминкой: горизонтальная прокрутка с иллюстрациями и взаимодействиями. Это гладко, легко и предлагает приятный сюрприз, когда пользователи ожидали сетку или обычный список с регулярной прокруткой.
Нам также нравится, что когда пользователи просматривают определенную страницу продукта, им также предлагается расширяющаяся панель навигации в левой части экрана.
Даже когда он не развернут, значок рассматриваемой категории имеет собственный индикатор выполнения, чтобы дать пользователям представление о том, какую часть меню они видели. Отличная идея!
Разработайте и протестируйте UX и взаимодействие ваших мобильных приложений. Это бесплатно. Неограниченное количество проектов!
10. С удовольствием!
Дровяной гриль Gusto! Это вполне пример навигации по сайту. Их веб-сайт яркий, красочный, дружелюбный и представляет собой все, что представляет сам ресторан. Он демонстрирует не только еду, но и людей, которые работают над ее созданием — это как бы полный обзор компании.
Их дизайн навигации по странице «Меню» весьма интересен. Он работает как пошаговое руководство по меню, где пользователи шаг за шагом строят свой заказ: красивые снимки еды в сочетании с прокруткой параллакса. Взаимодействия делают страницы динамичными, даже если они незаметны.
Он не только включает значок меню гамбургера в правом верхнем углу экрана, но также имеет нижний колонтитул со всеми теми же ссылками, которые мы находим в раскрывающемся меню, а также еще несколькими, такими как ссылки на социальные сети.
Завершение
Дизайн навигации является ключевым элементом любого веб-сайта. Несмотря на то, что это будет во многом зависеть от типа веб-сайта или количества страниц, которые должны быть на веб-сайте, есть четкое ощущение успешного дизайна навигации. Большинство пользователей не смогут точно определить, что делает дизайн навигации хорошим, но они смогут распознать это, когда испытают его.
Чтобы получить еще больше вдохновения, посетите нашу страницу с примерами прототипов — все они были созданы нашей командой дизайнеров! Лучшая часть? Вы можете загрузить их и использовать в качестве строительных блоков для своего прототипа. Потрясающие!
Сделать это нужно правильно. Да, сделать это правильно может быть довольно сложно, но, надеюсь, этот список вдохновит вас! И помните: дизайн навигации тесно связан с другими аспектами веб-сайта, такими как информационная архитектура или дизайн взаимодействия.
Спроектируйте и протестируйте UX и взаимодействие ваших веб-сайтов.
Это бесплатно. Неограниченное количество проектов!Ребека Коста
Штатный SEO-менеджер, энтузиаст юзабилити и покровитель всех недосыпающих дизайнеров
Связанный контент
10 блестящих инновационных дизайнов меню веб-сайта
Когда вы создаете веб-сайт, невозможно переоценить важность дизайна навигации. Проще говоря, успех вашего сайта будет зависеть от того, насколько он удобен и насколько легко посетители находят его для перехода от одного раздела к другому.
Обычные горизонтальные меню и небольшие раскрывающиеся списки прекрасно подходят для многих сайтов. Но разработка навигации может стать настоящей проблемой для веб-сайтов с огромным количеством контента или множеством различных категорий, к которым необходимо легко получить доступ.
С этой проблемой сталкиваются все виды сайтов, от веб-приложений до газет и интернет-магазинов. Хотя есть много примеров сайтов, на которых неудобно и сложно ориентироваться, есть и очень тщательно продуманные примеры.
Мы выделили ряд блестяще разработанных меню, которые отлично справляются с задачей, позволяющей пользователям перемещаться, а также входить и выходить из системы простым и удобным способом. Мы надеемся, что вы найдете эти примеры полезным источником вдохновения для вашего следующего проекта дизайна сайта.
Настоящая забота и внимание были потрачены на разработку навигации для каждого из них таким образом, чтобы она была доступной и интуитивно понятной. Несмотря на то, что существует так много разных подкатегорий, они никогда не находятся более чем в двух кликах от любого места на сайте.
Каждой категории, такой как «Культура», также присваивается свой цвет, и все, что в нее входит, например, «Фильмы» и «Музыка», окрашены соответствующим образом, что помогает красиво связать категории вместе.
02. Medium (открывается в новой вкладке)
При наведении курсора на логотип открывается аккуратно спрятанное менюMedium — это новая издательская платформа, созданная Эваном Уильямсом, который также создал Blogger и Twitter. Каждая страница сосредоточена на содержании, и он невероятно усердно работал над устранением всех отвлекающих факторов. Даже меню спрятано за логотипом в левом верхнем углу. Наведение курсора на логотип открывает аккуратно спрятанное меню.
Еще одна умная особенность меню Medium раскрывается, когда окно браузера маленькое. Вместо того, чтобы накладывать логотип (со скрытым за ним меню) на текст, он просто исчезает и снова появляется только при прокрутке вверх страницы.
03. Svbtle (открывается в новой вкладке)
Svbtle объединяет красиво оформленную CMS для блога с подборкой лучших сообщений. Он умело объединяет красиво созданную CMS для блогов с тщательно подобранной подборкой лучших постов. Кертис славится созданием красивых пользовательских интерфейсов и своим острым, даже навязчивым вниманием к деталям.
Иногда улучшения, которые он делает, настолько незаметны, что вы можете их не заметить, но когда они всплывают, они определенно улучшают взаимодействие с пользователем.
Меню Svbtle является прекрасным примером этого: когда вы наводите курсор на раскрывающийся значок, меню расширяется, как вы и ожидали. Однако, когда вы перемещаете курсор за пределы меню, он остается на месте в течение секунды или двух — достаточно долго, чтобы переместить курсор назад, если вы случайно переместили его слишком далеко. Хотя это кажется простым, тот факт, что он думал о программировании, показывает, сколько страсти и внимания к деталям он вложил в свою работу.
04. Твиттер (открывается в новой вкладке)
После выбора меню Твиттера остается до закрытия Твиттер решает вышеупомянутую проблему, оставляя раскрывающееся меню активным. Недостатком здесь является то, что вам нужно щелкнуть значок настроек, чтобы активировать меню — если оно активировалось и оставалось открытым, просто наведя на него курсор, оно было бы неудобно активироваться все время — но после того, как оно выбрано, оно остается до закрытия.
Умело отдельные действия также разделены, например, «Справка» и «Сочетания клавиш». Сгруппировав связанные разделы, вам будет проще найти то, что вы ищете.
05. B&O Play (открывается в новой вкладке)
Меню в разделе «Продукты» содержит много дополнительных пробелов с простой иллюстрацией каждого продукта. ряд продуктов, которые вы, возможно, не сможете узнать только по их названию, но, возможно, узнаете по тому, как они выглядят. Например, A8 — это док-станция с динамиками в очень своеобразном стиле, которая полностью отличается от A9, но их легко спутать из-за их названий.Чтобы помочь в борьбе с этим и сделать их навигацию более интуитивной и удобной для браузеров, в меню «Продукты» добавлено много дополнительных пробелов с простой иллюстрацией каждого продукта. Хотя этот подход подходит не для каждого сайта (особенно с широким ассортиментом товаров), в случае с B&O Play это отличная идея, реализованная безукоризненно.
06. Apple (открывается в новой вкладке)
Веб-сайт Apple так же красиво оформлен, как и их продукты Apple — мировой лидер в области дизайна, и неудивительно, что ее веб-сайт так же красиво оформлен, как и их продукты. Основная навигация, такая как B&O Play, показывает каждый продукт, а также забавную скользящую анимацию для каждого при нажатии на новый раздел (для тех из нас, у кого современные браузеры).
Отображение каждого продукта в навигации с использованием высокодетализированных изображений высокого качества означает, что его легко перемещать, даже не задумываясь.
07. Vimeo (открывается в новой вкладке)
Vimeo включает большое количество описаний в свою навигациюСайт обмена видео Vimeo решил включить в свою навигацию немного больше описаний. Наведение курсора на «Создать» или «Смотреть» приводит к ряду других опций, таких как «Видеошкола». Поскольку многие люди не знакомы с тем, что такое видеошкола Vimeo, они добавили небольшой заголовок «Узнайте, как делать видео лучше», который быстро и кратко объясняет, что произойдет, прежде чем вы нажмете.
08. Google Plus (открывается в новой вкладке)
Социальная сеть Google может похвастаться красиво оформленной навигацией, которая располагается вертикально в левой части браузера. браузер. Вертикальное меню помогает освободить место для самого важного заголовка, сохраняя при этом легкий доступ к каждому разделу.Каждый из значков также можно настроить, перетащив их в нужное положение, поэтому, если вы больше любите игры, чем фотографии, вы можете изменить навигацию по своему вкусу.
09. Threadless (открывается в новой вкладке)
Крупные и смелые изображения оживляют навигацию Threadless. навигация.Вся концепция Threadless довольно специфична и имеет несколько довольно четких групп пользователей. Есть те, кто хочет представить свои работы, другие могут быть там, чтобы проголосовать за свои любимые проекты, в то время как другие хотят быть частью сообщества, просматривать предстоящие работы и общаться с другими, в то время как другие могут просто делать покупки. .
Они тщательно рассмотрели каждый из этих вариантов использования и сгруппировали каждый раздел в «Создать», «Выбрать», «Играть» и «Магазин». Затем, наведя курсор на эти параметры, вы увидите красиво оформленные варианты под каждым из них.
10. Squarespace (открывается в новой вкладке)
Вертикальная навигация Squarespace не мешает его красивым изображениямSquarespace — это платформа хостинга и CMS, которая помогает людям удобно запускать свои собственные сайты. На сайте используются большие ведущие изображения для заголовка, но у них так много разделов на сайте, что включение их всех в раскрывающуюся навигацию может скрыть изображения и сделать их загроможденными.
Их решение состоит в том, чтобы включить небольшую опцию «Меню» в правом верхнем углу. Нажатие на кнопку приводит к выдвижению панели, перемещая вместе с ней весь сайт, открывая вертикальную навигацию. Прелесть этого метода в том, что он не мешает изображению, и у них есть масса места для включения даже самых обширных вариантов навигации.
Words : Алекс Блэк (открывается в новой вкладке)
Алекс пишет для PrintExpress.co.uk. В свободное время он любит изучать веб-дизайн и полиграфический дизайн, а также учится программировать. Вы можете следить за ним на @iamalexblack (откроется в новой вкладке).
Понравилось? Прочтите это!
- Как создать приложение (открывается в новой вкладке)
- Выбор блестящего руководства по WordPress (открывается в новой вкладке)
- Создайте идеальную доску настроения (открывается в новой вкладке) с помощью этих профессиональных советов
Есть ли такие примеры тщательно продуманных, красиво оформленных и элегантных вариантов меню, которые вы нашли, и которые должны быть включены в наш обзор? Мы будем рады услышать, что вы нашли в комментариях.
Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ
Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро
У вас уже есть учетная запись? Войдите здесь
*Читайте 5 бесплатных статей в месяц без подписки
Присоединяйтесь сейчас, чтобы получить неограниченный доступ
Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро
У вас уже есть аккаунт? Войдите здесь
Подпишитесь ниже, чтобы получать последние новости от Creative Bloq, а также эксклюзивные специальные предложения прямо на ваш почтовый ящик!
Свяжитесь со мной, чтобы сообщить о новостях и предложениях от других брендов Future.