Discover everything we launched at Webflow Conf 2024
Read post
Blog
How not to design a restaurant website

How not to design a restaurant website

Create a successful restaurant site by avoiding these mistakes.

How not to design a restaurant website

Create a successful restaurant site by avoiding these mistakes.

No items found.
Written by
Jeff Cardello
Jeff Cardello
Jeff Cardello
Jeff Cardello

So you’re going to design a website for a restaurant. This should be easy, right? Much like baking a cake, there’s a right and a wrong way to do things. If you’ve set out to design a restaurant website the wrong way, the recipe is easy to follow.

Use terrible photos

With its differing ingredients, food is one of the most difficult things to take good photos of. Consider a plate of spaghetti — it could be made with hand-crafted pasta milled from organic wheat, topped with a sauce containing the finest heirloom tomatoes. But with bad lighting, the wrong color background, and poor focus — it might look like something straight from a high school cafeteria.And then there's the details. What do you want to highlight in each dish? In my research for this post, I came across quite a few BBQ websites with closeups of knives cutting into meat that look like something from a medical textbook.

Sometimes less detail is better. With a bit of research and practice, an amateur photographer can step up their food-photography game. But if the budget exists, hiring a professional who specializes in food photography is the best way to go.

Along with food photos, a restaurant website needs to have images that capture its ambience. An upscale restaurant could show elegant dishware arranged meticulously on a fine tablecloth, while a pizza place that does a lot of birthday parties might show the games and other things they have to keep kids entertained. Images need to capture the personality of the establishment and appeal to their demographic.

Le Bernardin homepage hero section. The inside of the empty restaurant with fancy table settings, linen cloths, and a flower display in front of a large ocean painting that covers most of the back wall.
It’s apparent from this photo that Le Berardin is swanky. Leave the shorts and flip flops at home — bring your monocle and tophat.
A brown ceramic bowl of ramen showcasing ingredients like a soft-boiled egg, roasted chicken parts, onions, and seaweed.
‍Capturing a dish with liquid — like broth — is tricky. This photo from Nojo Ramen Tavern does a good job showcasing their ramen in this well-plated presentation.

Make your site mobile unfriendly

Everyone obviously wants to take the time to go home, fire up their desktops, and search for the perfect restaurant while suffering the effects of low blood sugar.

Uh, right ...

More people access the internet on mobile than they do on desktop. And deciding where to eat is often spontaneous — if your website isn’t optimized for mobile, you’re losing an opportunity to share your brand effectively.

Following the guidelines of responsive design means we can navigate your site regardless the electronic device we’re using:

  • Use simple navigation
  • Make sure that all of the content, including the menu is easy to access
  • Choose font styles and sizes that are easy to read
  • Make sure that call-to-action buttons — like those for making a reservation — are accessible and easy to use
4 Rivers Smokehouse website pages displayed on 3 different iPhone screens to demonstrate its mobile-friendliness.
‍This design from Mark Malta for the 4 Rivers Smokehouse uses responsive design for enhanced usability.

Make your menu hard to read

To create a terrible menu, use a tiny, impossible-to-read font, and cram everything together without any organization. Then, combine all of this into a PDF and — voila! — you've created a masterpiece of impracticality.

Like any kind of content, a menu needs a logical organization and an eye-pleasing layout. And when a menu exist only as a PDF, search engines can’t scan it and it won’t rank organically in search results. A PDF also adds an extra step for your user — it’s a clumsy setup.

So please! Skip the PDFs and make sure your menu is just one click away.

The menu section of the Little Miss BBQ website.
‍Not only does Little Miss BBQ serve amazing food, but their menu is beautiful in its simplicity.

Use outdated information

The hours have changed. And the phone number. Oh and brunch hasn’t been served since 2005. If you want to fail in creating a good restaurant website, do be sure to use the wrong details to confuse and frustrate potential customers. Because who doesn’t like driving across town to find a restaurant closed, when the website said otherwise?

