Juicy Web Design Trends For Restaurant Menu Pages

We’ve all seen terrible restaurant websites. They really put a damper on the food and make a high-class eatery seem downright cheap.

But designing a great restaurant site isn’t all that hard. In the past, we’ve covered great restaurant sites including some tips and a small inspiration gallery. Looking over other sites can help you get ideas for your own.

And there’s one specific page on a restaurant website that really matters: the menu.

This is where most potential patrons go to check out what’s available, how much stuff costs, and what they might order. This page is especially valuable if the restaurant offers take-out because you might make or break a sale just based on the usability of this menu page.

Below I’ll cover some practical tips you can apply to any menu page design. I’ll include plenty of great examples that you can study and some inspiration to help you get started on the right track for a clean & usable menu page layout.

Related reading: WordPress Plugins for Restaurants

Organize Dishes By Type

This might seem obvious but I’ve seen far too many single-page menus that really should be split into categories.

Always try to organize menu pages based on the dish. This means you have a section for appetizers, steaks, salads, whatever. Each restaurant has a different menu but there’s often room for categorized dishes.

If your menu is very small this may not be worthwhile. Or if your menu is really large you might even create separate pages for each category.

As one example check out the Pho Cafe webpage. This includes separate links to desserts, salads, vegan meals, everything.

This all loads on the same page so you get the exact same UI. It’s just a nicer way of browsing contents without having to manually scroll.

Visitors appreciate this for larger menus where some people may only be looking to order specific dishes.

Another great example is this page from Tonga.

All of the category links dynamically load content via Ajax. This gives the page a sleeker feel where people can browse through menu items quickly.

Also notice how all of these buttons and links are clearly visible on the page. That means you can quickly tell what’s clickable and what’s just there for show.

You want to create categories that visitors want to click through. Try using a matching color that blends well with the page, yet also stands out against the background.

One more example I want to share is Biera.

The homepage basically is their menu page, as it’s all one flowing UI. But you’ll notice as you scroll through the menu there’s a fixed category UI along the sidebar.

This way you can quickly jump between sections to access different dishes from each category.

A very modern approach to UI organization and it makes the menu feel far more dynamic. If you can work with a vertical menu this is definitely a nice option.

Print Menu Structure On The Web

When you sit down at a restaurant you typically expect the menu to look a certain way.

Every restaurant is different, but most print menus are vertically aligned with dishes organized into sections. Would you believe this layout also works on the web?

Take a peek at this menu page from Maialino’s website. The menu is super clean and when you scroll it feels like a real print menu.

Each item is organized into a category spaced vertically down the page. The line items represent menus with prices aligned to the right-hand side.

Even the fonts feel very menu-like which is often a case of clean serif text.

Now Earls has a similar menu page but this one aligns more horizontally.

Each item breaks down into a grid system where the categories split up vertically, but the menu items align horizontally in a grid.

Best of all you can browse this layout with ease on any device. Just one more reason to go with this kind of menu page: it’s super easy to make it responsive for desktop and mobile.

So let’s take the category setup and the print menu design and combine them together. What would we have?

Something like this page from Kyirisan’s website.

Each dish runs vertically down the page but they’re also split into sections with clearly labeled category links. It all loads dynamically too and it’s got a super clean animation style.

If you’re in doubt of how to style your menu page just take a look at a print menu. That’ll be a great source of inspiration.

Clean & Minimalist Often Wins

Let’s say you just aren’t sure which colors to match, or which patterns to add, or if you should add graphics or lots of extra features.

What do you do?

I always suggest going back to the basics: keep it minimalist.

Here’s a menu page on The Flying Pig that takes this advice to heart.

The main website design is pretty cool and features a vertical fixed navigation off to the side.

But just look at the list of dishes and the menu itself. You’ll notice it’s got a few hallmarks:

• One font style
• White background, dark text
• Basically nothing else

When visitors just want to consume information it’s hard to go wrong with a minimalist design.

In this type of layout you don’t often leave room for photos or extra graphics but that can be ok if you’re working with plenty of white space and designing on a clear grid system.

But it’s also OK to invert the colors and do a dark BG for the page. Pourhouse Vancouver is one nice example.

You’ll notice the text is still easy to read and even skim at a glance. The page feels very minimalist even though you do find some graphics near the main header.

Ultimately people just care about the dishes inside the menu. That’s where your focus should be and that’s where minimalist design really shines.

