Design process
|
Apr 6, 2017

What you need to build a restaurant website

Want the perfect recipe for building a beautiful, performant restaurant website? The secret ingredient is process.
In the kitchen the food sizzles. The clink of silverware and the chatter of conversation fill the dining room. This place is hopping. From the floorplan to the the menu, the owners have put tons of thought into the details of this physical space.

Their website deserves no less attention to detail. Whether it’s a new restaurant or a neighborhood mainstay, it needs a website to get more customers in the front door. Here’s how to ensure you’re building a website that brings in new customers in droves.

Know the clientele

Get to know your client’s clientele so you can design a site to grab their attention.

A great restaurant website starts with the answer to one simple question: Who wants to eat there?

A four-star steakhouse appeals to a much different demographic than an ice cream parlor. And that difference should influence every decision you make, from colors to fonts, all the way to the overall layout.

A restaurant that specializes in fine dining calls for a more elegant aesthetic (unless they’re bucking that trend). It wouldn't be off-brand to use a stylized font that evokes sophistication set against a background of dark brown or black. An ice cream parlor, on the other hand, begs for a fun look packed with bright, ebullient colors and bold fonts as delightful as the frozen treats they serve.

But knowing your audience goes deeper than visual choices. You also want to know the technologies they turn to when they’re not sure where to eat: If they’re Yelpers, you’ll want to highlight Yelp reviews. If they book every meal with OpenTable, you’re going to need that integration. And if they’re not big on either, there may be no need to add those bells and whistles.

Ditto for the voice, tone, and angle of your content too. A Michelin-starred restaurant requires an entirely different tone, and even approach to meal descriptions, than our ice cream parlor. “Visit us after the game!” could be a winner for a pizza place — maybe not so much for a greasy spoon.

Remember, design isn’t just about how it looks, but also (and more importantly) how it works. And your audience should be key to every element of how it works too.

Keep it simple

‍Just like a recipe, some of the best websites only have a few basic components.
“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”

–Antoine de Saint-Exupery

Whether you’re a small cafe or a world-famous restaurant, you need to keep your website’s content to a minimum.

Hunger is an immediate human need. When it isn't fulfilled, we get cranky. The best cure for low blood sugar and the “hanger” it summons up is food. ASAP. You don’t want your site to get in the way of that.

When someone is looking at your restaurant website, chances are they’re hungry. They may not have the patience to wade through lengthy descriptions and multiple navigational options.

A restaurant website needs these basic parts:

  1. Menu
  2. Phone number
  3. Location
  4. Hours of operation
  5. Booking info
  6. Information about special events

And really, that’s about it. Other elements might be nice, but the list above describes the core of what visitors to your restaurant website are looking for.

Many restaurants give you the option to book a reservation online. Unless you have someone (or some app) dedicated to handling those requests, this is a feature you’ll want to avoid, instead encouraging people to call in with their reservation requests.

Totto Ramen keeps their navigation simple with just three options: locations, menu, and news.

Use high-quality photos

‍Quince uses well-composed, artistic photography to capture the elegant details of their famous dishes.

Eating immerses us in a multisensory experience. A steaming bowl of noodles entices us with its aroma and the different colors of vegetables floating in its broth.

Even the most beautiful photo can’t capture that. But a bad photo can make this otherwise tasty bowl of soup look as appetizing as dirty laundry water.

Unfortunately, it's hard to make food look good in photos. There are photographers who specialize in this. So if you have the budget, hire a professional. If not, use photos sparingly and let the ingredients/descriptions tell the story of each dish.

You may want to scatter a few other types of photos throughout the page. Action shots help give customers a glimpse behind the scenes. Capturing a chef rolling out pasta, a baker frosting a cake, or a bartender shaking up a fancy cocktail shows the quality and care that your chefs take in their work. And it shows what’s most important: the people who make your restaurant a success.

Another huge part of a restaurant's identity is its ambience. Is your restaurant a place where people gather to socialize after work, or is it an intimate bistro where a couple would want to go for a quiet romantic dinner? Conveying the restaurant’s atmosphere will let people know if this is the type of place they’re in the mood for.

‍Nopa tells us exactly what type of restaurant they are through text and this hero image.

Write a concise but appetizing menu — and publish it in HTML (not PDF)

‍Providence’s online menu speaks directly to your stomach with its simplicity.

Your menu must be to the point. Lengthy descriptions packed with adjectives can leave a bad taste in the reader’s mouth — much like too much cilantro in a dish. Let the list of ingredients be the poetry of the dishes you create.