If you want an effective website, make sure all your information is accurate — stay on top of changes. Your waitstaff, who are tired of explaining to frustrated customers that you no longer serve brunch, will thank you.

The modern web design process

Discover the processes and tools behind high-performing websites in this free ebook.

Download now
The modern web design process

Discover the processes and tools behind high-performing websites in this free ebook.

Download now
Download now

Be hard to find

Let’s get a bit philosophical for a moment. If a tree falls in the forest, does it make a sound? What about if your restaurant is impossible find — does it actually exist? Go ahead and pinch yourself. If you feel a sting, this isn’t a dream! Wake up and make your location a snap to find!

Good websites make their information easy to access. Even better — they embed a Google Map to help us quickly get directions on our mobile device.

If you haven’t already, use Google My Business to verify your business. It’s as simple as putting your pertinent information into the form. It’s possible that someone may have done this already — double check that Google has your current information.

Blossom Restaurant's contact page listing their information and hours beside a google map showing their location.
‍Blossom Restaurant integrates Google Maps alongside other important business details. The button to return to their menu is also a nice touch.

Skip meaningful content

You definitely want to avoid offering any sort of back story that might personalize or set you apart from competition. Right?

Wrong! Great websites tell the story about the people behind the business and what makes it special. Are all your ingredients locally sourced? Was the wood fired pizza oven imported from Italy? Are the recipes taken from your childhood? Tell us what sets you apart! It doesn’t have to be an epic tale — just a brief description that captures the essence of what makes your restaurant unique.

Pizzeria Bianco's About page telling the story behind the pizza with a closeup of a margherita pizza in the hero section.
‍Chris Bianco’s pizza is fantastic, but so is his passion for his craft. This copy tells the story behind the pizza.

Use a weird color scheme

We all know the best way to catch the attention of someone is to bombard them with a palette of bright, contrasting colors. Well, not really — unless annoyance is part of your branding.

Studies show that warmer colors can make people hungry. Deep reds and oranges can stimulate the part of our brains that wants to stuff food into our mouths. Think of all the fast food chains that use red in their branding.

If you’ve ever driven past a McDonald’s, Burger King, or KFC and felt the urge to pull into the drive-through lane, red may have had something to do with it. This isn’t to say that a restaurant should use a solid background of red or orange, but they can be used thoughtfully throughout your layout. And make sure the visual design of your website is consistent with your branding and not so bold it impedes the user experience.

In-N-Out Burger's homepage showing the outside of their restaurant at night. The bright yellow and red neon lights grabbing our attention.
‍In-N-Out uses red — this both a part of their branding and an appetite-stimulating color throughout their website.

Ignore social media

Social media will only lead to interactions with current and potential customers. Gasp!

If you’ve ever had a negative online interaction on social media, I get why you might want to avoid it. But this doesn’t mean you should.

You don’t have to be on every social media outlet, but at least have a presence on Facebook and/or Instagram. It’s an easy way to keep people informed and promote special events. If you have someone on staff who is social media savvy, have them make two or three updates a week with pictures of your food. Or highlighting special events and seasonal menu items.

And while we’re on the subject …

Feed the trolls

A closeup of a smiling, blue-haired troll head in front of a neon green background.

Though not directly related to your website, your social media presence reflects your brand. Social media meltdowns rarely are effective. If someone posts a negative Yelp review, or attacks the authenticity of your desserts, respond in a neutral apologetic tone. You can also take it to private messages. Sitting behind the glow of your computer screen at midnight, defending your food to someone trying to get a rise out of you, does nothing to help — Google Amy’s Baking Company on how not to do social media.

The pen maybe mightier than the sword, but trolls only gain more power the longer a social media battle goes on.

How to design a restaurant website

The visual design and your content should inspire us to visit. And just like the ingredients in a recipe, each parts should be quality. Don’t skimp and use lackluster elements that make for a bland, unappetizing experience.

Did I miss anything? Please share your thoughts in the comments.

Last Updated
January 23, 2018
Category