Działający prototypRestauracjeFikcyjna firma · London

Przykładowa strona restauracji z menu i rezerwacją

Elegancka strona restauracji z czytelnym menu, panelem rezerwacji stolika i koszykiem zamówień — projektowana najpierw na telefon.

Otwórz demo na żywo Wypróbuj na tej stronie

1440×900 · 50%

Otwórz demo

Screenshot of Saffron & Vine (Restaurant Website Demo with Menu & Booking)

Wczytywanie podglądu…

Podoba Ci się ten układ? Zbuduj własną stronę za darmo — z Twoimi zdjęciami, cenami i rezerwacjami, w jednym pliku.

Wyślij przez WhatsApp

iPrototyp fikcyjnej firmy. Saffron & Vine, jej ludzie, ceny, opinie i dane kontaktowe są zmyślone; formularze są symulowane i niczego nie wysyłają. Numery telefonów pochodzą z puli zarezerwowanej przez Ofcom.

Kontekst branży

Problem, który bada ten koncept

Strony restauracji często chowają menu w PDF-ie i odsyłają rezerwację na cudzą stronę. Na telefonie oznacza to powiększanie palcami i wyjście — dokładnie odwrotnie, niż chce głodny gość.

Saffron & Vine testuje redakcyjny design skupiony na jedzeniu. Menu to prawdziwy HTML ułożony według dań, obok jest panel rezerwacji, a koszyk pokazuje odbiór i dostawę. Wszystkie dania i ceny są przykładowe.

Gość restauracji chce trzech rzeczy: menu, stolika i dojazdu. Te koncepcje umieszczają czytelne menu, rezerwację i koszyk zamówień w jednym przewinięciu — projektowane najpierw na telefon, bo tam odbywa się większość wyszukiwań restauracji.

Pokazane funkcje

Menu HTML według dań
Od przystawek po napoje, czytelne na każdym telefonie i widoczne dla wyszukiwarek.
Panel rezerwacji stolika
Data, godzina i liczba osób w jednym zwartym formularzu (symulacja).
Koszyk zamówień
Dodaj dania i zobacz sumę dla odbioru lub dostawy (symulacja).
Nagrania z kuchni
Prezentacja sali i kuchni sterowana przewijaniem buduje nastrój.

Dobre praktyki

Czego potrzebuje świetna strona: Restauracje

Pełny poradnik: Restauracje

Menu jako tekst, nie PDFMenu w HTML jest czytelne na telefonie i widoczne dla wyszukiwarek.
Rezerwacja stolika jednym dotknięciemData, godzina i liczba osób — krótko albo bezpośredni link do używanego systemu rezerwacji.
Zamówienia z odbiorem lub dostawąJeśli to oferujesz, pokaż wyraźnie; jeśli korzystasz z platformy, podlinkuj ją czytelnie.
Godziny, adres i mapaNajczęściej sprawdzane informacje na każdej stronie restauracji.

Zrzuty responsywne

Komputer i telefon, uchwycone z działającej strony.

Saffron & Vine demo, desktop view, video showcase section — Komputer · prezentacja

Saffron & Vine demo, desktop view, services section — Komputer · sekcje treści

Saffron & Vine demo, mobile view — Telefon · 390 px

Technologia

Jak powstaje ta strona

Strona jest generowana na żądanie przez silnik szablonów z kilku parametrów — szablonu, nazwy firmy, miasta i telefonu. Nie ma osobnej kompilacji ani rekordu w bazie dla każdej strony.

Czytaj studium silnika

Szablon: restaurant
Technologie: Silnik szablonów (czysty JavaScript) · Cloudflare Workers · Proxy obrazów i wideo na brzegu sieci · Ruch CSS sterowany przewijaniem
Animacja: Żywa mozaika
Renderowanie: Na brzegu sieci, na żądanie
Media: Licencjonowane wideo przez dozwolony serwer pośredniczący
Formularze: Symulowane — nic nie jest wysyłane
Indeksowanie: Strony dem nie są indeksowane