Restaurant website design prompt

Somebody on a restaurant website is usually deciding where to eat in the next forty minutes. They need four facts: whether you are open, where you are, what you serve, and how to get a table. A hero photograph of a plated dish answers none of them.

So the restaurant page is the only one in this set whose first screen is mostly plain text. Today's hours, written as a sentence and computed from the real schedule, then the street address, then a call button and a booking button.

Short verdict: ratio 1.125 from a 15px root, a 6px spacing grid, #8C2E22 on cream at 7.71:1, two curves, and the menu rendered as HTML. The Thanor library publishes designs written to that standard.

The question above the fold#

Design the first screen for a phone held in one hand at seven in the evening. That situation forgives nothing, and it settles five decisions that a desktop mock up leaves open.

• Today's hours as a sentence, not a table. Open until 11pm or Closed today, open tomorrow from noon, computed from the schedule, set at 17px. A seven row table makes the reader find today's row themselves, which is work the page can do for them.
• The address as text, at 17px, with the postcode on its own line, and the whole block a link to a map. Not an embedded map iframe, which loads slowly and scrolls the page hostage on a phone.
• The phone number as a real tel: link. A number that cannot be tapped is a number somebody types wrong.
• Two buttons, side by side, 48px tall, Book a table and Call. Booking first when you take bookings, Call first when you do not.
• One line of what kind of food it is. Six words, no adjectives that could describe any restaurant.

Then the menu, and this is where most restaurant sites fail outright. The menu belongs in the page as HTML. A PDF opens as a download, zooms to an unreadable width, cannot be searched by somebody scanning for one dish, and hides every allergen line from anything reading the page on a diner's behalf. A menu that takes three taps to reach is a menu nobody read before choosing somewhere else.

A menu page also has the densest type hierarchy of any page in these ten, which is what drives the ratio in the next section.

Nine roles on a menu#

Ratio 1.125, the major second, from a 15px root. A menu forces the tightest ratio in these ten: nine text roles coexist in one scrolling page, and a wider ratio makes a course heading shout at the dish under it.

Prices sit at step 1, in tabular figures, right aligned on a leader line. A price larger than the dish reads as the point of the dish.

Spacing is a six point grid: 6, 12, 18, 24, 36, 48, 72, 96. Section padding 72px, 48px, 32px. Menu rows sit 18px apart and courses 48px apart, and that 48px is the only signal that a new course has started.

Ink on the field measures 14.91:1, and the accent carries paper coloured text, so the booking button is legible at 17px.

Two curves and a sticky bar#

Two curves, and the total amount of motion on the page is smaller than on any other specification in this set.

--ease-settle: cubic-bezier(0.32, 0.72, 0, 1);  /* 380ms */
--ease-bar:    cubic-bezier(0.4, 0.14, 0.3, 1); /* 220ms */

--ease-settle at 380ms drives the only entrance on the page: the three room photographs, 12px up with opacity, once, at 25% of the viewport, 90ms stagger. Nothing else enters. A person deciding where to eat in ten minutes reads a reveal sequence as a page that is not ready.

--ease-bar at 220ms runs the one piece of interface worth building: a sticky bar that slides up from the bottom edge on a phone once the reader passes 560px of scroll, holding the booking button and the phone number, 56px tall, and never covering a menu price.

Three refusals, each one a thing a generated restaurant page does by default:

• No full screen hero video of a kitchen. It delays the hours line, and on cellular it delays everything.
• No parallax on food photography. A dish that drifts as you scroll is harder to look at, and looking at it is the entire purpose.
• No reveal on the menu itself. Menu rows appear at full opacity, immediately, because somebody is scanning for one word.

The order, and the six facts#

Six blocks, and the order follows the sequence of questions rather than the sequence of a brand story.

1. The facts. Name at step 8, the hours sentence, the address, two buttons, six words on the kind of food. Total copy under 40 words.
2. The menu, in full. Courses at step 4, dishes at step 2, descriptions and allergens at step 0, prices at step 1 on leader lines. No images inside the menu, because a photograph next to one dish sells that dish and buries the nine around it.
3. The room. Three photographs, 4:3, of the room rather than the food: a person choosing a restaurant is choosing an evening.
4. Booking. The widget, or the phone number at step 7 when there is no widget. One block, no alternatives offered.
5. Hours and directions. Now the seven row table, the full address, transport and parking, and a static map image that links out.
6. The story. Last, short, and genuinely last. Nobody choosing dinner needs the history of the building before the menu.

Two rows in that list fight the instinct of anybody who has looked at restaurant sites lately. The menu at position two, ahead of the photography, because the second question after are you open is what do you serve and a gallery answers neither. And the room rather than the plates, because a person choosing where to eat is choosing two hours of their evening, not one course.

The story belongs at the bottom for the same reason an About section belongs off a landing page's critical path: it is read by people who have already decided, and it costs the undecided a scroll. The same logic puts a hotel's story under its rates.

The verdict on a restaurant brief#

Hours as a computed sentence, a tappable phone number, the menu as HTML with prices on leader lines, three photographs of the room, and a sticky booking bar after 560px. Those five carry the page. The type ladder and the palette make it look like the restaurant, and Thanor exists so that part is already decided.

The brief to paste#

Build a restaurant site, phone first.

TYPE: ratio 1.125 from a 15px root: 15, 17, 19, 21, 24, 27, 30, 34, 38.
Descriptions 15/22, body and prices 17/26, dish names 19/26 weight 500,
courses 24/30, section headings 30/36, restaurant name 38/42.

SPACE: 6, 12, 18, 24, 36, 48, 72, 96. Section padding 72 / 48 / 32. Menu
rows 18px apart, courses 48px apart.

COLOUR: paper #FBF6EC, field #EFE4D2, ink #16110C, muted #6B5B47, accent
#8C2E22 carrying paper coloured text.

FIRST SCREEN: name, today's hours computed as a sentence, street address
linking to a map, tel: link, two 48px buttons reading Book a table and
Call, one six word line on the food. Under 40 words total. No hero image.

MENU: rendered as HTML, never a PDF. Prices at 17px in tabular figures,
right aligned on leader dots. No photographs inside the menu.

MOTION: cubic-bezier(0.32, 0.72, 0, 1) 380ms, 12px up, on the three room
photographs only, once at 25% of viewport, 90ms stagger. Sticky bottom
bar 56px tall on cubic-bezier(0.4, 0.14, 0.3, 1) 220ms after 560px of
scroll. No hero video, no parallax, no reveal on menu rows.

ORDER: facts / full menu / three 4:3 photographs of the room / booking /
hours table, directions, static map / the story, last and short.

Swap the cuisine and the colours, keep the numbers. Browse the Thanor library to see the same specification written for a dozen different rooms.