Первый экран и прелоадер. Логотип проявляется вместе со счётчиком загрузки, шторки расходятся, название собирается по буквам, а арки с фото двигаются с разной скоростью при прокрутке.
← Все работы
Концепт · Веб-разработка · 2026
Ragazzi Seafood & Bar Сайт сети ресторанов морепродуктов с онлайн-бронированием и панелью администратора
Атмосферный сайт, который передаёт вкус места ещё до визита: тёплая палитра, арки, живые анимации — и бронь стола с выбором места на схеме зала.
- Формат
- Концепт-проект
- Сфера
- Рестораны, HoReCa
- Что внутри
- Лендинг и админ-панель
- Технологии
- HTML, CSS, GSAP, Lenis
Прототип · UX/UI-дизайн · Тексты · Анимации · Адаптив · Вёрстка · Бронирование · Админ-панель
Цель
Сайт, на котором хочется забронировать стол.
Показать, каким может быть сайт сети ресторанов морепродуктов: таким же тёплым и живым, как сам ресторан, и при этом очень простым в главном — найти нужный адрес и забронировать стол за минуту.
Задача
Пять ресторанов, большое меню и одна понятная страница.
У сети пять адресов, меню из десятка разделов, ланчи по будням и регулярные акции. Гость не должен в этом теряться: всё важное — на одной странице, а путь до брони — в один клик с любого экрана.
Визуально мы хотели уйти от шаблонных ресторанных сайтов с тёмным фоном и стоковыми фото. Основа стиля — тёплая бумажная палитра, классическая антиква Cormorant и арки, повторяющие форму окон и витрин. Фоном служит узор из рыб, нарисованный специально для проекта.
Как сделали
Анимации, которые ведут по странице.
Каждый блок раскрывается по-своему, но в едином ритме: плавная прокрутка, заголовки выезжают построчно, фото проявляются из арок. Анимации не мешают читать — они подсказывают, куда смотреть дальше.
Меню, которое хочется листать. Фирменные креветки разделены на «на льду» и «на огне»: при нажатии на позицию раскрывается фото блюда. Полное меню разбито на вкладки, а курсор подсказывает, что можно сделать.
Интерьер в горизонтальной ленте. Блок закрепляется на экране, и при обычной прокрутке фотографии зала едут вбок — как будто идёшь вдоль барной стойки. Снизу заполняется тонкая полоса прогресса.
Бронь с выбором стола. Гость выбирает ресторан, дату и время, а затем — конкретный стол на схеме зала: у бара, у окна или на диванах. Занятые столы видно сразу, а если стол не выбран, администратор подберёт лучший свободный.
Панель администратора. Все брони в одном месте: фильтры по ресторанам и статусам, поиск по имени и телефону, карточка гостя с историей и заметками, схема зала на выбранное время и выгрузка в CSV.
На телефоне
Результат
Готовый сайт и система бронирования.
- Один сайт для пяти ресторанов: адреса, часы работы, телефоны и карта переключаются в одном блоке.
- Бронь стола в несколько касаний с любого экрана — кнопка всегда под рукой.
- Выбор конкретного стола на схеме зала вместо звонка и уточнений.
- Панель администратора, в которой видно загрузку зала на любой день и время.
- Полная адаптация под телефоны: меню, бронь и анимации работают и на маленьком экране.
Хотите такой же сайт?
Расскажите о вашем ресторане или бизнесе — предложим решение и посчитаем стоимость.
Хочу такой же сайтКонцепт-проект: сайт сделан как демонстрация возможностей студии, бренд и данные в нём использованы для примера.
Заявка
Расскажите о проекте.
Ответим в течение рабочего дня. Первая консультация бесплатная.
Москва · работаем по всей России
Почтаhello@flocko.design
Telegram@flocko_design