Ember & Vine

Overview

Ember & Vine is a made-up modern American restaurant: hardwood coals, seasonal food, craft cocktails. We wrote the brief ourselves to practice the part of the process that matters most, turning one true detail about a business into the design of the whole site.

Every address, price and phone number on it is invented, and it’s labeled as a concept wherever it appears on this site.

The brief we set

Design the whole site around the one thing a guest would remember: the open fire.

The tagline, the palette, the type and the motion all had to come from that hearth, not from a restaurant template.

The look

Charcoal, ember orange and a little vine green. Fraunces for the headlines, Manrope for reading, IBM Plex Mono for hours and prices. Embers drift up through the opening screen, slowly, and stop entirely for anyone who prefers reduced motion.

What we built

• Four pagesHome, menu, experiences and visit, with the fire as the thread through all of them.
• Takeout orderingQuantity steppers, a cart that stays with you from page to page, and a checkout form. It’s a demo: no real order is placed.
• One clear next stepEvery page points to the same main action, reserving a table, so the site never argues with itself.
• Smooth page changesPages fade into one another as you move around, with no framework, and the effect switches off for reduced motion.
• Testing before launchTesting in real browsers caught a squashed section layout and a mobile menu that slid under the header on small phones. Both were fixed before launch.

Result

More like this

Planning a restaurant site? See our restaurant website design page, or our web design in Reading, PA page.