Мы все видели ужасные сайты кафе и ресторанов. Они тянут бизнес вниз, заставляя фешенебельное заведение казаться заурядной дешевой закусочной.
Но разработать сайт ресторана не так уж сложно. В прошлом мы освещали отличные сайты электронной коммерции, и в этих статьях найдется масса полезных идей.
Но есть одна конкретная страница на веб-сайте ресторана, которая имеет решающее значение: меню. Именно сюда большинство потенциальных клиентов приходит, чтобы проверить ассортимент, узнать цены и условия заказа.
Эта страница особенно полезна, если ресторан предлагает еду на вынос, потому что пользователь может подтвердить заказ или закрыть ваш сайт, основываясь только на удобстве использования меню.
Ниже мы приведем несколько практических советов, которые вы можете применить к любому дизайну меню ресторана на своем сайте. Мы покажем замечательные примеры, которые вдохновят вас на разработку понятного удобного шаблона меню.
Организация веб-страницы меню по типам блюд
Это может показаться очевидным, но мы видели слишком много смешанных одностраничных меню, которые прямо просят разделить их на категории.
Всегда постарайтесь организовывать шаблоны меню на основе блюда. Для этого продумайте разделы для закусок, стейков, салатов, чего угодно. В каждом кафе и ресторане собственное меню, но всегда есть место для категорий.
Если меню очень маленькое, разделение излишне. Если оно действительно большое, имеет смысл разработать отдельные веб-страницы для каждой категории.
Пример — страница меню ресторана Pho Cafe.
Здесь вы найдете отдельные ссылки на десерты, салаты, веганские блюда. Все это загружается на одной странице, поэтому вы получаете точно такой же интерфейс.
Это лучший способ просмотра без прокрутки вручную. Посетители ценят их подход за структурированные меню, где люди могут искать только определенные блюда.
Еще один замечательный пример — меню сайта ресторана Tonga.
Все ссылки на категории динамически загружают контент через Ajax. Это дает странице меню более «гладкое» ощущение, и люди могут быстро и комфортно листать блюда.
Также обратите внимание: кнопки и ссылки хорошо видны на странице. Пользователь боковым зрением может определить, что нажать. Это способствует совершению заказа.
Чтобы заставить людей кликать на категории меню, выбирайте соответствующие цвета, которые гармонируют с дизайном веб-страницы меню и вместе с тем выделяются.
Еще один пример, которым мы хотим поделиться — сайт Biera.
Домашняя страница в основном является страницей меню, так как это один плавный пользовательский интерфейс. Но когда вы прокрутите меню, увидите фиксированный интерфейс категорий блюд вдоль боковой панели.
Таким образом, вы можете быстро перемещаться между разделами, получая доступ к различным блюдам из каждой категории. Довольно современный подход к организации пользовательского интерфейса, и это делает меню более динамичным.
Если вы можете работать с вертикальным меню, это хороший вариант.
Структура печатного меню на сайте ресторана
Когда вы приходите в ресторан, то обычно ожидаете, что меню будет выглядеть определенным образом. Привычным образом.
Каждое заведение отличается, но большинство печатных меню выравниваются по вертикали, а блюда организованы по разделам (первое, второе и др.)
Оказывается, этот шаблон работает в Интернете.
Взгляните на веб-страницу меню ресторана Maialino. Страница предельно чистая и простая, а при прокрутке выглядит как настоящее печатное меню
Каждый элемент организован в категории, расположенные вертикально. Позиции меню сопровождаются ценами, выровненными по правой стороне. Даже шрифт выглядит очень похожи на меню, которое отпечатывают изящными буквами с засечками.
У сайта ресторана Earls похожее меню, но оно выравнивается по горизонтали.
Каждый элемент располагается внутри сетки, где категории разделяются по вертикали, а пункты меню — горизонтально. Самое замечательное в этом шаблоне, что его комфортно просматривать на любом устройстве, включая смартфоны.
Еще одна причина, по которой стоит перейти на такую страницу меню: очень просто адаптировать ее для настольных и мобильных устройств. Требование времени.
Теперь давайте возьмем организацию блюд по категориям и дизайн печатного меню. Соединив эти два подхода, мы получим нечто вроде сайта Kyirisan.
Каждое блюдо проходит вниз по странице, но одновременно предлагаются разделы с четко обозначенными ссылками на категории.
Все загружается динамически, и у него чистый стиль анимации.
Если вы сомневаетесь в том, как оформить страницу меню, просто взгляните на собственное печатное меню, которое подаете посетителям.
Это будет отличным источником вдохновения.Чистое и минималистическое меню
Допустим, вы не уверены, какие цвета выбрать или какие шаблоны добавить. Возможно, вам нужно добавить графику или множество дополнительных функций. Что предпринять?
Мы предлагаем вернуться к основам: минималистический стиль веб-дизайна.
Меню ресторана Flying Pig – отличный пример этой концепции.
Основной дизайн сайта довольно крутой и имеет вертикальную фиксированную навигацию с левой стороны.
Но просто посмотрите на список блюд и само меню.
Вы заметите, что у него есть несколько отличительных признаков:
-
Один стиль шрифта
-
Белый фон с темным текстом
-
Совсем ничего лишнего
Когда людям просто нужна информация, минималистический дизайн лучший выбор.
В такой веб-странице остается немного места для фотографий и дополнительной графики. Но это даже хорошо, работать с большим пустым пространством и четкой сеткой.
Минимализм отлично выглядит, даже если инвертировать цвета необычным образом и сделать темный фон основным. Например, сайт Pourhouse Vancouver.
Текст все еще легко читается и плавно скользит. Страница выглядит очень минималистично, хотя рядом с заголовком вы найдете графику.
Наконец, нужно заботиться о качественном оформлении блюд — пунктов внутри меню. Это особенно важно, если вы используете минималистический веб-дизайн.
Минимализм не всегда означает простую типографику и ничего больше.
Взгляните на меню ресторана Melted Subs, и пролистайте страницу вниз. Он невероятно минималистичный, но в то же время насыщен цветами и качественной графикой.
Отличная типографика, аккуратный шаблон, и он полностью отзывчивый.
В заголовках используются маленькие значки, чтобы привлечь внимание посетителя при прокрутке. Это то, что можно назвать лучшей страницей меню для сайта ресторана.
Но каждый проект будет отличаться, поэтому постарайтесь найти стиль, который наилучшим сочетается именно с вашим заведением.
Больше качественных фотографий для страницы меню
До сих пор вы видели примеры сайтов кафе и ресторанов без фото.
Это норма для местечковых заведений или небольших сетей, которые не имеют серьезного бюджета, чтобы нанять фотографа-кулинара.
Хотя, если вы сможете выделить деньги на профессионального фотографа, это может иметь огромное значение для успеха веб-сайта.
Фотографии и изображения, как правило, продаются гораздо быстрее, чем слова. Если и есть на сайте кафе или ресторана страница, где нужны фотографии, это страница меню.
Взгляните на меню от Smokey Bones. Каждая категория блюд имеет свои миниатюры, которые помогут посетителю выбрать то, что хочется заказать.
Если мы пройдем дальше, вы заметите, что на самих блюдах нет изображений, но в заголовке есть. Например, страница барбекю просто перечисляет элементы из меню барбекю. Зато заголовок все еще привлекает внимание.
Вот она, настоящая сила качественных фотографий еды!
Нечто подобное предлагается в меню ресторана Ruby Tuesday, где дизайнеры не поскупились на множество аппетитных фотографий к каждому блюду.
Просматривая каждое блюдо, вы заметите небольшой эскиз рядом с ним.
Иногда этого достаточно для улучшения юзабилити.
Люди просто хотят видеть, что они заказывают, и это естественное стремление потребителей удваивается при оформлении онлайн-заказов.
Почему бы не включить небольшую картинку рядом с каждым блюдом?
Для оценки фотографий потребуется некоторое время, но конечный результат всегда лучше. Крупные рестораны неспроста уделяют внимание фотографиям еды.
Детальные описания каждого блюда
Если вы разрабатываете дизайн меню для сайта ресторана, приготовьте детальные описания каждого блюда. Даже если есть пара фраз или перечень ингредиентов.
Эти описания помогают продвигать посетителя дальше по странице к совершению заказа и дают гораздо больше информации о еде, которую они заказывают.
Больше информации — выше вероятность, что обед понравится клиенту.
Веб-страница меню ресторана Brewsters содержит длинные описания сразу после наименования блюда.
Выделяется очень жирный текст названий, под которым идет разделитель, а затем грамотно составленное описание.
Этот шаблон легко просматривать, поэтому большинство людей научатся быстро разбираться в меню и принимать решение. Потрясающий дизайн.
И помните, что описания блюд не должны быть слишком длинными. Публикуйте ровно столько информации, чтобы посетитель определил: нравится или не нравится.
Давайте взглянем на образец веб-дизайна от ресторана Col'cacchio.
Наряду с описаниями мы видим маленькие значки рядом с каждым блюдом. Они обозначают диетические особенности. Например, веганские и безглютеновые блюда.
В самом верху страницы вы найдете расшифровку этих значков.
Посетители на лечебной диете будут благодарны.
Конечная цель дизайна меню ресторана — помочь сделать выбор. На этой странице люди пытаются увидеть, что вы предлагаете и сколько это стоит. Просто помогите им в этом.
Маленькие описания всегда помогают, как и функциональные иконки.
Вы можете сделать следующий шаг, обозначив калорийность и пищевую ценность блюд, но для экономии места лучше сделать это на отдельной странице.
Другой важной частью правильного дизайна является четкое различие между названиями блюд и описаниями. Это сделает просмотр страницы значительно проще.
Хорошим примером является веб-страница меню ресторана Café De Olla.
Здесь все четко и ясно: красный текст выделяет название каждого блюда. Посетитель может быстро и легко прокручивать меню в поисках аппетитного названия. Как только найдется подходящее название, можно остановиться и вчитаться. Умно!
Послесловие
Идеальная страница меню для сайта ресторана не требует дорогостоящего видео и сложной графики. Все, что вам действительно нужно — это актуальная информация, упорядоченная в удобной для чтения форме. Плюс пара фотографий.
Но слова не всегда помогают. Иногда нужно увидеть лучшие примеры веб-дизайна и разрабатывать собственные идеи вокруг них. Надеемся, мы помогли вам в этом!
