A while ago, I was approached by .net magazine to contribute to their web design build-off section.

In the build-off, they give a general short breif to 3 designers and then publish their designs along with a short one page explination of that design. In this case the theme was restaurant websites and you can see my outcome below.

restaurant website featured in .net magazine

in the printed magazine

And the finished layout.

restaurant website design example

my design for the restaurant build-off

And here’s the reasoning behind it.

The technical stuff

Before I started work on the graphics, it was important to sort out the technical restrictions first.

Focus on mobile

I think now-days it’s very important for restaurant websites to focus on mobile traffic. Not only because it’s one of the fastest growing markets, but also because there are so many user case scenarios where someone would just take their phone to check for example if a place is open, to check the address, make a reservation, see what’s new on the menu and so on.

If the budget is tight, this doesn’t mean a separate website from the main one, a truly responsive design, or even developing a native app (which would be a bit silly for most restaurants). There are so many small things that can be done to improve the experience of anyone who’s viewing your website from a mobile phone or tablet.

Here are some of them:

  • feels a bit odd to say this in 2013, but don’t use Flash. There are still way too many restaurant/diners/cafe websites out there that are full-flash or have some sections in flash. So why is it bad? Flash doesn’t work on any Apple mobile device, so no iPhones, iPads, iPods. It has also been discontinued on Android and it doesn’t work on Windows either. So that’s basically the whole mobile market.
  • keep the code nice and light, make sure it loads quickly and doesn’t use too many http requests (use sprites, merge css files, optimize js files).
  • no background music or other big files that take ages to load and just add to the “experience” – i.e. non-essential content.
  • make the navigation, buttons, forms and other interactive targets easy to tap. I usually add some extra padding and display:block or inline-block to help with this.
  • keep the content simple and easy to scan, use white-space wisely and don’t add to many facebook widgets, social buttons, pop-ups or other distracting content.

The Content

Here is some of the content I’ve decided to include and why.

Contact Info

The phone number should be nice ane big, on the home page and every other page. Also don’t forget to include the opening hours. This makes it easy for customers to find the info they really need most of the time.

Address

I’ve the address on the website, making sure it’s in text form and not an image, so it’s easy to copy/paste in emails, texts, Google Maps. Speaking of Google Maps (or Bing maps if you prefer), either include a link to it under the address or embed the maps in the contact page.

Multiple Languages

If you operate in a busy tourist town (like Amsterdam), having a small Google Translate Widget or an english version (or whatever language is more popular with tourists) of the website is a good idea.

Photos

There are entire libraries of books written about food photography. And indoor low-light photography is notoriously difficult (and requires lots of equipment like lighting, flashes, reflectors and all that). So it’s not surprising that so many photos on restaurant websites are really terrible.

My suggestion would be to hire a real photographer for a day or two to take some professional photos that can be used for years to come on the restaurant website, on menus, on christmas cards, napkins, on review websites and so on, so it’s really a good investment.

Failing that, using some carefully chosen stock photos like I did in this layout should do fine.

Reviews

Review websites are pretty popular with restaurant goers, so if the restaurant has a profile on sites like yelp, urbanspoon, zagat, tripadvisor, adding some of those reviews or the total review score on the website is a good idea (if the score is good of course…).

Other Info

The menu. A section dedicated to the current menu makes good sense on a restaurant website.

About us, our story, our history. Some details about the building, the owners, the chef, the restaurant philosophy and other interesting bits.

The Style

big2

This concept is for a fictional restaurant, so sorry, you can’t book a table here :). For this assignment I decided to come up with a small restaurant, with an organic/eco/frenchy/fresh menu, similar to some I often go to.

To translate that vibe in the design, I’ve used lots of textures that look a bit worn out in places (organic) and added some bits of parsley leaves (fresh). I used a neutral, earthy background color to play off the eco theme and also make the colors pop and look more vibrant, especially the green and red.

text2

The main font is Caecilia, a slab-serif. Slab-serif fonts are are quite popular these days in the food world (just look at Martha and this one and this…).

This particular font has that nice vibe of tradition, homeliness and modern at the same time, so that made it the perfect choice for this project. It’s also a @font-face font so that means no images for headlines, which means faster loading, it’s easier to change the text and has improved readability on hi-res screens (like the iPad retina).

And I guess that about wraps it up!