Restaurangwebbplatser är ganska ofta katastrofer av både design och användbarhet. Även bra designers kan gå väldigt fel på den här speciellt knepiga uppgiften.
Innan du försöker din nästa restaurangwebbdesign, kolla in den här artikeln. Vi kommer att gå över några super praktiska tips för framgång förutom några få fall att undvika.
En välsmakande fråga
Joe Elias kontaktade oss via vår Design Dilemma-sida och ställde följande fråga:
? Jag har plockat upp en handfull restauranger under de senaste veckorna genom hänvisning och sitter fast på en sak: visar sina menyer på sina webbplatser. Visst kan jag gå? Kasta den i en PDF? rutt och ring det en dag, men jag gillar att sticka ut genom att mina klienter sticker ut. Några idéer för ett unikt, rent sätt att presentera en standard 4-sidig restaurangmeny ??
Det här är ett bra ämne som jag tycker att många designers kämpar med. Jag tycker att Joe har några viktiga insikter här men behöver lite hjälp att komma igång. Låt oss se vad vi kan lära oss av en snabb titt på webben på webbplatser i den här kategorin.
Skärmar och papper är mycket olika medier
I sin fråga nämnde Joe? Kasta den i en PDF? teknik som används av flera webbplatser. Grundsidan är att ta ut utskriftsmenyn, ladda upp den som på webben för att ladda ner och ringa det en dag. Även om en nedladdningsbar PDF-meny är en bra alternativ att ge till användare, det är definitivt inte sättet att gå som det primära sättet för besökare att se din meny.
Vissa designers tar denna idé ett steg längre och tar egentligen tid att koda en online-meny som i grund och botten är en exakt kopia av deras tryckta meny. Även om jag applåderar försöket till konsistens, är detta återigen ett annat väldigt dåligt sätt att gå om denna uppgift.
Designers med en bakgrund i tryck (som jag) tenderar att närma sig webbdesign helt fel. Antagandet är att digital design är i stort sett densamma som skriv ut så att allt du vet om layout, grafik etc. fortfarande gäller. Detta kunde inte vara längre ifrån sanningen.
Skriv ut är ett statiskt, passivt medium. För det mesta är interaktionsmöjligheterna minimala och du måste lita mest på grafisk överklagande och styrkan i layouten. Webben är dock ett helt annat odjur, byggt på idén om rik interaktivitet. Att klicka, rulla och sväva är bara några av de många åtgärder som nu är tillgängliga. Vidare är du inte längre begränsad av storleken på ett fysiskt papper, vilket öppnar upp en miljon möjligheter.
Poängen jag försöker göra är att genom att behandla webb som utskrift, får du massor av möjligheter att göra din design mer användarvänlig, attraktiv och engagerande.
Carrabba's Boring Italian
Låt oss ta en titt på onlinemenyn för en av mina favoritrestauranger: Carrabbas italienska Grill. Det här är en ganska stor kedja i USA och borde ha gott om resurser för att bygga en bra webbplats. Men deras meny är ganska lackluster.
Roamingnavigationsmenyn till vänster är en fin touch, men annars är det bara en stor sida eller tråkig text. Att se detta gör mig inte hungrig åtminstone!
Se till att du kan läsa den!
Carrabbas meny är definitivt inte så dålig. I själva verket rankas det verkligen högt på listan över restaurangmenyer jag kollade ut! Trots att den låg på spänning, är Carrabbas menyn på nätet mycket läsbar. Deras generella webbplatsdesign är ganska attraktiv, men de låter inte utformningen förhindra menyns användbarhet. När du är i tvivel är vanlig det bättre. Jag skulle mycket hellre se en statisk, tråkig meny som användare snabbt kan få information om än något upptaget och oläsligt.
För att se vad jag menar, ta en titt på menyn ovan från Twelve Restaurant. För det mesta har denna restaurang en snygg webbplats, men de tillåter ofta att bakgrundsgraden blöder igenom tillräckligt nog för att göra texten på plats svår att läsa. Estetik är viktigt, men kom ihåg att designen är mer än att göra saker ganska! Det handlar om att organisera och styling information på ett sätt som är både tilltalande och användbart.
Matfotografi
Det som verkligen gör en restaurangmeny för mig är god matfotografering. Som jag sa ovan, gör ord inte mig hungrig, mat gör! Om du har turen att jobba för en klient med fantastiska matfotografiska resurser, se till att du utnyttjar dem så mycket som möjligt.
Kolla in hur bildcentrerade de två menyerna är nedan. Du får verkligen en känsla för vad du ska äta och fotograferingen är bra nog att bara titta på det gör dig hungrig!
Inte varje sak behöver ett foto
Även om du inte har bilder på varje maträtt, och du sannolikt inte kommer, kan du fortfarande dra av en vacker menysida som utnyttjar fotografering. Kolla in den underbara Ruby Tuesday-menyn nedan, som använder ett unikt dragspel system som expanderar en menysektion när du klickar på ett foto.
Detta dragspel system fungerar bra för att snabbt surfa på olika typer av mat som erbjuds på menyn. Vidare ger tittaren tillräckligt många bilder för att få sin aptit att väckas utan att gå överbord.
Dåliga eller saknade foton?
Som restaurang webbdesigner har du förmodligen ingen kontroll över vad, om några resurser som kunden ger dig för projektet. I all ärlighet kommer den typiska restaurangen klienten inte ge dig något nära kvaliteten på vad du ser från California Pizza Kitchen och Ruby Tuesday. I stället är det sannolikt att det inte är någonting eller något nästan oanvändbart.
Matfotografering är knepigt och det tar en riktig professionell att dra av med någon framgång. Om kunden ger dig bilder så dåligt att de faktiskt skadar chansen att någon kommer till restaurangen, måste du hitta ett sätt att övertyga dem om att inte använda dem. Lita på mig, vanlig text är bättre än en sida full av gag-inducerande bilder.
I dessa fall behöver du bara få ut en textuppsättning. Menyn del av Marie Catrib hemsida gör ett ganska anständigt jobb av detta. Lägg märke till hur snyggt organiserade allt innehåll är och hur mycket mellanslag är närvarande mellan objekt.
Om du har helt bra bilder, men en ganska udda samling av dem, kan det vara svårt att räkna ut hur man arbetar dem alla i din design. Chez Gerard-menyn nedan tar hand om detta problem snyggt genom att erbjuda dolda bilder som visas när du sveper över vissa menyalternativ.
Typografi
Massor av restauranger vill vara raffinerad och högklassig, så den instinktiva rörelsen för designers är att använda massor av flödande skript. Jag rekommenderar starkt att man undviker en sida full av script typografi, det blir helt enkelt alltför svårt att läsa. Det är okej att använda det selektivt, men kom ihåg att det är lätt att gå för långt.
Det säger sig självklart, håll dig borta från Comic Sans och andra teckensnitt som din klient tycker är kul. Om du vill ha din restaurang att se högklassig, hitta en stark gammal stil serif. Om du verkligen vill se det roligt, överväga att dra av det här genom grafiken och hålla fast vid en fin modern sans-serif för det mesta av typen.
Men om du verkligen vill gå ut med roliga teckensnitt kan du definitivt ge det ett skott. Många designers kan dra av det utan några problem, andra kraschar och brinner omedelbart. En webbplats som jag tyckte gjorde ett ganska bra jobb är The Little Cake Parlor. Även om jag inte är galen på den mittlinjeformade kolumnlayouten, ser de skrifter som används på hela denna sida bra ut tillsammans.
Sociala media
Vill du att kunder ska sprida ordet om din restaurang? Varför inte arbeta i någon unik social media integration? De bästa implementeringarna av detta jag har sett tillåter besökare att dela specifika menyalternativ som de gillar.
Giraffmenyn har till exempel en Facebook-knapp bredvid varje menyalternativ så att användarna enkelt kan rekommendera specifika rätter till sina vänner.
Slutsats
Online menyer kan vara en verklig smärta att utveckla. Det är svårt att organisera så mycket information i ett attraktivt och användbart format, men jag hoppas att tipsen och exemplen ovan är tillräckligt för att få ditt projekt påbörjat i rätt riktning.
Om du har utformat några online-menyer på nätet, lämna en kommentar nedan med en länk så vi kan kolla in dem!
Post titel bild tas av clspeace.