But don’t skimp on the descriptive language for your dishes’ names. Nobody’s too excited by a cheese pizza. But an “organic, woodfired, 4-cheese pizza?” Now that sounds good.

Be sure to logically organize your dishes by breakfast, lunch, dinner, etc. If you serve gluten-free or vegetarian options, point that out.

Also, any sort of seasonal or holiday menus you have should be posted and updated regularly. Having a Valentine’s menu still up in June makes a bad impression on anyone landing on your website.

Oh, and for the love of all things holy: Don’t. Publish. Your menu. As a PDF.

Build the site on a responsive design platform

Responsive design helps create a uniform experience for everyone, regardless of device.

No matter how someone gets to your website, they should enjoy a consistent experience, no matter what device they’re using.

This is especially important for a restaurant. People often decide where to eat spontaneously, or while on the move.

We’ve all been there: you roll by the restaurant you’ve been craving only to be greeted by a monumental line. What else is in the area? We whip out our phones and start searching.

If someone finds your restaurant on a mobile device and they can’t navigate it easily, they’ll most likely end up dining somewhere else.

Want to learn more about responsive design? Check out our “Responsive web design tricks and tips.”

Set up social media

If you haven't set up social media accounts for your restaurant, launching a new website gives you a great excuse to get this done.

You don’t need a presence on every social media channel out there, but you’ll want a few. Most restaurants have a Facebook Page, and many are on Instagram. These give you a great way to promote specials, connect with your customers, and highlight what’s happening at your restaurant now. This is especially handy if you’re one of the growing numbers of restaurant that switch up the menu daily.

Social media and your website should work symbiotically, creating rewarding behavioral loops. Promote your website on social media and use the website to send people to your social media pages. People sharing content like photos of food and commenting on a restaurant’s posts will help give it more visibility, resulting in more likes and more potential customers. Word of mouth is great — but social media buzz travels further, faster.

And don’t leave review-centric sites like Yelp out of your networking activities. By monitoring sites like this, you can quickly respond to upset customers, see what people are saying about your latest menu additions, and more.

Get serious about (local) SEO

If you’ve ever googled “restaurants near me,” you know what an important role search plays in people’s decision-making about food. So make sure you’re using your restaurant’s key terms (i.e., the words you’d use to describe your restaurant) in vital places like page titles, H1s, and regularly in body copy.  

You’ll also definitely want to make sure you’re set up on Google My Business so you can ensure your restaurant looks its best on Google.  

Combine — and add heaping helpings of creativity

What a person sees on landing on a restaurant's website is as important as what they see when they pop in the physical front door.

Don't let an outdated website undermine all the hard work that goes into running a restaurant. Communicate what people will find inside, the flavors they'll experience, and show them to their seat at the table.

Want to kickstart your restaurant website design process?

Our template marketplace boasts several popular restaurant website templates you can use to inspire or speed up your web design process. Here are 3 of the most popular: 

1. Ferrano

Ferrano CMS restaurant website template
Super classy — and not just for Italian joints.

Ferrano was handcrafted with Webflow CMS to make adding, updating, and changing menus fast and easy for busy restauranteurs. It also boasts plenty of room for all those gorgeously composed plates your chefs are making, including a responsive slider!

2. Easy Times

Easy Times cafe and restaurant website template
Gotta love that pun in the homepage hero slide!

Easy Times also boasts full CMS capabilities to make updating your menu easier, and adds a simple reservation form to help get people in the seats.

3. Zooshi

Zooshi restaurant website template

If you're looking for something spare, minimal, and with plenty of whitespace — to perfectly suit a sushi restaurant! — and don't need a CMS, Zooshi could be just the thing.

Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.
Jeff Cardello

Writer, improviser, and reformed music snob. Check me out @JCardello.

What's Webflow?

It’s a web design tool, CMS, and hosting platform in one.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Related Articles
Freelancing
Apr 24, 2017
5 signs you’re in a bad relationship (with a client)
Here’s what to look out for before you decide it’s time to move on. Plus some thoughts on how to end the relationship right.
Design process
Apr 18, 2017
Everyone’s a designer: how to collaborate smarter
Colleagues, collaborators, clients, and stakeholders can all have valuable design input. Here’s how to encourage and manage non-designer feedback.
Freelancing
Apr 13, 2017
3 ways to design a safer, more productive home office
Creativity needs a safe, organized space to flourish. Check out three simple but effective ways to improve your at-home workspace.
Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.