Lär dig genom exempel 6 lektioner för att designa restaurang- och matwebbplatser

Dagens ämne är en utsökt restaurang- och matwebbplats. Småföretag betalar räkningarna för frilansdesigners och lokala restauranger kan tjäna som en viktig inkomstkälla. Om du börjar på din första restaurangdesign, men det finns några saker du borde veta.

I den här artikeln lär vi oss genom exempel som vi tittar på massor av läckra mat- och restaurangwebbplatser. Genom att undersöka vad dessa designers har rätt, hjälper du till att säkerställa din egen framgång i detta område.

Fotografering är allt

Webbplats: The Claw Bar

Jag inser att det här låter som ett täckeutdrag eller kanske till och med hyperbole, men jag är ganska seriös. Med restaurangplatser, skräpet i, skräp ut? aforism är ganska lämplig. Om du arbetar med fula matskott, är du dömd från början.

Som besökare på en restaurangwebbplats är mitt huvudintresse sannolikt att bli mat. Du måste sälja mig på produkten, och fotografering är sättet att göra det. Tricket är att matfotografering är mycket svårt, så du kan inte ta det billiga sättet ut här. Dålig matfotografering kan göra mer skada än bra.

Källa: vänster foto och rätt foto

Ditt jobb som designer är att övertyga kunden att verkligen investera i några bra bilder om de inte har några redan. Om du är en fotograf, kan det till och med tjäna dig några extra pengar.

Nästan varje sajt i denna artikel tar detta råd, men här är några som gjorde det särskilt bra:

Findus Norge

Cappellos

Culinaria

Visa mig atmosfären

Webbplats: Au Petit Panisse

När du tänker på bilderna för webbplatsen kanske du frestas att tänka rent av mat. Det sekundära tecknet för en restaurang, heck för många människor primär rita för en restaurang, är atmosfären. Jag kan få en bra burger någonstans, men jag vill äta en burgare på ett ställe som är fantastiskt!

Det finns så mycket osäkerhet att försöka hitta en ny plats att äta. Om jag verkligen kan få en känsla för platsen på hemsidan, känner jag mig mer självsäker i mitt beslut att äta där. Från en praktisk synpunkt är det ofta så att ett foto av atmosfären och inredningen ger mig en bra idé för platsens allmänna klädkod. Till exempel klär du på restaurangen som visas ovan? Vad sägs om denna?

Webbplats: Roux på Parliament Square

Utnyttja Texture & Color Heavily

Webbplats: Förgylld smak

Ett kraftfullt verktyg som du har till ditt förfogande när du utformar någon matrelaterad webbplats är textur. Toppdesigners i denna nisch använder massor av realistiska texturer i hela deras webbplatser. Gilt Taste, platsen ovan är ett utmärkt exempel. Hemsiden är full av olika texturer, både i fristående bilder och som bakgrund för typ.

Som ett annat exempel är här en liten beskuren del av ett restaurangtema från ThemeForest. Lägg märke till hur många texturer du kan hitta i det här lilla området!

Webbplats: Victoria Restaurant Theme

Valet av färger är oerhört viktigt för livsmedelswebbplatser. Färg hjälper till att stämma och stärka enticementet. Var inte rädd för att använda ljusa färger och dra alltid direkt från maten när det är möjligt för att knyta samman allt snyggt.

Webbplats: Goosebumps

Bryt ner det

Webbplats: Food Sense

Ett annat bra tips för att arbeta med matfotografering: människor fascineras av processen. Konsten att ta råvaror och göra dem till utsökta rätter är något som drar oss alla in.

Vidare visar bara färska ingredienser maten känns friskare och mer aptitretande. Ingen tycker om att tänka på att restaurangen levererade lasagnen på en lastbil. De vill se tomater!

Webbplats: Delicioso

Webbplats: Goosebumps

Bygg anpassade menyer för webben

Vet du vad min största peeve är med restaurangwebbplatser? Menyerna. Ofta än inte erbjuder denna del av webbplatsen en hemsk användarupplevelse. Jag cringe varje gång jag beställer från Paradise Bakery online:

Webbplats: Paradise Bageri

I stället för att gå igenom problem med att faktiskt bygga en meny på deras hemsida laddar de bara upp en miljon skanning av sin fysiska meny som jag sedan måste sikta genom en freaking sida i taget. Om du klickar på alternativet för att hämta PDF-filen får du bokstavligen det platta PDF-konstverket som de skickar till skrivaren för att skapa sina vikbara menyer. Jag gör inte upp det här folket:

Denna sak är så stor att du måste zooma in på små portioner och sedan panorera runt tills du hittar vad du vill ha. Det är ett förbluffande dåligt sätt att presentera en meny för webbplatsanvändare.

Om du funderar på att kasta upp en PDF i utskriftsmenyn och ringa den en dag, sluta vad du gör och ge dig en hård smack i ansiktet. Sluta vara så lat och gör ditt jobb. Om du letar efter ett bra exempel, kolla Kuleto-menyn nedan:

Webbplats: Kuleto s

Den här menyn använder ett fantastiskt och enkelt att använda tre kolumnsystem för att begränsa dina val. Först väljer du din måltid (frukost, lunch, middag, etc.), sedan en kategori och du presenteras med alternativen inom den kategorin. När som helst är det enkelt att förfina ditt val eller ändra saker.

Om du vill ha en enklare rutt, kolla in Claw Bar. Deras webbmeny använder metaforen för en utskriftsmeny, men den använder fortfarande levande text och är formaterad för webben.

Webbplats: The Claw Bar

Glöm inte grunderna

Det är ganska lätt att bli så upptagen med alla råd ovanför att du glömmer de mest grundläggande elementen i någon webbdesign. Kom ihåg att med vilken webbplatsdesign du alltid bör noga överväga målen för den genomsnittliga användaren.

För en restaurang kan du ganska mycket garantera att besökarna vill ha några specifika uppgifter:

  • Vad tjänar de? (meny och grafik)
  • Hur mycket kostar det? (meny)
  • Vad är platsen som? (grafik och video)
  • Var är det?
  • Kan jag beställa eller göra en bokning online?
  • Vad är telefonnumret?

Som du kan se har vi tagit upp de flesta av de viktigaste målen redan i tipsen ovan. Den grundläggande kontakt- och beställningsinformationen är dock en viktig fråga som vi inte har berört. Jag är fast övertygad om att kontakt- och platsinformation är en mycket hög prioritet för en restaurangs webbplats, så denna information bör finnas på hemsidan på en framträdande plats.

I mallen nedan finns en stor, iögonfallande karta direkt i sidfoten (förmodligen den första platsen du skulle tro att se). Höger bredvid kartan finns all kontaktinformation du behöver: email, telefonnummer, sociala länkar etc.

Webbplats: The Restaurant Theme

Läran här: Låt aldrig dina användare jakta på grundläggande information eftersom du är orolig för att det ger dig en bra design. Ditt jobb är att markera och presentera viktig information på ett attraktivt och användbart sätt, inte att skapa en webbplats som ser bra ut på bekostnad av dess syfte.

Visa oss dina favoriter!

Nu när du har sett våra exempel på de bästa mat- och restaurangwebbplatser som vi kunde hitta, chip in och visa oss dina favoriter. Eller, ännu bättre, visa oss de restauranger som verkligen saknar märket och kasta ut idéer för förbättring.