A menu you can move through
Section links wrap into tidy rows on larger screens and become a swipeable strip on a phone, so nothing is cut off and the way to the wine list is never far away.
Upscale restaurant and bar concept
Maren House
A website for a fictional harbor restaurant, laid out with the pace of a printed menu.
Fictional concept project. Maren House is a fictional business. It has no customers, and this is not paying-client work.
01The idea
What the site had to do
People look up a restaurant to answer three questions: what is on tonight, can I get a table, and is it right for the occasion. The design answers the third while the structure answers the first two.
Warm paper, an italic serif and asymmetric columns give it the feel of something printed, and then the page turns dark for the bar.
- Project type
- Fictional concept
- Pages
- Five, plus image credits
- Typefaces
- Cormorant, Manrope
- Built with
- Astro, Tailwind CSS, TypeScript
02Every screen
The same site at three widths
03Design decisions
The choices that shaped it
Reservations on a single panel
Party size, date, seating and time sit together on one panel, and seating options respond to the rules of the room. In this concept it takes no personal details and sends nothing.
A story told in print proportions
Long lines of text are kept narrow and set against large photographs, closer to a magazine feature than an About page.
04Color
Color and quality checks
- Cream#faf6ef
- Paper#f3ede2
- Ink#1e1a16
- Oxblood#5b1e1a
- Brass#a67c3d
05Tested on the local build
- Contrast checked at three widths with no failures
- Full keyboard walk-through with no traps
- Mobile largest paint of 1.2 to 1.4 seconds in a throttled local test
- Motion switches off for visitors who ask for less of it
Photography in the concept is licensed stock.
06Walkthrough
Take a guided look
The working concept isn’t open to the public. If you’d like a closer look, I’ll walk you through it myself.
Request a guided walkthrough