Five designers on how to make a food & drink website that stands out from the (very competitive) crowd

The food and drink industry is a tough world to thrive in. Not only will you be judged by the quality of your product in terms of its taste, but you’ve also got to make it over the tricky hurdle of design. And, as food and art become ever more entwined, coming up with original, eye-catching branding and visuals is a huge task. Which begs the question: In such a competitive field, how do you stand out? Once you’ve got a delicious product or a slick restaurant, how do you make sure it’s not let down by a poorly designed website? In this month’s Double Click, we speak to Big Mamma, Fed & Watered, Day Job, Studio Juice and Planque about their own experiences of navigating this task and their top tips and tricks for doing so.

Big Mamma: www.bigmammagroup.com

Big Mamma is a chain of self-proclaimed “laid back trattorias serving the most authentic Italian foods.” With branches in London, Paris, Lille, Lyon, Bordeaux and Madrid, it’s a restaurant business whose setup is perfectly in keeping with its name: a big team with big energy, making delicious food. Naturally, such an ambitious business needs an equally ambitious website to greet its customers with. And, after much time spent browsing, we can confirm that it meets expectations. Designed by Big Mamma’s in-house designers, it communicates not just the authenticity of the food on offer, but the “zany humour and warmth” of the team too.

“The DNA of the site aims to transport people to the world of Big Mamma,” the designers explain. “This is seen in the video as soon as you hit the landing page, which follows a typical day at Big Mamma, with key moments such as the team briefing and the mozzarella delivery which arrives three times a week from Naples.” Another element of the design which is clear from the start is the focus on colour and illustration. Yellow is the key colour for the brand, but there’s also a good helping of green and blue, which pair well with illustrated elements that have been created in collaboration with Italian illustrator Olimpia Zagnoli – fittingly known for her work with pasta brand Barilla. These aspects look to mirror the approach found in Big Mamma’s restaurants, “mixing authenticity with modern twists”, like in its London branch, Gloria, where neon signage is juxtaposed with vintage Italian furniture. Elsewhere, the team’s fun spirit comes through in interactive elements that allow users to engage with the design: At the bottom of the Contact page, the illustrated spaghetti shapes can be dragged around using your cursor. The designers offer this as their favourite feature of the site, explaining how it perfectly encapsulates the Big Mamma ethos.

Big Mamma’s Design Team top tips:

1. Not too many tabs, it should always be simple to navigate
2. Do one version with all the information you want on the site, then do another version with love. Look at it creatively – what elements can you make fun? Add some cool quirks!
3. Make sure the site itself isn’t TOO loud (literally!).
4. Always begin with designing the phone version. Most people browse on their phone and it needs to be easy to navigate and look cool.

Fed & Watered: www.timberyard.co

Timberyard is a family-run restaurant in the heart of Edinburgh that is “set in an authentic warehouse dating back to the 19th century when it was built as a props & costume store.” The building’s fascinating history, coupled with the team’s focus on ingredient-led, local, and seasonal cooking, makes for an eatery that prides itself on its story and its process. So, naturally, these were the top priorities when it came to creating the Timberyard website. Carried out by design studio Fed & Watered – which, as its name would suggest, specialises in food, drink and all things hospitality – the design centres around simple yet elegant photography and a clean and easy-to-navigate layout. “Websites can often be a dumping ground for a business,” says Fed & Watered co-founder Orlando Lloyd. “So it is always best to start with curating what actually goes up on the site. We think simplicity and reduction is often the best solution. What does the site need to do? Okay, let’s do that really clearly and succinctly (and make it look pretty).” This common sense approach is evident in Timberyard’s design, which feels both engaging and refined.

Beautifully shot photos sit pride of place on the restaurant’s single, long-scroll page, with some transitioning from colour to black and white and back again as you navigate past them. This serves to highlight the imagery in a way that feels non-intrusive, which is important as they are the central focus here. “The most important aspect of a restaurant website is the photography,” says Oliver Hilliker, Fed & Watered’s other co-founder. “It is a glimpse into what dining at the restaurant is like, showcasing its interior and its offerings. We constructed the site around showing the imagery off in its best light, larger imagery to highlight important features, and a few collage compositions to portray a broader feel.” Alongside the photographs, one of the other most important sections of the website is the list of wine producers that Timberyard works with. Oliver says that Jo Radford, co-owner of the restaurant, has “spent the last decade constructing one of the most impressive cellars in the UK”, and this needed to be showcased accordingly. In response, the design duo chose to “structure some of the notable producers from the cellar across the webpage as if they are points on a map spread across Europe.”

