К содержимому
Tvorum.
КонцептРесторан2026

Fumo Osteria — концепт сайта для ресторана

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

Это концепт, а не клиентский проектКонцепт-проект студии: демонстрация дизайна и функционала для ниши. Так мы видим сильный сайт для ресторана: структура, дизайн, тексты и функционал. Закажите — и ваш сайт станет следующим кейсом.

Fumo Osteria — концепт сайта для ресторана — главный экран
Ниша
Ресторан
Тип сайта
Лендинг
Год
2026
Формат
Концепт студии

01 / Задача

Какую задачу решает сайт

Гость выбирает ресторан на вечер за полминуты — между Instagram, Google Maps и советом друзей. За это время сайт должен ответить на четыре вопроса: открыто ли сейчас, что в меню и сколько это стоит, есть ли свободный стол на 20:00 и найдётся ли что-то для меня — веганское, острое, без глютена. Типичный сайт ресторана отвечает PDF-меню, номером телефона и галереей «с открытия».

Что должен был показать концепт:

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

Цель сайта — превратить посетителя из рекламы или поиска «итальянский ресторан Львов» в забронированный стол или запись на событие.

02 / Решение

Дизайн и UX-решения

Идея — «сайт, измеренный в градусах». Остерия готовит только на живом огне, поэтому температура стала языком дизайна: на первом экране — «датчик» печи, живущий в реальном времени, сбоку — термометр прокрутки от 20° до 485°, а каждый раздел меню показывает, на каком огне и при какой температуре готовится блюдо. Угольный чёрный, жар-оранжевый и кремовый, засечный дисплей Cormorant и моноширинные подписи — как карточки на кухне.

Кинематографичный герой: пиццайоло у печи, искры и дым на лёгком canvas, «факел» — тёплый свет, следующий за курсором. Манифест «загорается» слово за словом при прокрутке.

Продающий интерактив:

  • меню с табами (антипасти, паста, пицца из печи, десерты, вино) и фильтрами «веган», «острое», «без глютена», которые сочетаются между собой; у вин — цена бокала и бутылки;
  • бронирование: лента из 14 дней, слоты по графику работы (прошедшее время на сегодня не предлагается), занятые часы, шефский стол у печи с 19:00 и до 8 гостей, сезонная терраса, проверка имени и телефона и «билет» с кодом брони;
  • события со счётчиком свободных мест, записью в модальном окне и подсчётом суммы за количество гостей;
  • галерея masonry с лайтбоксом (клавиатура и свайп), доставка с кнопками Glovo, Bolt Food, собственного курьера и самовывоза;
  • часы работы с индикатором «сейчас открыто» по киевскому времени и временем последнего заказа на кухне.

Честность: никаких выдуманных отзывов, рейтингов и наград — вместо них конкретика, которая и убеждает гостя: температура, 48 часов ферментации теста, дрова, сезонное меню.

03 / Функционал

Что есть на сайте

  • Кинематографичный первый экран: искры и дым на canvas, свет за курсором, «живой» датчик температуры печи
  • Меню с 5 табами и комбинируемыми фильтрами «веган», «острое», «без глютена»
  • Онлайн-бронирование столика: дата, время по графику, количество гостей, зона, пожелания — с валидацией
  • Шефский стол и сезонная терраса со своими правилами в бронировании
  • События (дегустации, мастер-классы, ужины шефа): фильтр, счётчик мест, запись и расчёт суммы
  • Галерея masonry с лайтбоксом, управлением с клавиатуры и свайпом
  • Блок доставки с кнопками агрегаторов, собственного курьера и самовывоза
  • Часы работы с индикатором «сейчас открыто» по киевскому времени
  • Термометр прокрутки 20°→485° как фирменный элемент навигации
  • Мобильная версия от 360 px: текст от 14 px, кнопки от 44 px, доступные формы, поддержка reduced motion

04 / Экраны

Как сайт выглядит на компьютере и телефоне

Fumo Osteria — концепт сайта для ресторана — главная страница полностью
Главная страница полностью — листайте внутри рамки
Fumo Osteria — концепт сайта для ресторана — мобильная версия
Мобильная версия

Технологии

Стек

Технологии подбираем под задачу: быстрая загрузка, удобное редактирование контента и интеграции с вашими сервисами.

  • HTML5
  • CSS Grid/Flex
  • Vanilla JS
  • Canvas: іскри та дим
  • IntersectionObserver
  • Intl API (час Europe/Kyiv)
  • Нативний <dialog> для модалок і лайтбоксу
  • Готовий до інтеграції з CMS

Палитра

Цвета концепта

  • Цвет #0e0c0b
  • Цвет #161210
  • Цвет #ff5b1f
  • Цвет #f6a43c
  • Цвет #f1e7d6

Портфолио

Другие работы

Все работы
  • Nexa Academy — концепт сайта для онлайн-школы — главный экран
    КонцептОнлайн-школа2026

    Nexa Academy — концепт сайта для онлайн-школы

    Лендинг онлайн-школы, который работает как плеер курса: протяните таймлайн — и увидите, как за 16 недель серый вайрфрейм студента превращается в кейс для портфолио.

    Концепт-проект студии: демонстрация дизайна и функционала для ниши.

  • Pinewood — концепт сайта для глэмпинга — главный экран
    КонцептГлэмпинг / база отдыха2026

    Pinewood — концепт сайта для глэмпинга

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

    Концепт-проект студии: демонстрация дизайна и функционала для ниши.

  • Sonce Energy — концепт сайта для монтажа СЭС — главный экран
    КонцептСолнечные электростанции2026

    Sonce Energy — концепт сайта для монтажа СЭС

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

    Концепт-проект студии: демонстрация дизайна и функционала для ниши.

0 ₴ · 24h

Хотите такой же — но под ваш бизнес?

Оставьте контакт — за 24 часа покажем бесплатный прототип главной страницы: в стиле этого концепта или в совсем другом.

  • Прототип за 24 часа — бесплатно
  • Фиксированная цена, без «доплат» в процессе
  • Запуск от 5 дней
  • Гарантия и поддержка после сдачи
Где ответить?

Без спама. Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности.