ROAST & REST.
Тепло за зелёной дверью.
Мой вклад
Идея, 3D-сцена в Blender, дизайн и разработка. Модели, свет и анимации — в Blender; сцена, интерфейс, лендинг и оптимизация — в коде.
Формат
Демо-шаблон сайта
Главная / Ночь, дождь — экран опубликованной версии
Контекст
Roast & Rest — демо-сайт кофейни. Вместо фотографии на первом экране живая улица: кофейня на углу, прохожие, машина, погода и смена времени суток. Посетитель может покрутить сцену, а потом спуститься к обычному сайту кафе.
Задача
Сделать сайт кафе, который запоминается с первого экрана, и при этом оставить посетителю обычный путь: меню, адрес и бронь.
Границы проекта
Это демо-шаблон: кафе, меню, адрес и часы вымышлены, форма брони ничего не отправляет. Сцена тяжелее обычного сайта, поэтому загрузку пришлось отдельно сокращать. Показатели посещаемости и продаж не заявляются.
Решения в деталях
Реальные экраны публичной версии. Каждый можно открыть крупнее.
Улица вместо баннера
Сайт кафе должен передавать атмосферу места, а не только список блюд. Живая сцена делает это быстрее любой фотографии.
Сцена собрана в Blender и показана через Three.js. Погода, сезон и время суток переключаются в одной панели; по улице ходят прохожие, едет машина, в дождь работают дворники и раскрывается навес. Кинопроезд за 30 секунд показывает улицу без участия посетителя.
Под сценой — обычный сайт кафе
Впечатление от сцены не должно мешать главному: узнать меню, найти кафе и занять столик.
Ниже сцены спокойный лендинг: о кофейне, меню с ценами, галерея, адрес с часами работы и форма брони. Колесо мыши над сценой листает страницу, а не приближает камеру. Форма подбирает время по часам работы и проверяет телефон.
Один мультяшный мир из Blender
Сцену собирали в несколько итераций, и реалистичные люди рядом с игрушечной кофейней выбивались из стиля.
Оставил единый мультяшный стиль: люди и машина такие же игрушечные, как дома и кофейня. Рендеры той же сцены из Blender стали галереей сайта. Загрузку сократил с 15,5 до 5,7 МБ: лишние модели не грузятся, Three.js сжат, карта освещения уменьшена, остальные файлы запрашиваются сразу и параллельно.
Путь по интерфейсу
Сценарий, проверенный в опубликованном демо.
Посмотреть улицу
Переключить вечер или ночь, сменить сезон, запустить кинопроезд или покрутить камеру.
Спуститься к меню
«Заглянуть в меню» или прокрутка ведёт к описанию, меню с ценами и галерее.
Забронировать столик
Имя, телефон, дата, время, гости и место. Подтверждение показывает выбранное; заявка в демо никуда не уходит.
Что получилось
Опубликованный 3D-сайт кафе: живая улица на первом экране и полноценный лендинг ниже. Работает на компьютере и телефоне, загружает около 5,7 МБ вместо 15,5.
- 3D-сцена в Blender и её веб-версия на Three.js
- Погода, сезоны, время суток, прохожие и кинопроезд
- Лендинг: меню, галерея, контакты, бронь
- Оптимизация загрузки и мобильная версия
Демо-шаблон сайта для кафе, не действующее заведение. Меню, адрес и часы вымышлены; форма брони ничего не отправляет.
Попробовать проект