The Beginner's Guide to Restaurant Website Design

Over 80% of restaurant-goersvisit a restaurant’s websitebefore making a reservation or adding it to their “must try” list.Your restaurant’s website is essentially your first impression on potential guests. Your overall website layout, menu, photography and online reservation system need tomake yourrestaurantstand out from the competition.Butwhat separates the great restaurant websites from the forgettable ones?The answer is theuser experience (UX) design.你可以有大量的设计原则apply when building your first website — or revamping your existing one — that help make your site one that visitors love. That’s why we’ve put together a list of some great restaurant websites and included the UX design principles that make them so effective.

1. Vallier Bistro

Montreal’sVallier Bistrois a great place to start. First, let’s look at how they organized their layout.Here, they’re applying a UX principle known as theserial position effect. This principle affirms thatthe most important user actionsshould be placed to the far left or right.In this case, it brings attention to the menu, about page, photo gallery, and contact information.

2. Cafe Propositio

Brazil’sCafe Proposito(“coffee with a purpose”) is a 100% vegan cafe. Their website does an excellent job applying two UX principles that tend to work hand-in-hand, thelaw of common region and the law of proximity.Thelaw of common regionbasically states thatwebsite content is interpreted by website visitors as part of a group when it shares the same physical area, and that area is separated by a clearly defined boundary.This rule is important because it makes your website content far more “scannable”, meaning that site visitors can understand the content at a glance (if you understand Portuguese, of course).Thelaw of proximity州content and objects (photos, icons, words, and buttons) that are close to one another tend to be grouped together by website visitors.This law is incredibly useful when you approach organizing your website’s content. Group related content together to signify to your site visitors that they’re related. It enables them to easily scan your site’s content.

3. Mikoto

Located in Stuttgart, Germany, Japanese restaurantMikotoalso uses the law of common region and the law of proximity to their advantage. But one thing they feature a lot more prominently is beautiful, high-resolution food photography.While a poorly-executed photo can have an adverse effect, great photos can increase sales of that item byas much as 30%. So if you’re going to use a photo, consider using them wisely and feature the dishes you want to draw the most attention to (i.e. the dishes on your menu with thehighest profit margins).

4. Bar à Beurre

Montreal’sBar à Beurreuses a carousel of images as their website’s central element. But what inspired that design decision?The UXLaw of Prägnanz州the human eye likes to simplify anything it processes to prevent us from being overwhelmed with information. Which is exactly why we assume Bar a Beurre used this approach to crate a clean, simple website design.

1. The clean white background makes the images pop in contrast.
2. That balance prevents over-saturating website visitors with information.

Another UX rule that BaràBeurre certainly applied isOccam’s razor, which states that you shouldkeep the information you show on your website to a bare minimum. Make sure thateverythingyou include on your site is useful. This helps you keep the emphasis on what really matters. In this case, it’s the product photography.

5. H Cafe

Similar to Bar à Beurre, Los Angeles hotspotH Cafeuses the Law of Prägnanz andOccam’s razor to achieve a simple, minimal, and easy-to-browse website. But if we dive deeper, they’re also applying theserial position effectandhigh-resolution food photography.As we mentioned earlier, the serial position effect claims thatyour website should put the most important user actions to the far left or right. Their navigation bar is on the top-right, and it contains the most important information: their menu and their contact information. Bonus, they use a design that displays well on smartphone apps.

Restaurant web design: putting it all together

One of the consistent similarities between each of the examples above is that the information layout was planned to maximize the website’s usability. In their own way, they all achieve that.And that’s what’s great about UX design. It’s a set of principles that guide your design while still giving you a lot of freedom to express your brand.

Those principles help structure your web design and assure that it is intuitive to explore and guides site visitors to the right information.As long as you keep your website’s usability at the core of your design, you’ll build something that’s appreciated by your customers and increases your restaurant’s credibility. Remember, over 80% of restaurant-goersvisit a restaurant’s websitebefore making a reservation.

Use UX design to assure that your first impression online is a great one.

For more information on the principles of UX design visitLawsofUX.com.