A Detailed Look at Restaurant Web Layout Design Trends

We wrap up some of the current design trends for restaurant websites and share some ideas for your own.

Analyzing trends in web design is a lot like analyzing food platters.

This article will be a detailed look at many of the different trends for restaurant websites. I want to offer some helpful tips for designers who are creating restaurant layouts for clients or custom CMS themes.

Many principles from eCommerce design can be applied to restaurant websites yet there are plenty of differences between the two. Consider all of the typical UI trends that make a great website coupled with a much deeper focus on the following ideas.

Photography that Sells

I mention this first because in relation to restaurant websites photography can make or break everything. When it’s good the photos tend to compliment the whole composition. When it’s bad the site looks unprofessional, off-putting, and just downright unappetizing.

The ability to capture beautiful photography is not as hard as you might think. Even a dedicated high schooler could learn with some practice. Although random selfie photoshoots do help to build experience anybody can learn regardless of age or experience level (or selfie shutter count). If you’re already a designer it’s definitely worth learning about photography. Even starting on a cheap camera is better than never starting at all.

I should point out that close-up product photography, while important, is not the only pillar to this cathedral of great design. If the restaurant doesn’t have a lot of written content you can fill up space with photos from around the venue – exterior shots, bar stools, waitresses in action, chefs at the grill, and of course mustachioed maitre d’s offering fresh hand towels.

Stick to whatever works best for the business and try to keep it all within reason. Too many photos can be distracting but absolutely no photos can appear timid or bland.

5 napkin burger restaurant website photography

There are dozens of great examples but 5 Napkin Burger has a little bit of everything. Their homepage uses many different photos of people enjoying the food & drink. Also the menu page and other related pages utilize similar closeup shots.

Every layout will be different, but great photography will always look similar because it catches your attention and sells the product(or company).

Natural UX Design

Natural user experience design is not a new concept. In fact this idea is older than free 1000 hour AOL discs, but fortunately it’s much more useful. UX design focuses on how users interact with an interface.

When it comes to restaurant websites there are only so many tasks that need to be accomplished. Aside from browsing the food, visitors may also want to find a nearby location, get support from a manager, or perhaps read a little history on the company.

Overall the website should be very simple to navigate. Too many navigation items will create havoc for someone that just wants to check the price of a small pizza. Design from the standpoint of a natural-flowing user experience which focuses on the most important tasks.

which wich sandwich shop navigation menu

I really like the Which Wich navigation, it uses only 3 or 4 primary links along with various sub-links. The sub-navigation will only appear once the visitor is on a subpage.

Also the navigation bar will stay fixed and follow you down while scrolling, but the subnav automatically hides beyond a certain point. Then once you begin scrolling back up it will reappear. Quite a brilliant design technique that’s immeasurably more satisfying than free AOL.

dilly deli restaurant website ux design

A similar design style can be found on Dilly Deli (above) which has the same type of horizontal navbar and clean user interface. You’ll notice another important piece to the UX of the layout is the font size, spacing, and color. People interact with a site much easier when all of the text is comprehensible.

Clear & Simple Menu

People aren’t visiting restaurant websites to gaze at the sophisticated photography or soak up the well-designed layouts. Well maybe sometimes, but most people want to actually purchase and consume the food like vultures (perhaps turkey vultures). As a designer you want to make the ordering process quick and even fun if possible.

My favorite restaurant websites have menus featuring more than just items with prices. It helps to include a brief description, portion sizes, maybe even nutrition facts too.

Some folks may browse to gauge if any items will accommodate their fickle taste buds. Places that offer takeout food should have a very clear-cut menu to settle the oh-so-common unresolved dinner debates.

marie catrib restaurant menu typography design

The menu page from Marie Catrib’s (above) website uses a simple but legible design. Each of the sections are clearly defined by large headers and smaller 2-column layouts. The division between full-length headers and smaller menu items allows for a quick glance across the list.

jim n nicks bbq restaurant website

Jim ‘N Nicks BBQ site (above) has a very similar menu layout. But instead of fitting everything onto one page the sections are listed in a side navigation. Also notice the takeout phone number is promptly available to make it all clear, simple, and delectably satisfying.

Some restaurants prefer to use a PDF document instead of a single menu page. The PDF could be a digital copy of the physical menu or just a retyped listing of the products. Although I’d say most visitors would prefer to have the menu as part of the website. Opening a PDF can be time-consuming on older computers and mobile devices, but it is an alternative to in-page menu design.

A Social Connection

While this may not be an overarching trend, it does create a more personal touch. Social networks like Twitter and Facebook are so common that many frequent visitors would take the time to check out a restaurant page if there’s some incentive (coupons, deals, weekly specials, promotions/giveaways, etc).

But with other networks like Instagram a restaurant chain could display a photo feed in parts of the website. This could be loaded from an official profile page or even from a hashtag search for photos taken in the restaurant. Any type of connection like this builds credibility with new customers by showing that real people do eat at the restaurant.

bertuccis pizza restaurant website homepage

You can see a great example on the Bertucci’s homepage which has a sliding feed of Instagram and Twitter updates. At the bottom of the page you’ll find links to other networks like Pinterest and YouTube.

Limit the number of profile links to whichever networks can be updated on a regular basis. A restaurant could seem like a ghost town if visitors find a Twitter page that hasn’t been updated since 2011.

Common Branding

Once the user interface looks good you should work to improve the actual website design. Branding is a common term which explains the design process through a use of brand identification. The ID could be logos, icons, similar typefaces, colors, patterns, anything that draws attention back to the company.

smokey bones bbq restaurant website branding

Smokey Bones is a delicious BBQ joint with a very creative marketing team. Their branding can be found on many of the physical products like coasters and take-out boxes.

Naturally their website is also well-crafted and follows through with a very similar appeal. The dark background allows room for bright colors to shine in the foreground. Many of the same icons are reused in different parts of the menu to build consistency.

This concept often goes deeper than just branding. You want to recreate a certain mood for visitors to recognize. If you can make a website “feel” like the atmosphere of the actual restaurant then you’ve definitely succeeded.

blue ribbon fried chicken website homepage

A similar yet different approach can be found on Blue Ribbon Fried Chicken. The design is more vibrant and full of panache with lots of shapes, colors, and tones. Text sizes vary from reasonably small to ginormously large. The website seems more like a poster design but still works fine and looks great.

Restaurant websites are both simpler and tougher than other web projects. They’re simpler because the content structure is relatively straightforward and there isn’t a need for large dynamic elements. But the difficulty comes within the design stage of mimetically capturing a restaurant in a manner that’s exuberant and true-to-self.

These trends are the most common recurring elements I’ve found in great restaurant websites. Among the many bad examples it can be a relief to find so many well-crafted pieces of digital work.


Featured image: wujekspeed