Задача – сайт, где голодный человек за минуту находит блюдо и оформляет доставку. Мы начали с UX-прототипа: структура меню, путь от главной до «Спасибо за заказ», мобильные сценарии. Затем нарисовали UI в тёмной японской стилистике и UI-кит, а после этого собрали сайт: Laravel на бэкенде, Vue.js для динамики корзины, фильтров и оформления.
Стиль
Тёмная шапка с фото блюд, белые карточки на светло-сером фоне и один яркий красный акцент, как солнце на логотипе. Заголовки набраны узким RF Rufo в верхнем регистре, текст – Gerbera.
Мобильная версия
Для мобильных отрисованы все страницы: меню-иконки скроллятся горизонтально, корзина висит плавающей кнопкой со счётчиком, в карточке блюда цена и «В корзину» закреплены внизу экрана.
Задачи
- 01Быстро найти блюдоБольше десяти разделов меню нужно было показать так, чтобы нужный был под рукой с любой страницы.
- 02Короткий путь к заказуДобавление в корзину из любой карточки, корзина без перехода на отдельную страницу, заказ в один клик.
- 03Средний чекПодсказки «Вместе вкуснее», «Хиты продаж», допы к заказу и подарки на выбор в оформлении.
- 04Прототип до дизайнаСначала согласовать структуру и сценарии в UX-прототипе, затем рисовать UI и UI-кит.
- 05Надёжная разработкаСобрать сайт на Laravel и Vue.js, чтобы им было удобно управлять и его было легко развивать.
Ключевые решения
Навигация по меню
Иконки разделов (детское, пицца, супы, горячее, роллы, салаты, суши, вок, закуски, веган, десерты) стоят в шапке на каждой странице.
Каталог с фильтром
Плитка или список, фильтр и сортировка, метки «New» и «Острое», цена со скидкой и кнопка «В корзину» в карточке.
Карточка блюда
Вес, калории, белки, жиры и углеводы, ингредиенты с иконками, выбор допа к заказу, отзывы с оценкой и подборки похожих блюд.
Корзина-панель
Корзина выезжает справа поверх каталога: можно поменять количество, удалить позицию и сразу перейти к оформлению.
Оформление заказа
Промокод, выбор подарка, заказ в один клик, адрес с комментарием для курьера, дата и время, оплата картой на сайте или курьеру, сдача, количество персон и итог с упаковкой.
Страница «О нас»
История компании на таймлайне, принципы сервиса, блок детского меню и баннер бесплатной доставки по Харькову.
Стек
Хотите такой же проект?
Опишите задачу – в течение рабочего дня ответим с вопросами и предварительной оценкой сроков.