Fed & Watered’s top tips:

1. When designing a restaurant website, prioritise the photography.
2. Make sure the brand identity and visual language are solid before starting.
3. Always be flexible and allow a site to evolve and adapt as the business's needs and requirements grow and change (this is especially relevant in the context of a pandemic).

Day Job: www.snacklins.com

SNACKLINS was founded in 2015 by American chef Samy Kobrosly, who had “become obsessed with the idea of a meat-free pork rind after joking with a friend about his inability to partake in the classic snack given his Muslim upbringing.” In his search for a suitable alternative, Kobrosly created a 100% vegan and plant-based crisp consisting of yuca, mushrooms, and onions. He named these crunchy, airy delights SNACKLINS and, before long, they were the talk of the town. As the creations grew to become a full-blown company, the healthy, scoop-shaped chips needed branding that symbolised their guilt-free approach to snacking, and that’s exactly what design studio Day Job had in mind when they created the brand’s website. “​The site is fun, clean, and easy to navigate,” says Brand Designer Alison Hochi. “And design elements such as the contrasting organic and straight bold lines reflect how this chip is meant to be eaten – all in one sitting and care-free.” The SNACKLINS wordmark was also influenced by the chip’s unique characteristics, specifically its “irregular shape”, says Brand Designer Katherine Choi. “We made some modifications to Zig Zag Rounded by Volcano Type, toning down certain letterforms and embellishing others.”

For Tyler Madsen, Lead Dev & CTO at Day Job, these elements were part of a wider overarching plan to utilise the medium of web design in a way that provides “clever and surprising opportunities” for translating the client’s brand world. “The decision-making process can sometimes just be a matter of identifying where these opportunities are,” he explains. “For a brand like SNACKLINS, which takes pride in its product’s rough edges and asymmetry, that meant bringing as much of that charming unevenness and irregularity as we could to the web – a context that normally resists those things.” This resulted in delightful elements such as jagged, hand-drawn lines for text underlines, image borders and buttons. Elsewhere, other playful features include animated crunching mouths on each product flavour page and, best of all, a mouth that comes to eat your cursor when it’s inactive. Dakota Light-Smith, Senior Designer & Partner at Day Job says this is her favourite aspect of the site: “There’s something funny about making it harder to buy something on an ecommerce site. I like sites that are a little mischievous.”

Day Job’s top tips:

Alison Hochi:

1. A single design choice can elevate an entire website.

Dakota Light-Smith:

1. Learn Figma, specifically components.
2. Work closely with your developer when ideating so you know what’s realistic to produce

Studio Juice: www.dabbadrop.co.uk

Originating from Bombay in the late 1800s, dabbawalas – literally meaning “one who carries a box” – are food delivery systems that have been feeding cities in India for over a hundred years. A dabba traditionally consists of stacked aluminium cylinders containing dishes such as rice, daal, curried vegetables, a roti or chapati, and occasionally a dessert. These are generally home cooked meals, which are then collected by couriers that ride bikes and trains to deliver them to customers all around the city. The empty boxes are then picked up after lunch and returned to sender to use again the very next day. This highly efficient yet extremely simple system has been the envy of food delivery companies around the world for many years, as well as inspiration for those looking to bring some heart and soul back into the industry – people like DabbaDrop founders Anshu Ahuja and Renée Williams. Determined to find a more environmentally-friendly and people-friendly alternative to the big name delivery companies like Deliveroo and Uber Eats, they decided to set up their own company, which takes as its premise the age-old dabbawala system.

As a zero-waste service offering delicious plant-based food, Anshu and Renée wanted a brand identity and website that tied in with their unique approach. They offered the job to Studio Juice, who have created an eye-catching online home for DabbaDrop. “A big part of the visual language of the site was inspired by the circular economy and DabbaDrop’s ethos as a zero-waste brand,” explains Studio Juice. “We followed suit through thoughtful design and illustrations that felt inspirational and honest while still very joyful.” Across the site, there is a lovely synergy between a bright colour palette and playful patterns and illustrated elements. The overall feeling is one of heritage and tradition meeting modern design and this was what Studio Juice had been aiming for. “Anshu and Renée share a real love for 70s aesthetics and sunshine-filled visuals, so we wanted to take that retro look and feel and give it a contemporary twist, using everything from graphics and typography through to tone of voice,” says Studio Juice. “We also wanted to celebrate the history of the Dabbawala through rich colours and patterns, but there was an opportunity to go further and explore exactly what this meant in a digital space. What does something so tactile and textural look like online?” He goes on: “Time and energy was spent working with the amazing DabbaDrop team to understand the overall customer experience, which really helped inform the UX and goals for each user's needs.”

