Subconscious Design: What goes into designing restaurant websites
Design principles are one of the first things taught early on in any basic graphic design course. Concepts like scale, balance, and contrast are all used to create harmony across all sorts of design, from whitepapers to websites. And if you spend enough time designing, you’re usually applying all of these principles subconsciously to everything you do. BentoBox web designers create so many beautiful restaurant websites that successfully harness all the principles of design — read on to learn more about each principle through an example BentoBox customer.
Contrast
Contrast through differences in color, shape, and more can help guide a user through the site. Bussin’ Birria Tacos is a recently launched website for a taco joint located in the Mall of America. As the name suggests, these birria tacos made with locally sourced ingredients look amazing against their branding with vibrant colors and patterns, where most of the contrast lies. The neon yellow and bright pink play off the deep green color and show how fun this taco slinging joint is. The site alternates between sections with a full yellow background and crazy patterns, giving the user all the more reason to scroll through.
Repetition
Repeating various design elements can help drive home what a brand is all about. La Pecora Bianca is a charming Italian restaurant whose website shows many simple, repetitive patterns throughout. When the page loads, it immediately shows you what it serves with a fun, tiled pasta pattern that swipes up to reveal the page. In fact, the restaurant’s mascot is an adorable sheep packed with curls. Squiggly lines that make you think of pasta shapes repeat throughout the website, whether as a link hover or a footer element. Mangia, baby!
Unity
A design is unified when all the elements are in agreement with one another. Ultimately, all the principles of design come together to create consistency and oneness, and Penny Red’s website is a great example of a unified design. Penny Red’s promotes their buckets of biscuits and fried chicken with beautiful photography, fun patterns and bold fonts. The colors and patterns on the fried chicken packaging come alive digitally in lots of places on the page. The single scroll nature of the site makes navigating it feel like one consistent journey where the end of the road leads to buckets of tasty fried chicken.
Balance
All design elements have visual weight, and a sense of balance can be achieved with symmetry and asymmetry. The Red Barber is a swanky rooftop bar in Denver whose website manages to achieve perfect balance with varying page elements. The homepage alternates between large and small content boxes that fit neatly into one another. Their menu page is another great example of visual balance using colors and icons — While moon and star shapes repeat on opposite sides of the columns, the deep red and purple colors make each column feel balanced with one another. There’s a cool, mysterious vibe to this neatly packaged site, guess we’ll have to stop by the rooftop to find out more.
Hierarchy
Hierarchy is about ranking different design elements to lead the user’s eye effectively through a design, and it can be leveraged via the other design principles we’ve discussed here. Honeymoon Chicken uses many design elements to help make information easy to access and keep the user scrolling on their page. The top navigation has key links, and a bright, contrasting button gets users to order food easily. The homepage alternates between full and split overlays with color and photography, which helps to clearly provide information about things like reservations and happy hour. ~Groovy~ color blocks in the split overlays help bring the eye down the page as well. Think it’s about time to grab a chicken sando or two!
Scale
Scale is often used in combination with emphasis. On Brezza, scale is used in a number of ways to create an interesting composition. At the very top of the site there is an oversized logo that shrinks down as soon as the user starts scrolling. Also present at the top of the page, the navigation bar spans the entire width of the page. On the opposite end of the spectrum, the hero images on interior pages are dramatically shortened. In the same vein, the typography feels small and delicate when compared to the other larger aspects of the site. Looks like the restaurant located inside of the Resort Worlds Las Vegas is going all in on scale.
Emphasis
A great way to create emphasis in a design is through tools like size, weight, position and color. There are few ways this happens on the Sweet Chick website. One of the most dominant techniques is the comparison of the oversized headings in relation to the rest of typography. In this instance, you also feel the sharp contrast of the deep red color on the off white background. Going back to scale, it is also noticeable that all the images on the site, as well as graphic assets like the map marker, are large and in charge. It’s hard not to rely on emphasis when you’re dealing with the best chicken and waffles on the planet.
