Лендинг-меню для бургерной LA BURGERS

К нам обратился Егор Жуков, наш соотечественник и владелец бургерной LA BURGERS в Лос-Анджелесе. Ему нужен был интерактивный лендинг с меню, через который гости могли бы выбирать блюда и оформлять заказы. Проект объединил два сценария: заказ со столика по QR-коду и заказ на доставку.

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

Заказ за столиком

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

Заказ на доставку

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

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

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

В оформлении использовали знак с монограммой LA и контурное написание BURGERS. Типографика Onest связывает первый экран, каталог, информационные разделы и корзину. Английские названия, цены в долларах и обозначения порций соответствуют контексту американского заведения.

Шапка объединяет навигацию по странице, управление музыкой и быстрый доступ к выбранным блюдам. Ссылки позволяют перейти к меню, подходу к приготовлению, информации о Лос-Анджелесе и ответам на вопросы.

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

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

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

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

Добавление блюда сразу отражается в счётчике корзины. Быстрая корзина открывается поверх страницы: пользователь видит выбранные позиции, меняет количество и проверяет промежуточную сумму. Закрыв её, он продолжает знакомиться с меню с того же места.

Отдельный раздел собирает весь выбор в одном списке. Такая последовательность связывает знакомство с блюдом, добавление и проверку заказа. В копии для портфолио эта часть остаётся интерактивной, а этап ввода персональных данных исключён.

Интерфейс реализован на HTML, CSS и JavaScript. Контент меню хранится в общей конфигурации: карточки, корзина и итоговая сумма используют одни и те же данные. Анимация бургера, огонь, музыка и карта разделены на самостоятельные модули.

Для графики использованы растровые изображения блюд и ингредиентов, а для логотипа — SVG. Шрифты размещены локально. Музыкальная кнопка управляет звуковым сопровождением и эквалайзером, карта показывает контекст Лос-Анджелеса.

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

Разработали англоязычный лендинг-меню для бургерной, в котором презентация продукта связана с выбором блюд. Лендинг объединяет фирменное оформление LA BURGERS, управляемую прокруткой сцену бургера, каталог из 18 позиций, быстрый просмотр корзины и раздел с составом заказа.

Задача заказчика определила два пользовательских пути: доступ к меню по QR-коду за столиком и выбор блюд для доставки. В кейсе показываем интерфейс и принятые решения. Интерактивная копия позволяет оценить их самостоятельно, не отправляя данные в заведение.

По словам основателя LA BURGERS Егора Жукова, разработка заняла 7 дней и уложилась в его бюджет. В отзыве он также отметил, что по сравнению с предыдущим сайтом конверсия выросла почти в 3 раза. Это оценка заказчика.

Нужен похожий инструмент для ресторана, кафе или доставки еды? Посмотрите нашу услугу разработки сайтов или обсудите проект с командой Make All Perfect.

Что можно попробовать внутри макбука?

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

Можно ли оформить настоящий заказ?

В копии для портфолио оформление отключено. Она не собирает контактные данные и не отправляет заказы в бургерную.

Подходит ли такой формат для меню по QR-коду?

Это один из сценариев, с которым пришёл заказчик LA BURGERS. QR-код ведёт посетителя к лендингу-меню. Для конкретного заведения сценарий заказа, привязку к столику и способ обработки заказов определяют при разработке проекта.