Guide to Restaurant Website Design

Laduree

Words by Priscilla Nu (Digital product designer & strategist. Co-founder of UNNU).

As smartphone penetration grows, mobile subscription and usage increases, and percentage of Internet user reaches an all-time high. If you have a business, you should have a website. Even if your product cannot be transacted online, many consumers now search for information online before making a purchase or a visit. Your website may be your first chance to create a positive impression.

In part one, we go through the basic considerations when starting a website. In part two, we will talk about ways to create an online presence without breaking the bank.

The Bare Bones of a Restaurant Website

Suppose you have no design agency or designer to help you. A simple informative statement is better than nothing. There is information your customers who are planning a visit need to know, so give it to them. List your contact number (state if you take reservations), opening hours and address. Your website may be “design-less” although I’d argue that a website with no design is a design by nature.

In fact, a website with key information highly visible upon its first load, that seem to say “there you go, see you soon!” beats one with too much clutter where your customers have to hunt high and low just to look for a way to make a reservation.

UNNU

Your website can be a single page. Why not? Posters are typically used to communicate key information. A single webpage conveying key information can be just as informative and memorable, without bursting your budget trying to develop a full-fledged website.

A single page teaser page can be used to raise awareness, create identity, and collect user data such as emails for mailing list, while also conveying key information about your restaurant.

Teaser page

The teaser for Cowritable, used to gather emails before launch.

You can draw inspirations from email campaign designs that are always one-paged by email limitations. You can even reuse your offline collaterals.

Email Invitation

This email invitation by Chef Anahita is good enough to work as a simple single-page website.

It is possible to get free templates from Tumblr and point your domain name to Tumblr temporarily to enjoy free templates and free hosting. However, if you’re running a higher-end establishment, your customers will not be as forgiving. Free templates are limited and users can often recognise ubiquitous free themes. As you’re putting budget into offline collaterals such as business cards, posters, menu, consider setting aside some for the website, which could capture the highest views with the least variable cost.

Identity

You’ve probably decided early on what your restaurant identity is going to be. You may have spent months considering the restaurant color theme, décor, furnishings and materials so that the physical space captures the right mood for your target market. Your website should extend that identity.

L’atelier de Joel Robuchon

L’atelier de Joel Robuchon restaurant series, which first started in Hong Kong in 2006, feature black wood furnishings, dark rosewood counter and red velvet seating. The interior, designed by Pierre Yves Rochon, is basically black, red and stainless steel. Therefore, I’m not surprised to see the same color theme and modern treatment in their website.

Wild Honey

Wild Honey the restaurant is eclectic, friendly and homely. I dare say you do expect that vibe by looking at their website.

McDonald

I sense McDonald’s targeting the kids.

Geogeske

Geogeske website sits you down and brings you food already!

When capturing your requirements for your website, your design agency should consider your restaurant identity. You may be asked questions about décor and materials, color themes, the mood or target market. Questions that may seem unrelated to web design at first, but with the right use of colors, photographs and textures (yes textures), the website experience can be similar to walking into your actual restaurant.

Sell your products and services

Bloodline to every business is their products and services; there are many ways to feature them.

A conventional way is providing a gallery with good photography. Personally, I find this trite and a tiny bit unabashed, especially when the quality of the photographs are not good. Still, you will find that, pictures do speak for themselves and appetizing food photography sells!

Cake Parlour

The Little Cake Parlour is an example of a food website that uses a gallery to showcase its products.

Tip for restaurant website design: Do you know if your restaurant’s food photographs are good enough to stand on its own? Take a look at tastespotting and foodgawker for some good examples.

Farcoast

A subtler way to showcase your product is to infuse food photography into the web design.

Coffee Club Australia

Coffee Club has a clever way of infusing dining experience, product showcase and key message “sustainable and excellent coffee” into their web design.

Another common way is simply providing your restaurant menu for download on your website. However, there are scenarios where it is not advisable to do so, there are also a few dos and don’ts when publishing menu. But, this is another topic for another time.

Mobile Friendly

Flash websites? No. iPhone accounts for more than 70% of mobile usage. If you load a flash site from iPhone or iPad, you’ll see a completely blank page. If you insist on Flash, always develop a simplified HTML version of your site for mobile users. At the very least, include basic content (see part one) so that key information loads even without a flash plugin.

White Rabbit

White Rabbit’s website is highly interactive; the animation and interactivity is achieved through the use of flash. However, loading the website via iPhone Safari loads a blank page. When more and more users are searching for instant information through their phone while on the go, this can be frustrating.

Birrifico irpino

Websites with no flash need not be static, you are able to create flash like websites that are interactive and highly animated with HTML 5. See birrificioirpino.it for a good example for highly animated and interactive website that utilizes HTML5 and loads well on iPhones/iPads.


That’s all for Part 1 of starting a restaurant website! Remember:

• A simple one page webpage is better than nothing.
• Consistent Branding. Offline and Online.
• Sell your food with Subtlety.
• Be friendly to mobile users.

Do include in the comments what other areas of food related online strategies you would like to know. And I will share what I know or do so some research (I’m constantly learning too) and help you as much as I can!

Priscilla is a digital product designer and strategist and the co-founder of UNNU, a creative agency that brings together a network of production and design units that deliver high quality, cost-effective brand communications in digital media. By combining cost-efficient hubs with access to a vast group developers and creative professionals, UNNU offers value, quality, efficiency, and speed-to-market delivery.