Лендинг ресторана
от 15 000 ₽
- Первый экран, меню, адрес и часы работы
- Форма брони стола или заказа
- SEO, Метрика с целями, документы 152-ФЗ
- На Tilda, срок 7–12 дней
Дизайн сайта ресторана: бургер собирается при прокрутке
Демонстрационная страница: так может выглядеть сайт вашего ресторана или кафе, если главное блюдо показать движением. Листайте вниз — бургер соберётся слой за слоем, а под ним откроется меню.
- Булка 50 г
- Чеддер 25 г
- Котлета 300 г
- Томат 30 г
- Салат 15 г
- Лук 20 г
- Булка 50 г
Бургерная «Угли»
Жарим на углях и собираем при тебе. Листай — бургер соберётся слой за слоем.
Листай вниз
Свой маринадкрасный лук, двенадцать часов в маринаде
Хруститлистовой салат режем утром, а не накануне
Толстотомат кругом в палец толщиной
300граммов говядины на углях
Таетчеддер плавится прямо на котлете
Своя пекарнябулку печём каждое утро
490 ₽
490 граммов — рубль за грамм В меню
Пример
Как устроен пример сайта ресторана
Заведение «Угли» придумано для примера: это демонстрационная страница, а не работа для реального клиента. Так может выглядеть первый экран вашего ресторана, кафе или стейк-хауса, если фирменное блюдо показывать не фотографией, а движением, которым управляет прокрутка.
Что в дизайне
- Одно блюдо на весь экран. Первый экран отдан главному блюду, а не слайдеру с акциями: гость сразу видит, за чем пришёл.
- Состав крупным шрифтом. Слева — слои блюда словами и с весом. Слова съезжаются вместе с ингредиентами и в конце складываются в общий вес порции.
- Наклейки вместо абзацев. Короткие факты — свой маринад, мясо на углях, своя пекарня — появляются в тот момент, когда ложится ингредиент, о котором они.
- Меню сразу под анимацией. Три позиции крупно, без каталога на сорок строк: после эффекта человеку нужно выбрать и заказать.
- Цвет из самой еды. Уголь, томат, горчица и цвет булки, узкий шрифт, как на уличной афише. Для вашего заведения палитра и шрифты подбираются заново — под кухню и интерьер.
- Телефон — своя раскладка. Блюдо сдвигается вправо, слева — слои словами и с весом, наклейка по одной встаёт под картинкой и не закрывает её.
Как сделано
- Это секвенция кадров, а не видеофайл: 90 кадров размером 1600×900, прокрутка выбирает, какой из них показать. Остановились — блюдо замерло, отмотали назад — разобралось обратно
- Каждый кадр — отдельный файл, загруженный в Tilda. Все вместе весят около 4 МБ
- Первый кадр появляется сразу, остальные догружаются по порядку, пока вы листаете. Если нужный кадр ещё в пути, на экране стоит ближайший из пришедших
- В начале и в конце движения стоят паузы, чтобы блюдо успели рассмотреть и разобранным, и собранным
- Надписи, наклейки и меню — текст страницы, а не часть картинки: цены меняются без перерисовки кадров
- Пример собран своим кодом в блоке Tilda. Тот же движок работает и на сайте на чистом коде
- На телефоне пример показывает те же кадры в своей раскладке. Для вашего проекта мобильный вариант собирается отдельно: меньше кадров и меньше разрешение
Кадры этого примера сгенерированы. Для вашего заведения движение собирается из вашего материала: съёмки блюда, рендера по 3D-модели или генерации. Стоимость материала называю отдельной строкой до начала работ. Как устроена секвенция кадров и откуда их берут — на странице «Видео по скроллу».
Структура
Дизайн сайта ресторана: что должно быть на странице
Движение привлекает внимание, но заказ приносит остальная страница. Хороший дизайн сайта ресторана отвечает гостю на три вопроса: что здесь едят, сколько это стоит и как попасть — за стол, на самовывоз или в доставку. Вот блоки, из которых я собираю сайт ресторана.
01
Первый экран с фирменным блюдом
Одно блюдо, название, кухня и кнопка брони или заказа. Здесь и работает движение при прокрутке: оно удерживает взгляд, пока человек решает, остаться ли на странице.
02
Меню текстом, а не картинкой
Меню с ценами набрано текстом, а не вставлено файлом PDF: его удобно читать с телефона, его видят поисковики, а цену вы меняете сами за минуту. Большое меню делится на разделы.
03
Бронь стола или заказ
Одна короткая форма: дата, время, число гостей и телефон. Заявка приходит в мессенджер или на почту, в Метрике считается цель — видно, сколько броней дал сайт.
04
Доставка и самовывоз
Зона, время и минимальная сумма заказа прямо на странице. Когда заказов много и нужны корзина с оплатой, это уже интернет-магазин.
05
Адрес, карта и часы работы
Там, где их ищут: вверху и внизу страницы. На телефоне номер набирается одним касанием, маршрут в картах строится одной кнопкой.
06
Зал, кухня и люди
Интерьер, веранда, повар за работой. Гость выбирает не только блюдо, но и вечер: атмосферу по фотографиям он оценивает раньше, чем читает меню.
07
Банкеты и события
Отдельный блок для праздников и корпоративов: сколько гостей вмещает зал, условия и своя форма заявки. Для многих заведений это самые крупные чеки.
08
Отзывы и документы
Ссылки на отзывы в картах, награды, упоминания в прессе. Под формами — политика и согласие по 152-ФЗ: готовлю их вместе с сайтом.
Чего на сайте ресторана лучше не делать
- Меню картинкой или файлом PDF: на телефоне его приходится увеличивать пальцами, поиск его не читает
- Слайдер с акциями вместо блюда на первом экране — его пролистывают, не глядя
- Музыка и видео со звуком, которые включаются сами
- Телефон текстом без ссылки: с мобильного его приходится переписывать
- Цены «уточняйте по телефону» — гость уходит туда, где они написаны
- Анимация, которая закрывает меню и кнопку заказа или тормозит на слабом телефоне
Границы
Кому подойдёт сайт с такой анимацией
Движение при прокрутке работает, когда у заведения есть блюдо, которое хочется показать крупно. Сам сайт — с движением или без — нужен почти каждому, к кому гости приходят из поиска и карт.
Подходит
- Ресторан или бургерная с фирменным блюдом, которое узнают в лицо
- Пиццерия, стейк-хаус, суши-бар: у каждого есть блюдо, которое красиво собирается, режется или подаётся
- Сайт кафе, кофейни или кондитерской, где продают атмосферу и десерты — торт тоже собирается по слоям
- Новое заведение перед открытием: лендинг ресторана под рекламу и карты, пока нет отзывов
- Своя доставка с узнаваемым брендом: первая страница перед меню и корзиной
Когда движение не нужно
- Столовая и бизнес-ланч: гостю важнее цена и адрес — подойдёт лендинг без видео, он дешевле
- Меню меняется каждый день и снимать главное блюдо заново некогда — движение лучше отдать атмосфере зала, а блюда показать фотографиями
- Заказы идут только через агрегатор — тогда на сайте хватит ссылки на него рядом с меню
Как идёт работа
Как я делаю сайт с анимацией
Лендинг ресторана на Tilda — от 7 дней, обычно 7–12. Видео по скроллу добавляет несколько рабочих дней на веб-часть, а срок материала зависит от того, откуда берутся кадры, и называется до старта.
01
Разговор и структура
Кухня, меню, как вы продаёте — в зале, навынос или с доставкой. По итогу — список блоков страницы и смета, которая дальше не растёт. 1 день.
02
Раскадровка и материал
Какое блюдо показываем и как оно движется: собирается, режется, дымится. Материал — съёмка, рендер или генерация; если нужен подрядчик, его сумму и срок называю заранее отдельной строкой.
03
Дизайн
Макет в Figma для компьютера и телефона: палитра и шрифты под вашу кухню и интерьер, а не под чей-то шаблон. Правки на макете дешевле, чем на готовом сайте. 3–4 дня.
04
Сборка
Страница на Tilda или на чистом коде, привязка кадров к прокрутке, отдельный вариант для телефона, формы брони и заказа, Метрика с целями.
05
Замер и запуск
Скорость и вес страницы — цифрой, до сдачи. Домен, документы, доступы остаются у вас; показываю, как самому поменять цены и часы работы. 1 день.
Если согласование раскадровки или макета занимает неделю, срок проекта сдвигается ровно на неделю — предупрежу об этом сразу. Сроки — ориентир, а не гарантия.
Стоимость
Сколько стоит сайт с такой анимацией
Цены «от»: точная сумма фиксируется в смете до начала работ и дальше не растёт. До 30 000 ₽ — полная предоплата, свыше — 50/50.
Лендинг и видео по скроллу
Анимация из примераот 27 000 ₽
- Лендинг на Tilda — от 15 000 ₽
- Видео по скроллу — от 12 000 ₽ надбавкой
- Раскадровка, оптимизация кадров, вариант для телефона
- Материал — отдельной строкой, сумму называю до начала
Сайт с заказом и оплатой
от 40 000 ₽
- Каталог блюд, корзина и оформление заказа
- Онлайн-оплата и доставка
- Документы, электронная коммерция в Метрике
- Интернет-магазин на Tilda, срок 15–25 дней
Цены — для сайта на Tilda. На чистом коде лендинг стоит от 20 000 ₽, лендинг с видео по скроллу — от 32 000 ₽, интернет-магазин — от 85 000 ₽. Большое меню без корзины и оплаты — это сайт-каталог, от 30 000 ₽. Если блюдо нужно вращать и рассматривать со всех сторон, прокрутки мало — это уже 3D-сцена в браузере, от 40 000 ₽. Видео по скроллу ставлю на сайт, который делаю с нуля, или на сайт, который у меня на продвижении либо сопровождении. Лендинг под ключ · Интернет-магазин · Все цены
Вопросы
Что спрашивают о таком сайте
Сколько времени займёт сайт с таким эффектом?
Лендинг на Tilda — от 7 дней, обычно 7–12. Видео по скроллу добавляет несколько рабочих дней на веб-часть. Срок материала — съёмки, рендера или генерации — называю до старта: он зависит от того, откуда берутся кадры.
Страница не будет тормозить на телефоне?
В этом примере 90 кадров общим весом около 4 МБ, и грузятся они не разом: первый кадр виден сразу, остальные подтягиваются по порядку, пока гость листает. Для вашего сайта мобильный вариант собирается отдельно — меньше кадров и меньше разрешение. Скорость и вес показываю цифрой до сдачи.
Можно сделать такое на Tilda?
Да: этот пример собран своим кодом в блоке Tilda, кадры лежат на её хостинге. Тот же движок работает и на сайте на чистом коде. Тексты и цены вокруг анимации вы потом правите сами, без программиста.
Где взять ролик или 3D-модель блюда?
Три пути: съёмка настоящего блюда, рендер по 3D-модели или генерация. Чтобы показать именно ваше блюдо, надёжнее съёмка: генерация хороша для атмосферы, но может исказить подачу, и я скажу об этом прямо. Если нужен фотограф или 3D-художник, его сумму и срок называю отдельной строкой до начала.
Как такая страница покажет себя в поиске?
Кадры для поисковика — набор картинок, а ранжирует текст. Поэтому меню, адрес, часы работы и описания стоят рядом обычным текстом страницы, и на индексацию эффект не влияет. Дизайн сайта ресторана с движением не мешает SEO, если тексты не спрятаны в картинку.
Что делать, если нет хороших фото блюд?
Сайт можно запустить и так: меню текстом, атмосфера — через цвет и шрифты, как в этом примере. Для движения подойдёт рендер или генерация, а съёмку блюд добавить позже, когда она будет. Что из этого нужно именно вам, скажу на первом разговоре.
Ещё примеры
Другие примеры анимации при прокрутке
Шесть примеров — шесть ниш и шесть разных дизайнов. Бренды придуманы, движение в каждом ведёт прокрутка: так может выглядеть страница вашего товара или вашего бренда.
Рюкзак раскрывается
Городской рюкзак открывается, вещи вылетают из отделений и возвращаются обратно.
Пример промо-сайта товараКроссовок по слоям
Беговой кроссовок раскладывается на подошву, пену, стельку и шнурки.
Пример лендинга кроссовокПролёт к пентхаусу
Камера летит с высоты к башне жилого комплекса и садится на террасу.
Пример лендинга ЖКФлакон из спирали
Золотая спираль жидкости застывает стеклянным флаконом духов.
Пример сайта брендаТурбина в разборе
Турбокомпрессор разбирается по оси, выноски с оборотами и давлением идут за прокруткой.
Пример сайта с анимациейКак это устроено
Что такое видео по скроллу, откуда берутся кадры, сколько весит страница и сколько стоит — от 12 000 ₽ надбавкой к сайту.
Видео по скроллуСделаем так же для вашего заведения? Расскажите, что у вас в меню и как вы продаёте — в зале, навынос или с доставкой. Отвечу в течение рабочего дня: подойдёт ли лендинг, нужен ли магазин и во что обойдётся движение с вашим блюдом.
Смотрите также: Лендинг под ключ · Интернет-магазин · Иммерсивные сайты · Видео по скроллу · Цены
