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

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

Задача

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

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

Решение

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

Корзина объединяет выбранные позиции в одном месте. Вариации товаров поддерживают блюда, для которых одного стандартного предложения недостаточно. Информация о доставке, контакты и ссылка на Instagram дополняют каталог: рядом с ассортиментом есть сведения о самом заведении и способах связи с ним.

Адаптивная версия

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

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

Каталог и мобильный сценарий

Характерная особенность Street Food состоит в сочетании широкого меню и небольшого числа повторяющихся действий. Категории различаются по содержанию, но посетитель всякий раз работает с понятной карточкой товара. Это помогает сохранять единый интерфейс для пиццы, напитков, завтраков и более сложных вариативных позиций.

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

Результат

Результатом стал сайт, в котором каталог еды, вариации товаров и корзина работают как части одного пользовательского сценария. Ассортимент представлен визуально и разделён на понятные группы; условия доставки и контакты дополняют выбор блюда. Сайт можно использовать на настольном компьютере и мобильном устройстве.

Кейс показывает работу с реальным меню заведения: большое число категорий требует последовательной структуры, а товары с вариантами требуют более подробного представления. Объективный результат проекта связан с организацией ассортимента и возможностью собрать выбор в корзине. Именно эти возможности определяют характер сайта Street Food.

Проект в портфолио · Разработка сайтов Noros