Studio Juice’s top tips:

1. Invest in brand immersion upfront before starting a project. A deep level of understanding early on will help the design journey in the long run. Don’t be afraid to get as much information from the client as possible either – no matter how big or small the detail. These little bits of insight will help inform creative decisions along the way and add bags of personality.
2. Set a content hierarchy before design – and stick to it. Since the DabbaDrop site design has such a joyfully eclectic look and feel, we knew we had to create intentional spots of breathing room. This meant organising the hierarchy of the content first, in order to strategically find those sweet spots. Consider the expression of the brand as much as the function of each page.
3. Sometimes you *can* have it both ways. In the early stages, we used each client check-in to gauge how the site ‘feels’ both pragmatically and conceptually. It’s often the little details (e.g. “Dabba What?” on the navigation bar) that help the site feel unique.

Planque: www.planque.co.uk

Planque, a “wine drinker’s clubhouse” in east London, is home to a community of like-minded drinkers who come together to “enjoy a slower, more intentional way to eat and drink”. Founded last year by Jonathan Alphandery and Bianca Riggio, Planque’s multi-faceted venue includes a restaurant, members’ lounge, retail store and wine cellar – the latter of which can be used by members to store their own personal collection of wine year round. Members also have access to private dining spaces and an ongoing programme of wine events. With such a range of offerings, Jonathan and Bianca knew that they needed an online presence that could efficiently communicate what Planque was about, including the personality of its founders. “Planque, as a brand-baby of my partner and I, embodies some of our tensions – between structure and chaos, traditional and modern,” says Bianca. “This comes through in various design elements, such as the mix of serif and sans serif fonts [Pondre and Mabry Pro], as well as the layering between the subtle, regressive base colours and the more vibrant hits.”

Scrolling through the Planque website, this playful juxtaposition is clear and it works well. Minimal, neutral layouts are balanced by pops of colour and warm, naive illustrations. The navigation system is simple but effective, allowing users to easily access all the different areas of the brand, including a journal which gives a personal touch to the site. “I wanted to keep the front interface of the website minimal and create some different doorways for exploring the deeper content of the pages,” explains Bianca. “Planque as a business has a few arms so I wanted the user to be able to dip in where their interests lie.” The website’s strength is also in its refinement – having just the right amount of information and focal points and not overdoing it, and knowing when to flex its visual style and when to be more subtle. Bianca says this was an important learning curve during the process and advises others out there to take heed: “When I’m designing for a brand that does not yet exist it can be super fun, because you can collect all of these dream images of your favourite things. However, there is always a reality check when you have to figure out how to reverse engineer that feeling and create the assets - before you have a space or product to photograph.”

Bianca Riggio’s top tips:

1. Make sure you have a great developer to work with! Oleg and I have built a few sites together now and he is always open-minded and eager to make ideas work. I have worked with other developers that shut down ideas and that never ends well.
2. Use the skills you have. I was not trained to design websites but tools like Figma are excellent and easy to use.
3. Keep it interesting for yourself. Most of the reason I like doing different navigation formats is because I need to keep myself interested in what I am doing.
4. Don’t look at too much inspiration. Sometimes too much input clouds my decision making process because there are so many great websites out there and you can take a design in multiple directions.
5. Give things time to resolve. You might have an idea to do something differently and then you hit a wall – I did with this site. I had to make compromises but I tried to keep the things that I thought made it a fun experience.
6. Once you have a feel for the brand you’re working on, take pen to paper and draw up some frames before going straight into a design file.
7. Compile references for how you want transitions and movements to happen. If you can find an example of it on the internet, then you know that it’s possible. Maybe this is for the amateurs out there, but it’s literally the only language I have when I am trying to communicate ideas to a developer “I want it to slide like this…”
8. Take a walk every now and then. Most issues get resolved off screen.