Сайт греческого ресторана
Это похоже на сам вечер
Aristeia — греческий ресторан и бар в Северном Лондоне, построенный вокруг сдержанной роскоши и настоящего гостеприимства. Веб-сайт должен был дать посетителю почувствовать это еще до того, как он войдет в дверь.
Я спроектировал и создал девятистраничный сайт с анимированным приветствием, полноэкранным анимированным меню, видеогероем, плавной прокруткой, книгой с перелистыванием страниц для пяти меню, а также онлайн-бронированием и запросами на празднование.
Гости получают представление о номере, еде и обслуживании с первого экрана, могут прочитать каждое меню на любом устройстве и запросить столик в несколько нажатий, и все это, не покидая бренд.
Аристея – это Next.js веб-сайт, где движение несет бренд: анимированное приветствие, a полноэкранное анимированное меню и плавная прокрутка со связанными прокруткой раскрытиями из GSAP и Lenis.
За полировкой это практично: пять меню, которые превращаются в книгу, но могут быть прочитаны в виде текста или загружены, форма бронирования, которая предлагает только реальное время работы и не может быть отправлена дважды, и специальная страница запросов для свадьбы, дни рождения и мероприятия.
Роскошь нужно чувствовать, а не констатировать
Обещание бренда – сдержанная роскошь и подлинное гостеприимство. Шаблон со стоковыми фотографиями и виджетом бронирования отменит это обещание в первую же секунду.
Движение, которое никогда не мешает
Анимация должна была сделать сайт спокойным и дорогим, а не медленным. Каждый эффект должен оставаться плавным на телефонах и отключаться для посетителей, предпочитающих замедленное движение.
Печатные меню, доступные для чтения онлайн
Пять меню ресторана оформлены в художественном стиле. Они должны были сохранять вид на экране и при этом оставаться читабельными на телефоне, программах чтения с экрана и поисковых системах.
Бронирование и запросы в одном месте
Столы, свадьбы, дни рождения и частные мероприятия — все это нуждалось в четком проходе, без необходимости отправлять гостей на сторонний сайт бронирования.
Анимированное приветствие
При первом посещении герб «Аристеи» обвивается золотым лавровым венком, «Добро пожаловать» появляется из контура, а текстовый знак «АРИСТЕЯ» улавливает свет букву за буквой, прежде чем занавес поднимается над главным героем фильма.
Полноэкранное анимированное меню
Кнопка МЕНЮ открывает темно-синюю панель, которая перемещается по странице. Восемь крупных пронумерованных ссылок встают на свои места одна за другой, а рядом с ними появляются кнопка бронирования и адрес. На телефонах это длинный список с единственным золотым крестом.
Красивая, плавная прокрутка
Ленис придает всему сайту мягкую, взвешенную прокрутку, а GSAP ScrollTrigger связывает с ней движение: заголовки и текст раскрываются по мере их появления, изображения перемещаются в своем собственном темпе, а разделы переключаются между темно-синим и кремовым без жесткого вырезания.
Буквы, которые катятся при наведении
Каждая навигационная ссылка и кнопка разделены на буквы. При наведении курсора буквы сворачиваются одна за другой и заменяются новой копией — небольшая деталь, которая придает всему интерфейсу ощущение продуманности.
Курсор, который говорит
На рабочем столе мягкий круглый курсор следует за указателем и превращается в метку над объектами, над которыми вы можете действовать, например ПРОСМОТР МЕНЮ над обложкой меню или ОТКРЫТЬ НАВИГАЦИЮ над кнопкой меню.
Фильм, а не фотография
Главный герой проигрывает тихий фильм о столовой за заголовком с кнопкой «Пауза», чтобы гость всегда мог контролировать движение.
- 01
Выберите дату
Календарь предлагает только следующие 90 дней, а день, в котором нет доступного времени, не может быть отправлен.
- 02
Гости и время
Размер вечеринки и время из свободных мест на этот день, поэтому гостю никогда не предлагается время, когда кухня закрыта.
- 03
Несколько деталей
Имя, адрес электронной почты, телефон и дополнительные заметки о дне рождения, годовщине, потребностях в доступе или диетических требованиях с явного согласия.
- 04
Отправлено один раз
Каждый запрос имеет уникальный идентификатор, поэтому двойной щелчок или повторная попытка при плохом соединении не могут создать второе бронирование. Скрытое поле-приманка незаметно отпугивает ботов.
- 05
Ссылка
Гость сразу же видит анимированное подтверждение со ссылкой на бронирование на той же странице.
Глубокий эгейский темно-синий, теплый кремовый и старинное золото украшают весь сайт. Разделы чередуются между темно-синим и кремовым, поэтому длинная страница имеет ритм и не требует дополнительного оформления.
Крупные классические заголовки с засечками сочетают прямую линию с курсивом «Создано, чтобы поделиться. Предназначено для того, чтобы задержаться.» над небольшими заглавными буквами для меток. Тон — это карточка меню, а не веб-шаблон.
Амфоры, лавровые венки, кольца, торты и стаканы нарисованы тонкими золотыми линиями, а нижний колонтитул заканчивается широкой иллюстрацией греческого стола с видом на островную деревню.
Каждое из пяти меню открывается в виде книги. Страницы превращаются в 3D с помощью CSS-преобразований по щелчку мыши, смахиванию или клавишам со стрелками, а Escape закрывает книгу.
«Приблизить для чтения» увеличивает страницу на маленьких экранах, «Читать как текст» заменяет иллюстрацию реальным доступным текстом, а каждое меню доступно для загрузки в формате PDF.
Свадьбы, дни рождения и мероприятия имеют свою собственную страницу и собственную форму запроса, поэтому гостю, планирующему свадьбу, никогда не придется копаться в форме бронирования столика.
Бронирования публикуются в собственном API бронирования сайта, а не в стороннем виджете, поэтому впечатления остаются неизменными от первого экрана до подтверждения.
Анимации проверяют настройку ограничения движения устройства, поэтому посетители, которые просят меньше движений, по-прежнему видят каждое слово и изображение без театра.
Ссылка для перехода к содержимому, кнопки с надписью, главный фильм с возможностью паузы и книга меню, которая поворачивается с помощью клавиш со стрелками и закрывается с помощью Escape, поэтому ощущение роскоши никогда не закрывает никого.
Есть идея проекта?
Расскажи мне, чего ты пытаешься достичь. Вам не нужно знать, какая технология вам нужна: я помогу определить технический подход, объем, сроки и стоимость до начала разработки.
- ЭЛЕКТРОННАЯ ПОЧТА // info@artursdev.co.uk
- ТЕЛЕФОН // 07460 162893
- ПРЕДПОЧИТАЕТЕ ОБСУДИТЬ ГОЛОСОМ? // Напишите, чтобы договориться о звонке
- ЛИНКЕДИН // арадионовы ↗
- МЕСТОПОЛОЖЕНИЕ // Барнет, Северный Лондон, Великобритания. Работа с клиентами где угодно.