Дизайн меню сайта: как сделать навигацию удобной
Дизайн развивается с молниеносной скоростью, и если раньше меню всегда было стандартизировано: статичная полоса с текстом, при нажатии на который, происходит переход на определенные страницы, то теперь есть огромное разнообразие меню и это круто! Но, иногда, желание выделиться и сделать меню креативным, выходит за рамки первостепенной задачи — удобство навигации для пользователя.
- →
- →
Оглавление
- Зачем нужно меню на сайте и почему важно продумать его дизайн
- Требования к меню
- Горизонтальное меню сайта
- Вертикальные меню
- Раскрывающиеся меню
- Использование сплит-экранов для навигации
- Необычные варианты дизайна меню сайта
Зачем нужно меню на сайте и почему важно продумать его дизайн
Меню сайта — это элемент дизайна, предназначенный для навигации. То есть, он должен помогать пользователю перемещаться по сайту, а не путать его.
Рассмотрим основные факторы, на что влияет грамотная разработка меню сайта:
Навигация
Создавая меню и проектируя вложенность страниц, вы показываете пользователю структуру сайта, чтобы он понимал иерархию. Для этого необходимо продумывать пункты: основные / второстепенные / названия разделов и т. д.
Горизонтальное меню с выпадающим списком, где классическое меню — основное, а выпадающий список — второстепенный по приоритетности.
Благодаря этому, пользователь не заблудится и сможет в пару кликов перейти на интересующий раздел сайта.
Конверсия
Комфортный поиск разделов и важных страниц повышает конверсию сайта. Можно создать логику и вести пользователя так, как требуется компании, отделяя важные разделы сайта от второстепенных. Если пользователь может свободно и комфортно перемещаться, находить нужную информацию, он с меньшей вероятностью покинет сайт.
Разделение навигации на конверсионные и информационные пункты меню сайта Solok Cosmetics, проект WebValley Studio
SEO-оптимизация
Навигация важна не только для пользователей, но и для поисковых роботов. Сканируя сайт, робот анализирует его структуру. Меню помогает ему понять вложенность страниц и их вес. Поэтому важно, разрабатывая меню, оптимизировать его под продвижение.
Изменение меню на сайте СТЛогистик для SEO-продвижения, проект WebValley Studio
Запишись на PRO Web и получи золотой билет в крупные агентства.
Стань профессиональным веб-дизайнером за 5 месяцев. Обучайся напрямую у практиков — команды агентства, пройди мощнейшую прокачку от арт-директора и начни создавать сайты премиум-уровня.
Требования к меню
Задача маркетолога, UX/UI-дизайнера упаковать и вывести новый продукт на рынок. В условиях высокой конкуренции необходимо выделить бренд среди сотни однотипных компаний, в чем помогает уникальный дизайн.
Исследование, проведенное компанией KoMarketing, показало, что 50% пользователей, опрошенных в ходе интервью, используют навигационное меню при знакомстве с сайтом, и 37% покидают его в первые минуты из-за неудобной навигации. Поэтому креатив — это круто, но в основе разработки меню сайта должно лежать удобство.
Структура
Важно не путать со структурой сайта, это совершенно разные вещи. Общая структура сайта показывает взаимосвязь блоков и страниц: откуда можно перейти и на какую страницу. Структура меню — отражает навигацию по значимым страницам (редко по блокам, например, на лендинге).
То есть, в основном, навигация строится на транзитных страницах, например, в меню может быть заложена страница «Портфолио» со всеми проектами, а не конкретно «Проект 1», «Проект 2» и т. д. В редких случаях, когда сайт небольшой, в меню может быть отражена полная схема сайта.
Важно: не пытайтесь впихнуть в меню все страницы и разделы. Это перегружает и утяжеляет его. И вместо того, чтобы быстро найти нужный раздел на сайте, пользователь вынужден долго искать нужный раздел в меню. Основная цель этого элемента дизайна — навигация. А если там борщ из сотни разделов, то теряется самая суть меню, оно становится бесполезным.
В этой работе важно задать цели, чего вы хотите добиться: повышения конверсии или представления информации. Исходя из цели, определяйте последовательность пунктов, название и иерархию.
Меню WebValley Studio разделенное на логические разделы для разных целей пользователей сайта.
Названия пунктов
Основная задача названий пунктов — простота понимания. Здесь не нужно выводить новые тренды, пытаться выделиться на фоне конкурентов и создавать целые лозунги. Если пользователю будет не ясно, куда ведет данный раздел, он просто потеряется и не найдёт нужную страницу.
Если пункт меню не удается описать в рамках одного слова, не страшно, можно сделать емкое предложение из 2−3-х слов. Но учитывайте визуальную составляющую: дурной тон в дизайне, если название пункта будет распадаться на 2 или 3 строки:
Плохой пример: из-за длинных названий пунктов, меню просто распалось по частям.
Названия должны быть лаконичными, в идеале состоять из одного слова и быть максимально понятным для пользователя: «Что произойдет, когда я нажму на …». Это не место для фантазии.
Функциональность
Помимо переходов на страницы сайта, в меню нужно предусмотреть функциональность и микроанимацию, которая поможет пользователю при взаимодействии с сайтом. Важно: не забывайте делать все элементы кликабельными или отразите, что сейчас пункт неактивен, например, это можно сделать менее насыщенным цветом:
Социальная сеть Behance на сайте WebValley Studio менее выражена по насыщенности оттенка, таким образом, считывается информация, что данная иконка сейчас неактивна.
Используйте подчёркивание или другие способы выделения, чтобы показать пользователям, где они сейчас находятся, или hover-эффект, чтобы отразить на какой элемент они навели курсором мыши.
Пункт «О студии» на сайте WebValley подчеркивается при наведении.
Активный пункт меню отображает пользователю, где сейчас он находится на сайте СТЛогистик.
При наведении курсора, активный пункт закрашивается в фирменный цвет компании X-merch и отражает больше информации, проект WebValley Studio
Дополнительно в меню могут быть встроены следующие функции :
- Звонок при нажатии на номер телефона или иконку;
- Открытие pop-up окон с формой;
- Открытие почты для отправки письма при нажатии на иконку или адрес электронной почты;
- Открытие меню второго уровня.
Логотип
Заложите в меню логотип компании, при нажатии на который, пользователя будет перебрасывать на Главную страницу. Пользователи уже привыкли к такому сценарию, и испытывают неудобства, когда логотип в шапке некликабелен.
Благодаря этому способу, вам не придётся разрабатывать отдельно пункт «Главная», что экономит место. Единственное, если возраст вашей аудитории 45−50+ стоит предусмотреть это решение.
Количество пунктов
Если вы разрабатываете классическое, открытое меню, не пытайтесь впихнуть туда множество разделов, это будет некомфортно, и смотреться перегружено. В таких случаях используйте меню-бургер. В горизонтальном меню оптимальное количество пунктов 5−7.
Приоритетность
Расположите объекты в меню на основе иерархии. Помните, что пользователи подсознательно будут считывать логику и важность объектов на переднем плане или большего размера.
Пример реализованной навигации раздела «Каталог» на сайте Технофорум, проект WebValley Studio. Названия разделов каталога расположены выше подразделов и выделены жирным начертанием.
Размер
Меню должно быть максимально крупным для любого экрана, будь то монитор или телефон пользователя. Текст будет читабельным, а кликабельность элементов удобной.
Иконки
Использовать графические элементы в меню допустимо, но не стоит слишком увлекаться. Вспомним правило — пункты должны быть понятны, что в случае навешивания множества иконок может быть сложным.
Концепт в качестве примера, как делать не стоит: иконки отвлекают внимание и мешают восприятию информации
Горизонтальное меню сайта
Классическое горизонтальное меню — наиболее часто используемый способ навигации. Пользователи привыкли к этому визуалу, поэтому такой вариант подходит для большинства сайтов.
Статичное горизонтальное меню
Недостаток подобного решения состоит в ограниченном количестве пунктов: в открытом доступе можно сделать только 5−7 категорий, в большем количестве меню будет смотреться перегружено и некомфортно в использовании.
Если в меню есть выпадающие списки — обязательно отразите это визуально. Не используйте множество выпадающих списков: если требуется сложная навигация, делите категории на уровни или используйте другое меню.
Плохой пример горизонтального меню с выпадающими списками 2-го, 3-го и даже 4-го уровня. Огромный каскад из списков и полный провал по юзабилити.
Пример хорошего меню с выпадающим списком, проект WebValley Studio. Выпадашка простая и понятная, мгновенно считывается, не усложняет навигацию.
Фиксированное горизонтальное меню
От классического статичного отличается только тем, что оно скролится и при прокрутке страницы. Используйте фиксированное меню, если страница сайта очень длинная, чтобы пользователю не пришлось крутить колесиком мышки, чтобы опять добраться в начало и перейти к другому разделу, это бесит не правда ли?)
Либо сделайте прокрутку страницы к начальной точке одним нажатием кнопки ↑.
Горизонтальное меню в виде вкладок (табов)
Вариант горизонтального меню, при котором клик на определенный пункт открывает соответствующий контент на той же самой странице, на которой сейчас находится пользователь. То есть перехода на другую страницу со сменой URL — нет.
Меню в виде вкладок можно использовать как в качестве основного, так и для отдельных блоков, чтобы расширить возможности функционала и удобно подать информацию.
Концепт основного меню с вкладками
Прототип проекта Korean Simple, блок стоимости обучения, переключение между тарифами реализовано вкладками, проект WebValley Studio
Горизонтальное меню с иконками
В горизонтальное меню можно добавить пиктограммы и разделители. Иконки быстро считываются пользователями, если хорошо подобраны по смыслу. Только помните, что нельзя переборщить: большое количество элементов в горизонтальном меню сложно для восприятия.
Концепт прототипа меню личного кабинета с иконками
Двойное горизонтальное меню
Такая разработка довольно редкая, но также пользуется спросом для:
- Разработки основного меню и для личного кабинета;
- Разработки дополнительного меню для удобства навигации.
Использование двойного горизонтального меню на сайте Solok Cosmetics, проект WebValley Studio. Основное меню ведёт на разделы каталога косметики, а в личном кабинете — появляется дополнительное, для навигации внутри кабинета.
Хлебные крошки
Навигационные цепочки используются на многостраничный сайтах, порталах, в интернет-магазинах для дополнительной комфортной навигации. Хлебные крошки выглядят как строчка со ссылками на все предыдущие разделы, которые привели пользователя к текущей странице.
Дизайн сайта с хлебными крошками Granite&Marble Monuments, проект WebValley Studio
Вертикальные меню
Сегодня большинство мониторов изготавливаются с горизонтальной ориентацией, за счёт чего на экране появляется свободное место для вертикального меню. Чаще всего его располагают слева, согласно F-паттерну: пользователям удобно читать пункты слева направо, сверху вниз, как в книге.
В отличие от горизонтального меню, вертикальное реже используется в виде вкладок:
Использование вертикального меню в разделе «О компании» для быстрого перемещения между страницами
Вертикальное меню с группировкой ссылок
Данный способ используется довольно часто в объемных структурах сайта и очень актуален в интернет-магазинах в качестве сортировки и фильтрации:
Вертикальное меню с группировкой ссылок, использованное для фильтрации товаров каталога Granite&Marble Monuments, проект WebValley Studio
Вертикальное меню с иконками
Использование графики в вертикальном меню также пользуется спросом. Преимущество такого решения в том, что меню можно свернуть так, чтобы оно состояло только из иконок, сводя к минимуму занимаемое пространство.
Прототип вертикального меню личного кабинета с использованием иконок сайта питомника Калужский Тракт, проект WebValley Studio
Раскрытое и свёрнутое вертикальное меню с иконками на сайте сервиса Топвизор
Меню с навигацией точками
Максимально аккуратное меню, практически не занимающее места. Используется для комфортной навигации на конкретной странице. Особенно актуально, когда страница большая по количеству блоков, и пользователю придется много скролить, чтобы вернуться к какой-то конкретной информации.
Навигационное меню с точками на сайте Revive System, проект WebValley Studio
Вертикальное меню в сочетании с горизонтальным
Использование сразу двух разноориентированных меню на сайтах — нечастая история, но в интерфейсах сервисов и приложений, наоборот, пользуется популярностью. Такая раскладка помогает сделать основное и второстепенное меню, разделяя их по функционалу.
Использование двух меню: вертикального и горизонтального в CRM Битрикс24 WebValley Studio
Использование двух меню — вертикального и горизонтального на сайте логистической компании.
Готовы создать сайт прямо сейчас. А вы?
Раскрывающиеся меню
Компактное на первый взгляд меню, которое раскрывается по клику или наведению. С точки зрения функциональности, раскрывающееся меню хорошо работает на крупных корпоративных сайтах, где нужно отразить большой объём услуг, в интернет-магазинах с огромным ассортиментом продукции.
Многоуровневое мега-меню
Мега-меню работает по следующему принципу: в основной раздел (пункт меню) вложено обычное выпадающее меню второго уровня, с подразделами и под-подразделами. В нише логистики или автозапчастей — просто мастхев.
Использование многоуровневого мега-меню в проекте STLogistic, проект WebValley Studio.
Бургер
Меню, которое вызывается при нажатии на иконку, как правило состоящую из 3х горизонтальных линий. Пользователи давно привыкли видеть его на мобильных устройствах, но теперь бургер часто встречается и в десктопе. В таком решении есть свои плюсы и минусы: с одной стороны, бургер даёт больше возможностей и меньше ограничений в плане дизайна, с другой — не каждой целевой аудитории будет понятно, что это и как им пользоваться.
Если хотите использовать меню-бургер на десктопах, мыслите логически: всегда задавайте себе вопрос — а чем оно поможет пользователю и можно ли ограничиться стандартным горизонтальным? Если ответ — да, используйте более привычную реализацию навигации для пользователей.
Меню-бургер на сайте Outerra: слева — бургер в закрытом виде, справа — в раскрытом, проект WebValley Studio
Меню-бургер с раскрывающимся списком на сайте ИМБА, слева — бургер в закрытом виде, справа — в раскрытом, проект WebValley Studio.
Использование сплит-экранов для навигации
Тренд, который пришел к нам с запада и смотрится очень эстетично. В переводе с английского, «Split Screen» — это разделение экранов, то есть, это конфигурация, когда дизайнер намерено делит экран на 2 и более частей.
Данный метод помогает в удобстве навигации, повышает интерес к изучению контента и подталкивает пользователей понажимать на кнопки.
Концепции вариантов реализации навигации с помощью сплит-экранов
Необычные варианты дизайна меню сайта
Мы подобрали интересные и нестандартные идеи для навигационных меню и элементов управления. Смотрите и вдохновляйтесь.
Навигационный слайдер сортов чая Andtea
Меню, основанное на 3-х продуктах dr. dabber, каждый имеет отдельный лединг.
Меню, выдержанное в стилистике проекта
Выпадающий список с использованием графики
Минималистичный боковой бургер с дополнительно важной навигацией на обложке
Еще один вариант открытого бургера, с крупной типографикой и минималистичной анимацией
Меню, сопровождающееся фотографиями, для добавления визуализации
Обложка сайта, которая представляет собой вариант меню в формате сплит-экрана. При наведении на разные части, можно попасть на соответствующий раздел сайта.
Меню, каждый пункт которого сопровождается графикой
После того, как вы познакомились с такими креативными референсами, наверняка вам захочется повторить эти идеи на ваших сайтах. Но, проектируя меню, помните: в приоритете удобство пользователя и быстрая навигация. Каким бы прикольным ни было меню, если пользователь испытывает трудности с навигацией, то ценность этого элемента дизайна — нулевая.
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!
Подпишись, чтобы быть в курсе!
Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Как сделать навигацию
на сайте удобной
Практические советы по созданию понятного сайта
Рассказываем, как помочь пользователю легко ориентироваться с помощью навигации по сайту. Статья будет полезна дизайнерам, предпринимателям и маркетологам, которые хотят создать удобный сайт самостоятельно. Поможет в этом продуманная навигация по сайту.
Мы рассмотрим 13 способов улучшения навигации на сайте с помощью простых инструментов за минимальное количество времени. В Тильде есть много готовых блоков с элементами навигации, из которых можно выбрать наиболее подходящий для вашего проекта вариант.
Сделать меню навигации для сайта лаконичным
Меню — один из главных инструментов навигации на сайте. Его удобство будет критическим.
При создании меню старайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если пунктов меню все-таки получается много, как вариант, можно использовать меню «гамбургер».
fyrclothes.tilda.ws/story01
Поставить ссылку на главную страницу на логотип
Пункт «Главная» в меню — это пережитки навигации сайта 90-х. Вместо этого сделайте кликабельный логотип.
Сейчас уже сложилась устойчивая модель: при клике на логотип происходит переход в начало главной страницы. Поэтому смело удаляйте «Главная» из меню и не забывайте добавить ссылку для логотипа.
Кстати, чтобы на Тильде сделать ссылку на главную страницу, достаточно поставить просто косую черту (/) вместо полного адреса в настройках блока.
Слеш ( / ) в поле «ссылка» будет вести на первый экран главной страницы сайта.
Сделать меню на одностраничном сайте
Меню также может быть навигатором внутри одной страницы, когда вы делаете лендинг или лонгрид.
Если информации много, добавьте меню с ссылками на разделы страницы — это упростит навигацию.
Чтобы сделать на Тильде меню с ссылками на разные блоки внутри страницы, в настройках контента меню пропишите в ссылках номера этих блоков (номер каждого блока указан в его настройках), либо используйте якорные ссылки.
Зафиксировать меню
Чтобы посетитель в любой момент мог найти нужный раздел, можно сделать фиксированное меню — оно всегда будет оставаться в поле зрения при скролле. Такая навигация для сайта будет хорошим решением.
Для того, чтобы сделать фиксированное меню в настройках блока в разделе «Основные настройки» выберите вариант позиционирования меню «Фиксация при скролле».
Выделить активный пункт меню для постраничной навигации
Меню может показывать в каком разделе сайта находится пользователь, выделяя пункт, который относится к данному разделу.
В настройках Тильды можно установить дополнительные параметры отображения активного пункта меню. Есть несколько вариантов выделения активного пункта меню: можно изменить его насыщенность, непрозрачность и цвет. Кроме того, активный пункт меню можно подчеркнуть или зачеркнуть.
Такие же настройки можно применить и для пункта меню, на который наведена мышь. Не стоит переусердствовать, пункт меню достаточно выделить одним или двумя параметрами.
Добавить индикаторы (точки) для определения местоположения
Индикаторы в виде точек не отвлекают внимание от контента, но подсказывают в какой части страницы находится посетитель.
На Тильде у таких навигаторов есть также всплывающая подсказка с названиями разделов для удобной навигации по сайту . Блок находится в категории «Меню» под номером ME604.
Показать процесс загрузки и прокрутки страницы
Анимация загрузки страницы подскажет пользователю, что процесс идет, и контент загружается.
На Тильде блок индикатора находится в категории «Другое» под номером Т228. Чтобы индикатор работал, разместите блок в самом верху страницы.
В настройках блока можно задать цвет индикатора загрузки. Лучше использовать цвет, который будет выделяться на фоне контента и не сольется с цветом меню или обложки.
Индикатор прокрутки страницы — очень наглядный пример навигации. Он подсказывает, в каком месте страницы находится пользователь, и загружается по мере прокрутки страницы вниз. Использовать индикатор прокрутки страницы есть смысл, когда длина страницы превышает 3−4 экрана.
Чтобы добавить индикатор прокрутки на Тильде, используйте блок T333 из категории «Другое». В настройках блока можно задать цвет и толщину индикатора.
Выделить кнопку с более важным действием
Из двух соседних кнопок более важная должна визуально выделяться.
Обычно первая кнопка целевого действия страницы, например — «Записаться на мероприятие», «Купить курс», «Посетить первый урок бесплатно». Вторая кнопка менее значительна, в большинстве случаев это ссылка на дополнительную информацию: «Подробнее», «О нас», «Как это работает».
Самое простое — использовать яркий цвет для фона кнопки. Она должна быть контрастной по отношению к кнопке меньшего значения. Для второй кнопки достаточно использовать цветной бордюр без заливки, либо фон нейтрального цвета.
Помимо настроек стиля кнопок в Тильде есть дополнительные настройки, где можно отрегулировать стиль кнопки при наведении на нее мышью. В настройках можно указать цвет кнопки, бордюра, поменять насыщенность, цвет и шрифт текста, а также добавить тень и отрегулировать скорость анимации при наведении.
Скрыть часть контента
Много однотипных элементов просматривать утомительно. Используйте кнопку, которая скроет часть элементов и покажет их только по клику.
Хороший прием — написать на кнопке какое именно количество элементов, она скрывает.
Скрыть часть контента можно несколькими способами:
Кнопка «Показать еще». Она находится в разделе «Форма и кнопка» под номером BF703.
Текст в раскрывающихся блоках. Отличный вариант для длинных списков с услугами или ответами на вопросы. Его можно найти в разделе «Текстовый блок» под номером TX16.
Вкладки с раскрывающимся контентом. Находятся в разделе «Меню» под номерами ME602 и ME603. Эти блоки позволяют создавать на странице несколько вкладок и показывать разный контент по клику на соотвествующую вкладку в рамках одной страницы.
Текст в раскрывающихся блоках
Вкладки с раскрывающимся контентом
Добавить кнопку навигации «Наверх»
Кнопка «Наверх» помогает пользователю из любого места страницы быстро попасть в ее начало.
Она особенно полезна для удобной навигации на страницах со статьями и большим количеством контента. С ее помощью можно избежать долгой и нудной прокрутки вверх вручную или при помощи скроллбара.
В Тильде блок с кнопкой «Наверх» находится в разделе «Форма и кнопка» под номером BF702.
Проследить, чтобы в конце страницы не было «тупика»
Не бросайте пользователя, который добрался до конца страницы. Как минимум, дайте возможность быстро вернуться к началу, либо перейти на главную или на следующую страницу.
Если вы сделали лендинг — самое время повторить призыв к действию. Если на странице находится статья, в конце можно поставить ссылки на другие статьи похожей тематики. В Тильде для этой цели можно использовать блоки из разделов «Плитка и ссылка» либо «Список страниц».
piece-of-cake.ru/absorption
britishsummer.tilda.ws/page2203.html
togdazine.ru/project/airzero
Задать понятный URL адрес страницы
URL (Uniform Resource Locator) — это единообразный адрес, указывающий путь к интернет ресурсу. Иными словами, это ссылка, которая отображается в адресной строке браузера.
Названия разделов помогают пользователю ориентироваться на сайте по адресу и, к тому же, положительно влияют на релевантность страницы.
Для понятных упорядоченных URL адресов существует термин ЧПУ (человекопонятный URL). ЧПУ состоит из понятных пользователю слов, а не из системного адреса (в Тильде системный адрес страницы будет выглядеть, например, так: /page4652188.html).
Пример, как устроена структура адреса:
https://www. mysite.com/shop/men/shirts
Первая часть (https://) показывает метод, который используется для получения доступа к интернет ресурсу. Протокол HTTP используется чаще всего.
Вторая часть адреса — это имя вашего домена, адрес, по которому сайт можно найти в сети. Если сайт многостраничный, www.mysite.com будет адресом главной страницы, все остальные разделы и подразделы по порядку прибавляются к адресу через косую черту.
Если это одностраничный лендинг с разделами, лучше использовать якорные ссылки с понятными названиями, например #about или #contacts, так как они тоже отображаются в адресной строке.
Адрес страницы в Тильде можно поменять в разделе «Настройки страницы». Если вы хотите использовать несколько слов в адресе страницы, прописывайте их через дефис «-» либо через символ подчеркивания «_». Например, /about-us или /our_works.
«Хлебные крошки» (навигационная цепочка) — это навигационный элемент, который помогает пользователю отслеживать свой путь перемещения по сайту.
Обычно они располагаются в начале страницы и показывают путь от главной страницы к разделам сайта. Все пункты навигационной цепочки являются ссылками из предыдущего раздела.
С помощью хлебных крошек, попав в конец цепочки, можно в один клик вернуться к разделам, ближним к главной странице. Если посетитель зашел на сайт не через главную страницу, увидев хлебные крошки, он может быстро разобраться в структуре сайта.
Хлебные крошки выглядят таким образом:
Главная страница > Раздел сайта > Подраздел сайта > Страница
Хлебные крошки чаще всего используются в сайтах со сложной структурой, большим количеством страниц и контента. Например, их часто используют в онлайн-магазинах, где много категорий товаров.
www.adidas.ru/muzhchiny-botinki
Для того, чтобы сделать путь из хлебных крошек на Тильде, достаточно добавить на страницу блок ME605 «Хлебные крошки» из раздела «Меню». Разместить его можно, например, под обложкой. В контенте блока пропишите названия пунктов и проставьте ссылки на соответствующие страницы. Блок можно копировать из одной страницы и вставлять в другую, добавляя по одному новому пункту навигационной цепочки.
Подведем итоги
Уделите внимание структуре и дизайну меню сайта. Не загромождайте его большим количеством элементов и выделяйте активные пункты меню.
Акцентируйте внимание пользователя на значимых кнопках. Сделайте их ярче и задайте дополнительные настройки для анимации кнопки при наведении мышью.
Используйте индикатор загрузки страницы, который подскажет пользователю что контент в процессе загрузки и вот-вот появится.
Используйте индикатор прокрутки на длинных страницах или блок с точками, чтоб помочь пользователю понять, в каком месте страницы он находится.
Кнопка «Наверх» поможет пользователю быстро вернуться в начало страницы. Используйте ее на страницах с большим количеством контента для удобной навигации на сайте.
Избегайте «тупика» в конце страницы. Предложите пользователю просмотреть похожие материалы по теме страницы либо установите ссылки, которые ведут на главную, следующую или предыдущую страницы.
Пропишите понятные адреса страниц сайта, на лендинге проставьте якорные ссылки с названиями, соответствующими разделу. Это еще один способ создания навигации на сайте.
Используйте хлебные крошки,если у вашего сайта сложная структура и большое количество разделов с подразделами, чтоб помочь пользователю ориентироваться.
Текст: Ира Смирнова и Юлия Засс
Иллюстрации, дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Шаблоны меню — простой способ оформить меню, если вы собираетесь открыть кафе или ресторан. Каждый шаблон включает в себя несколько вариантов блюд, а также множество напитков. У каждого шаблона есть множество различных стилей, поэтому вы без труда сможете создать меню под стиль своего ресторана.
Мы используем файлы cookies, чтобы улучшить Ваши впечатления от использования сайта. Нажимая на кнопку ‘Принять’, вы даете нам разрешение на их использование.
- пн-пт 09.00-19.00
- +7 (812) 983 25 30
- info@yummies.ru
Что делать, если у вас нет навыков создания дизайна меню, а на профессионального дизайнера нет денег?
Воспользуйтесь сервисами с готовыми шаблонами меню. Это прекрасное решение для начинающих ресторанов, кофеен и суши-баров. Они дают возможность почти бесплатно выбрать один из тысяч шаблонов и отредактировать его в виртуальном конструкторе. В ряде случаев вы даже можете скачать понравившийся шаблон в формате PSD и отредактировать его потом в фотошопе.
Мы сделали подборку из шести незаменимых ресурсов, используя которые, можно найти красивые шаблоны меню под любые задачи.
Как выбрать подходящий шаблон меню для ресторана?
Перед выбором шаблона меню желательно иметь под рукой утвержденный список позиций — это поможет сформировать примерное представление о распределении материала по полосам и их количестве. Затем вам необходимо решить, будет ли шаблон меню содержать изображения блюд или же это будет только текст. Фотографии помогут лучше продать блюда, но если их нет, вы можете без труда выделить особенные блюда и в текстовом меню. Для этого нужно заранее сформулировать, на каких блюдах сделать акцент. Также не будет лишним держать наготове логотип или еще лучше брендбук, чтобы произвести настройку выбранного шаблона в соответствии со стилем ресторана.
1. iMenuPro
iMenuPro — это специализированный онлайн-сервис по созданию меню, который позволяет ресторанам в короткие сроки оформлять и запускать в печать меню, не имея каких-либо профессиональных навыков. На сайте можно найти сотни шаблонов меню, удовлетворяющих потребности самых разных заведений. Управление с помощью drag and drop редактора происходит прямо в бразуере. Редактор очень прост в использовании и позволяет настраивать шаблон полностью на свое усмотрение — менять шрифты, загружать фотографии и логотип ресторана, добавлять пункты меню.
Преимущества использования iMenuPro:
- Структурирование всех блюд вашего меню в одной базе, перемещаться между которыми можно в несколько кликов
- Системе доверяют более 25 000 ресторанов
- Возможность привлечь внимание к спецпредложениям и высокомаржинальным позициям с помощью выделения
- Создание тейблтентов из материалов меню для продвижения спецпредложений на столиках
Цена: неограниченный доступ за $15/мес
Адрес сайта: https://imenupro.com/
2. Canva
Canva — комплексная дизайн-платформа, предоставляющая шаблоны на все случаи жизни: от меню ресторана до постов в социальных сетях. Для создания меню от вас потребуется лишь выбрать подходящий шаблон, загрузить несколько фотографий и написать небольшой текст. Также Canva имеет приложения для телефонов и планшетов, которые позволят вносить правки в меню, находясь вдали от компьютера.
Преимущества использования Canva:
- 100% бесплатно
- свыше 1500 шаблонов меню и 130 встроенных шрифтов
- 5-этапный процесс получения готового к печати макета с нуля
- Доступ к миллиону стоковых фотографий
Цена: Бесплатно (кроме премиум-фотографий — $1/шт)
Адрес сайта: https://www.canva.com/
3. Adobe Spark
Adobe Spark — это пакет программного обеспечения, включающий веб-версию и мобильное приложение, созданных компанией Adobe. Программа призвана сделать еще проще и удобнее создание бесплатного привлекательного контента. Среди приложений, входящих в пакет также есть бесплатный конструктор меню, который позволяет создать уникальный дизайн меню в считанные минуты без каких-либо особых навыков.
Преимущества использования Adobe Spark:
- Более 1 миллиона шаблонов дизайна меню
- Создание готового к печати макета в 5 простых шагов
- Используя потрясающие шрифты и бесплатные высококачественные изображения, можно создать впечатляющие меню, которые удивят клиентов
- Тысячи профессиональных тем меню
Цена: Adobe Spark является бесплатным для использования и не имеет никаких скрытых платежей на протяжении всего процесса работы.
Адрес сайта: https://spark.adobe.com/
4. MustHaveMenus
MustHaveMenus — единый центр создания дизайна меню. Сервис имеет богатый функционал, позволяющий сделать дизайн меню под ключ: охватывает любые, даже самые мелкие, работы на этапах дизайна, печати и доставки меню. Конструктор меню позволяет не только создавать макеты основных меню, но также позволяет делать буклеты служб доставки и тейблтенты.
Преимущества использования MustHaveMenus:
- Процесс создания дизайна меню в 5 шагов
- Сотни встроенных шаблонов меню
- Возможность делать акценты, выделяя важные блюда
Цена: $29 / мес
Адрес сайта: https://www.musthavemenus.com/
Сделаем разрыв вашего шаблона, заставив меню продавать. Доверьте работу дизайнеру и фотографу с многовековым опытом.
5. Poster My Wall
Poster My Wall — еще один онлайн-сервис, который превращает дизайн меню в простой приятные процесс, требующий минимального опыта. В дополнение к многочисленным шаблонам дизайна, они предлагают воспользоваться удобным конструктором меню ресторана.
Преимущества использования Poster My Wall:
- Тысячи профессиональных шаблонов на выбор.
- Простой в использовании, не требует подготовки
Цена: $4,99/ макет меню
Адрес сайта: https://www.postermywall.com/
6. Graphicriver
Graphicriver — крупнейший в мире маркетплейс, на котором продаются качественные шаблоны, созданные профессионалами для любых творческих задач. Здесь можно купить абсолютно все — шаблоны сайтов, различные модули и плагины, видеофутажи и музыку для создания роликов, фотографии и, конечно же, шаблоны меню.
Огромное преимущество ресурса перед остальными конкурентами в нашем списке заключается в том, что это действительно высокопрофессиональные шаблоны меню в PSD, векторе и Indesign, а не просто унылые джипеги, над которыми посмеются в типографии.
Минусом же для многих, в свою очередь, может стать отстутствие drag and drop редактора, с помощью которого в браузере можно было бы заниматься компоновкой. Да, для этих макетов потребуется попотеть и достать профессиональный софт и даже возможно его освоить на каком-то начальном уровне.
Преимущества использования Graphicriver:
- Более 17 000 шаблонов послойно редактируемых макетов меню
- Шаблоны меню в PSD, векторе и InDesign с максимальной кастомизацией
- Полная свобода — если понравились фрагменты с разных макетов, без труда сможете их перетаскивать в десктопной программе
- Гарантированное отсутствие проблем с типографией при сдаче макета меню в печать
- Возможность в любой момент передать макет профессиональному дизайнеру
Цена: от $2 / шаблон меню
Адрес сайта: https://graphicriver.net/print-templates/food-menus
Нужно больше посетителей?
Подпишитесь и получайте первыми полезные статьи, которые уже помогают 2450 ресторанам зарабатывать!
Константин Бурцев
Эксперт по ресторанному маркетингу, фуд-фотограф, основатель студии Yummies.
Больше от автора
Популярные материалы
- +7 (812) 983 2530
- info@yummies.ru
- Санкт-Петербург, ул. Рубинштейна, 15-17
- Фуд-фотограф
- Видеосъемка
- Анимация
- Съемка для инстаграм
- Брендинг
- Дизайн меню
- Плейсматы
- SMM продвижение
- PR ресторана
- Управление репутацией
- Реклама сайта
- Открытие ресторана
- Покупка ресторана
- Управление рестораном
- Маркетинг ресторана
Создайте меню онлайн
в бесплатной программе
Красиво оформляйте меню для кафе и ресторанов
в онлайн-редакторе за несколько минут. Порадуйте
своих посетителей ярким дизайном.
Онлайн-редактор с шаблонами для создания меню для кафе и ресторанов
Среди сотни шаблонов выберите подходящий дизайн для вашего меню. Удобный интерфейс поможет создать макет быстро и бесплатно.
Все шаблоны меню
Как создать меню для любого заведения
Выберите дизайн
Определитесь с задним фоном для меню ресторана, выберите шрифт и отредактируйте дизайн в соответствии с вашими пожеланиями. Визуальная составляющая важна. Меню должно быть сделано так, чтобы посетитель с легкостью мог найти нужное. Решите, на каких блюдах вы хотели бы сделать акцент. Помните о том, что шрифт должен быть читабельным.
Персонализируйте шаблон
Отредактируйте макет так, чтобы ваше меню для кафе или ресторана было готово для печати. Добавьте название блюд и цены. Обратите внимание на последовательность. Первыми идут закуски, потом первые и вторые блюда, горячие и десерты. В конце располагаются напитки.
Сохраните
Cохраните готовое меню для кафе или ресторана на компьютере. Выберите подходящий формат – PNG, JPG или PDF. Также вы можете сделать цифровое меню для ресторана, которое отлично справляется с рекламной функцией.
Как создать меню для любого заведения
Cоздайте меню самостоятельно в простом конструкторе
С помощью редактора составьте меню для кафе или ресторана. Подберите шаблон и воспользуйтесь разнообразными функциями конструктора. Вы можете создать текст, добавить фото или выбрать изображение из готовой коллекции. Проявите фантазию и разработайте креативное меню для ресторана на русском, английском или другом языка всего за несколько минут.
Создать дизайн
Большой выбор красивых шаблонов
Сделать меню для кафе или ресторана в онлайн-редакторе намного проще, если есть готовые образцы. Навыки дизайнера для этого не понадобятся. Вам лишь нужно поработать над содержанием и знать, как правильно составить меню для ресторана. На эту тему в интернете написано много статей.
Создать дизайн
Порадуйте посетителей заведения стильным меню
Клиентам приятно сидеть в уютном кафе и читать красивое меню. Визуальная часть важна. На дизайн меню посетители обращают внимание. Важную роль играет цветовая палитра. Например, оранжевый цвет вызывает аппетит, а красный выделяет блюда с выгодной ценой. Выберите яркий цвет и создайте новогоднее или детское меню для ресторана с помощью конструктора.
Создать дизайн
Размер меню
Определитесь с габаритами меню. Для небольшого перечня блюд подойдет один разворот, сделанный из картона. Размер зависит от формата заведения. Если ваше заведение — бар или бургерная, то для дизайна подойдет меню формата А5 или А3. Если у вас эксклюзивный ресторан, выберите формат А4. Закажите печать меню для ресторана в типографии.
В редакторе Ellty все шаблоны универсальны. Выберите подходящий и создайте дизайн меню для ресторана здорового питания, детского кафе, пивного паба, суши-бара или ресторана русской кухни.
Формат меню
Важно определиться с форматом меню для кафе или ресторана, а также с методом крепления. Это может быть листовой формат, папка, меню на скрепке или на пружине. Листовое меню часто имеет оформление без фото. Папки изготавливаются из картона, кожи, пластика и других материалов. Бюджетный вариант – меню на скрепке. Часто оно используется для барных карт. Воспользуйтесь услугами профессионалов. Обратитесь в типографию, чтобы не пришлось думать, как сделать меню для ресторана своими руками. Формат влияет на стоимость продукта. Цена на разработку меню для ресторана и его дизайна значительно снизится, если вы воспользуетесь онлайн-редактором Ellty.
Почему меню так важно сегодня
Креативное меню для ресторана или кафе улучшает впечатления от заведения, и стимулирует аппетит. Это отличный способ помочь посетителям сделать правильный выбор и визуализировать еду. Подумайте над новыми идеями меню для ресторана. Согласно статистике, треть заведений обновляет его каждый месяц. Лучшее меню для кафе – то, в котором есть цветовые контрасты. Фон должен быть простым и чистым. Картинки меню для ресторана или кафе должны быть отделены и аккуратно спрятаны от текста. Придерживайтесь минимализма.
Скачивать программу для создания меню для ресторана также нет необходимости, – воспользуйтесь бесплатным конструктором онлайн.
Создайте меню которое хочется изучать
Удивите посетителей своего заведения вкусной едой и стильным меню
Готовые макеты и интуитивно понятный интерфейс редактора поможет вам создать дизайн за несколько минут
Впечатляющий выбор шаблонов различного формата, тематики, стиля и цвета для любого случая
Создайте профессиональный дизайн с бесплатной библиотекой шаблонов и графических элементов
Создайте меню онлайн бесплатно за несколько минут
Всё что нужно для создания отличного контента
Этот веб-сайт использует файлы Cookie для улучшения пользовательского опыта. Используя наш веб-сайт, вы даете согласие на использование всех файлов Cookie в соответствии с нашей Политика Cookie .