До змісту
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

Портфоліо

Інші роботи

Усі роботи

0 ₴ · 24h

Хочете такий самий — але під ваш бізнес?

Залиште контакт — за 24 години покажемо безкоштовний прототип головної сторінки: у стилі цього концепту або в зовсім іншому.

  • Прототип за 24 години — безкоштовно
  • Фіксована ціна, без «доплат» в процесі
  • Запуск від 5 днів
  • Гарантія та підтримка після здачі
Де відповісти?

Без спаму. Натискаючи кнопку, ви погоджуєтесь з політикою конфіденційності.