Now if you do want to include graphics you can absolutely merge these two ideas. Minimalism doesn’t always mean plain typography with nothing else.

Take a peek at Melt’d Subs and scroll through their menu page. It feels incredibly minimalist yet it also pops with colors and graphics throughout.

Great typography, clean layout, and it’s fully responsive. This is what I’d call a kick-ass restaurant menu page.

The headings use small icons to catch your attention while scrolling which is a very nuanced feature. But those kinds of features often do well in minimalist designs, and it’s one of the main sticking points you should think about.

Each project will be different so try to find a design style that meshes nicely with the restaurant you’re working on.

Generally speaking, though, minimalist principles can always sneak their way in.

Include Plenty Of Photos

So far I’ve only shown examples of restaurant sites without photos.

This is primarily the norm for smaller local businesses or smaller chains that don’t have much of a budget to hire a food photographer.

Although if you can convince the restaurant owner to try hiring a photographer it will make a huge difference. Photos and visuals tend to sell much faster than words. So if there’s any page of a site that should have photos, it’s the menu page.

Take a gander at the Smokey Bones menu page. Each category has its own thumbnails to help you pick and choose what to look through.

If we click onto an inner page you’ll notice the dishes themselves don’t have images, but the heading does.

For example the BBQ page just lists items off their BBQ menu. No images directly next to each dish, but a larger hero header still grabs your attention. That’s the power of great food photos.

For something a little more detailed we can look into Ruby Tuesday since they’ve got a nice menu page full of photos.

As you browse through each dish you’ll notice there’s a small thumbnail next to each one. Sometimes this is all you need to improve usability.

People just want to see what they’re ordering and that goes double for online orders. Why not include a small picture next to each dish?

It will take some time to capture the photos but I feel the end result always looks better this way. And it’s one reason that larger chains do make the time for great food photography.

Let’s take another example like Olive Garden and browse through their menu.

Every dish includes a tasty thumbnail and you can even see a larger picture on the main dish page.

Again, people are mostly visual creatures who can consume visuals more than text. It’s not good or bad, it just kinda “is”. And it’s important to know what you’re targeting when you’re designing a page.

If you can’t get photos then don’t worry. It’s not a huge loss if you only have one or two throughout the website.

But I feel that almost every menu page can be improved with high-quality images of the finished dishes.

Descriptions To Clarify Each Dish

While this may not be a design tip specifically, it does relate to the layout and I think this is really crucial.

If you’re designing a restaurant’s menu page encourage the business owner to offer some descriptions about each dish. Even just one sentence listing all the ingredients.

These little descriptions help to pad out the page to make it flow better, and they give visitors far more information about the food they’re ordering. All good things.

The Brewsters menu page features some lengthy descriptions right after the dish name. The layout uses bold text for the dishes, then a separator followed by the description.

This pattern is easy to pick up so most people will learn to scan the menu at a glance to see what they want. Awesome design choice if you can pull it off well.

And remember that these descriptions shouldn’t be too long. Rather just long enough to give visitors an idea of what’s in the dish, how it’s prepared, and whether they’d like it or not.

Let’s have a look at another example on this page from Col’cacchio.

Along with all the item descriptions we also find small icons next to each dish. These represent specialty recipes with features like vegan & gluten free meals.

In fact, right at the top of the page you’ll find a key for what all those icons mean. Now that’s useful!

The goal of a design is to ultimately help the user do whatever they want to do. In a menu page they’re trying to see what the restaurant offers, how much it costs, and whether or not they’d want to order any of the food.

Little descriptions always help and so do these kinds of icons.

You could take the extra step to include calories and nutrition facts, but if you’re low on space those are best served on a separate page for each dish.

I think another crucial part of the design is to clearly distinguish the dish names from their descriptions. This just makes browsing a whole lot easier.

Looking at this page from the Café De Olla website it should be clear that the red text highlights each dish name.

So you can quickly scroll through and look for a dish that sounds appetizing. Then once you find that you can choose to read the description or not. Clever!

If you can find a way to properly work in white space while emphasizing dish names you’ll have a much easier time designing around little descriptions for each meal.

Wrapping Up

The perfect menu page is rarely one with flashy videos and custom graphics. All you really need is raw information organized in an easy-to-read manner, and maybe some photos if you can get ‘em.

But words don’t always help. Sometimes you want to see examples and design your ideas around those.

Hopefully the examples in this post give you more than enough to get started on your own menu page. And if you have other suggestions or design trends from your own projects feel free to share them in the comments below.