Showcase Of Appetizing Restaurant Websites

Advertisement

They say the first bite is taken with the eye. If so, these appetizing restaurant websites succeed in whetting our appetites, inviting us to a savoury next bite. In these designs, color scheme and introductory copy show vastly different aspects of the restaurant experience. Moody warm tones create atmosphere, vibrant greens underscore freshness, and earthy colors communicate a relaxed, friendly attitude.

Because customers are increasingly using mobile browsers to make decisions on the spot, restaurant websites are doing a better job of communicating core information quickly. Similarly, full Flash websites with no mobile alternatives are seeing some decline. Especially interesting is how these businesses are improving their online menus by replacing PDF-only downloads with Web-optimized alternatives that are more readable and easier to navigate.

Showcase Of Restaurant Designs

Geogeske
This design has printerly qualities, with its eye-catching oranges and whites and oversized headings. Everything works together to establish a relaxed yet smart urban atmosphere. The JavaScript effects (sectional fades and spring-loaded logo introduction) are used sparingly and effectively. Simple navigation and short copy make scanning easy while putting the focus on the strong menu-worthy photography. However, the site could certainly use a larger font size.

Restaurant image in Showcase of Appetizing Restaurant Websites

Jam Restaurant
Upscale modernist and classical elements are used consistently on this website and in the menu and restaurant interior. The vibrant typographic header looks stunning while enhancing usability by prominently displaying a phone number and hours. Another nice touch is how the body scrolls beneath the stationary translucent header.

Restaurant image in Showcase of Appetizing Restaurant Websites

Benito’s Hat
Named after a celebrated Mexican president, this restaurant communicates authenticity and freshness with a green cilantro backdrop and clear devotion to its culinary roots. At times, the backdrops on the interior pages eat the foreground text; a little contrast and spacing would help in spots. Overall, an offbeat feel that works.

Restaurant image in Showcase of Appetizing Restaurant Websites

Pizzeria Napolicentrale
This website uses horizontal navigation to guide the user through photos of mood-setting rustic Italian elements. The beige picnic pattern adds just enough visual interest without competing with the copy. But in some sections, the taller content makes horizontal scrolling a bit floaty.

Restaurant image in Showcase of Appetizing Restaurant Websites

Barley’s
A cozy design rich in grainy colors and sturdy serifs. Small touches—like the roll-overs, and lighting effects such as in the logo hover state—give a handcrafted feel. Do not miss the nice, readable menu and beer list that feature stylishly simple beer ratings.

Restaurant image in Showcase of Appetizing Restaurant Websites

State
With nocturnal tones and pictures of people having a good time, the State uses a hip design to say that it’s a cool sociable night spot. Perhaps intentionally, there seems to be little focus on food; for example, the menu section feels skimped (disjointed navigation and flimsy type for the buttons). More photos of the restaurant and food might enhance the personality of this website. Also, the home page seems a tad cluttered. In general, a little more depth in the sub-pages would round out what is a good-looking piece.

Restaurant image in Showcase of Appetizing Restaurant Websites

Farinella Bakery
Fun and disarmingly honest, Farinella Bakery takes the cake in blending personality and usability. The bold header and fun footer become bookends for the spot-on copy and photos. Notice the slight head bob when you click on the navigation and the magnification when you roll over menu items; a tasty browsing experience. What makes this a winner is that the integrity and consistency of the design can be found in the smallest elements.

Restaurant image in Showcase of Appetizing Restaurant Websites

Sono
Authentic Japanese design elements and atmospheric audio effects work well to create mystique on this Flash website. A few usability concerns pop out: for example, the flaky JavaScript for the “Back” button and the small text that is in a cramped box with a small scroll bar.

Restaurant image in Showcase of Appetizing Restaurant Websites

The Little Cake Parlour
This more conventional website shines with gorgeous photography that almost seems edible. The design has a strong focus on typography, with various elements embedded in the elegant pink multi-column layout. Some design elements probably shouldn’t be images and would work better as simple plain text, though. Also, because all visual elements have a similar pink tone, they may be a bit difficult to recognize at first glance — for instance, the pink PayPal-button in the footer of the site.

Restaurant image in Showcase of Appetizing Restaurant Websites

Pizza Luce
With playful tattoo-like scribbles and quirky photography, Pizza Luce makes clear its immutable place in Minneapolis’ food culture. Check out the oddly captivating home page illustration. For all of these strengths, the community section feels slapped together and in need of a bit of refinement.

Restaurant image in Showcase of Appetizing Restaurant Websites

La Vista
The clever use of the Flash overlay here adds intimacy and life to the crisp photography. The menu is noteworthy: simple to browse and very clean.

Restaurant image in Showcase of Appetizing Restaurant Websites

Georgian Wine Society
The backdrop feels like a matte painting that draws us into the headspace. With that, we are receptive to the interesting narrative about Georgia’s role in wine-making. The e-commerce system is well integrated; a more generous margin between elements would augment the shopping experience.

Restaurant image in Showcase of Appetizing Restaurant Websites

Catered by Kate
This website’s “About” page is one of the top in this showcase. It opens with Kate smiling warmly, giving the page a welcoming human touch. Next, it summarizes (in only two sentences) three very compelling reasons why you would use Kate for your catered event. Just one distracting but easy-to-fix minus: a call-out to an empty Flickr page that is supposed to hold more images.

Restaurant image in Showcase of Appetizing Restaurant Websites

Can Jubany
This clean layout on deep chocolate brown feels elegant even while containing a surprisingly large amount of content. The home page sets the right tone with the large yet quick-loading video that tells a story. Two more unique touches are the simple sliding navigation and the tantalizing, well-written recipe section.

Restaurant image in Showcase of Appetizing Restaurant Websites

Caravan
This simple and savvy composition uses negative space to focus on the coffee while adding depth with subtle textures. If the placeholder is this solid, then our expectations are high for the full website!

Restaurant image in Showcase of Appetizing Restaurant Websites

Chipotle
Humor, earthy tones and engaging (and notably non-Flash) animations make for an experience that is engaging and relaxed yet expertly crafted. Consistent with its corporate message of “Food with integrity,” Chipotle focuses much of the website on its brand rather than the burritos. Be sure to tug the rope in the footer for some hidden and delightful interactivity.

Restaurant image in Showcase of Appetizing Restaurant Websites

Le 28 Thiers
Here are tangerine and rose hues mingled with crisp photographic elements and textures. The simple wooden table distinguishes the layout and grounds the content visually. Subtle gradients in the typography, quality photography and the curved navigation inject elegance and dimension.

Restaurant image in Showcase of Appetizing Restaurant Websites

Brooklyn Fare
This playful design achieves a unique charm through imagery that consists of real employees, bookish serifs and a stylish seafoam background. Especially nice is the consistent layout, with its cheerful copy and gritty photography, which avoids appearing repetitive.

Restaurant image in Showcase of Appetizing Restaurant Websites

Canela
Canela (Portuguese for “cinnamon”) employs a conventional layout, energetic reds and generous imagery to give a sense of flavor and sophistication. The three-column PDF-only menu makes browsing on a mobile device more challenging.

Restaurant image in Showcase of Appetizing Restaurant Websites

Last Click

Brew Shop
The Brew Shop is not really a restaurant website, but it is still worth mentioning. The site establishes personality at first sight with a hilarious photo and beery good humor. It backs the funny with substance, such as a very usable e-commerce system, effective copy and scannable icon-enhanced navigation. Especially nice are the swaths of red as call-outs and the subtly scrambled type.

Restaurant image in Showcase of Appetizing Restaurant Websites

Related Posts

You may be interested in the following related posts:

Would you like to see more similar posts on SM?

(al)

↑ Back to top

Sam Wilson is a creative strategist and epicsmallist. He likes to grow and talk about ideas. Say hello to him on twitter at @storypixel.

  1. 1

    Oh great, now I’m hungry at 9am, thanks a lot! :)

    4
  2. 6

    The Geogeske design is all about the design. The main text is too small – difficult to read. The logo, menu and “FRESH” dominate and overwhelm the message. The photo is also overwhelmingly large and expansive and I can’t figure out what the grey bar in the lower left is supposed to be doing.

    The same treatment for all the other pages leads me to say this is a design failure because the message gets lost in the design.

    -2
  3. 7

    I appreciate the effort in explaining what qualifies these websites for a showcase. In previous showcases we lacked that all together, so this is a step in the right direction. Thanks, SM!

    0
  4. 8

    La Vista design – so what’s with the not-quite-round, floating bubbles???

    0
  5. 9

    A note on the Chipotle website: their online ordering system really cuts the cake!

    0
  6. 10

    Catered by Kate – This is a great design. The message is nicely balanced with the graphic elements. Graphics are well done. Overall placement of and interaction of elements is well done.

    However, there are inconsistencies with spacing after periods. Choose either one space or two spaces. (the old convention of two spaces is from the typewriter era) These need to be fixed and should not have been overlooked before posting.

    0
  7. 11

    Designs should open in a new window when clicked so the reader can post a comment while viewing the actual design. Yes, yes, yes, I know I can manually open a new window myself, but really, why?

    0
    • 12

      No, they shouldn’t, dave. If you force the links to open in new windows, you take a choice (open in old window or in new window) away from them. The user should be in control and the user should decide how to open the link, not the content providers.

      1
      • 13
      • 14

        That’s nonsense. Designers make decisions all the time re: how a viewer will experience a website. Opening a new window when useful (as in this case) is just one of those decisions and certainly has a place in good web design. It would certainly enhance my user experience on this site – regardless of what the convention is.

        0
      • 15

        Another vote for new window.

        0
      • 19

        I find a TON of people do not know how to ctr-click or cmd-click.. and right click to open in new window is cumbersome.. I try and design to keep visitors on client sites and my site too. I must say it makes sense to me to have them (your external links) open in a new window given the nature of your site and it’s users. Makes for a nicer browsing experience. I browse your site usually with one hand on the mouse and one on mah coffee!

        1
      • 20

        new websites should open in a new window/tab – its a basic rule of the web… ;-)

        2
        • 21

          +1 for Nicola: ‘new websites should open in a new window/tab – its a basic rule of the web’. It’s really annoying having to right-click first…

          2
      • 22

        wow. some opinionated people. all of whom are wrong to demand any kind of convention. There is no ‘basic rule of the web’. V is right, it does take the choice away from people. Others may prefer to use the convention where external links are target _blank. Which I happen to usually.

        AND…. people who don’t know how to use tabs are unlikely to care which method is used, since they probably use a very linear browsing method.

        0
      • 23

        That’s right – you nailed it! That’s a good design principle.

        0
        • 24

          Control of whether a link should open in a new or existing window should be left with the user – let them decide what works for them.

          1
      • 25

        I can see each side but I kind of agree with the new window for external sites rule. I thought it was quite an old convention, at least it’s how I’ve been building websites for the past 11 years. There are absolutely no worries that your user will lose your website regardless of how deep they go into the linked website. When you’re as web savy as the SM editorial and most of the sites users, its easy to forget that not everyone knows about cmd/ctrl + click. Always cater for the noobs first.

        0
        • 26

          Although since the noobs aren’t the target audience for this site, there might be case here for _not_ catering to them.

          0
      • 27

        Why not offer both; the screen shot could open in the current window and a little icon of a window with a curved arrow could be placed in the article and open in a new tab or window. Simple.

        0
      • 28

        No offense, but most ordinary users are not that tech-savy that they know that they can ctrl+click or right click a link. So how are you taking away the choice from users who don’t know that they have it?

        I’ll bet that you’ll find more users pissed off by having to ctrl+click than the opposite. Happy users is what we want right?

        Also, the longer you can keep your visitors on YOUR site, the more impressions you can lay on them.

        The web is f*ck old and still so many users don’t grasp ctrl+click. Don’t tell me that the most correct thing is to leave a choice for them. I kindly disagree

        0
  8. 29

    Great Collection :-)

    0
  9. 30

    One question I have for people viewing any of the restaurant sites. What do you prefer to see, photographs of the interior of the restaurant with or without customers/staff (eating, drinking, working etc)?

    0
    • 31

      Depends on your brand, your customers, and your competition. Also depends on what your interior looks like ;)

      0
    • 32

      I think people like to see people enjoying themselves. Why not show what the atmosphere is like when people are in it? I mean, I wouldn’t want to go to a restaurant (for entertainment purposes at least) if it were bare on the inside. Maybe if you’re trying to appeal to people looking for a nice, quiet date spot, then maybe empty photos are preferred.

      0
      • 33

        I believe it depends on the page.
        If it is a bar or dining room, use photos of people enjoying themselves there.
        The customer will want to see that people DO go there.

        If it is a function/events page, show the empty dining room prepared for the evening’s events. I worked functions for several years. The tables get messy fast. It’s also impersonal when compared to a dining room experience.

        Consider also what they tell you when selling a house. Keep it clutter free and empty so the buyer can see how there stuff will fit in the home.

        Same for the function hall, keep it empty and perfect so the customer can see how great it fits all her guests/gifts/entertainment etc..

        0
  10. 34

    I wish you included Giraffe to your list: http://www.giraffe.net/

    It is one of my all-time favourite restaurant websites!

    0
  11. 36

    Nice collection and critique, thanks!

    0
  12. 37

    This is great! Now I want to see the best burger joint sites as I’m currently working on a new design for Burgers Fries and Cherry Pies.

    0
  13. 38

    These are fabulous! ~Once again a dreaded “list” from SM, lolz.

    What’s great about restaurant sites is they area good reference for other sites that don’t have a sh*tton of information to get across. Like a business that sells just one or two products. Usually it’s just branding (fabulous home page), contact info, social buttons, and a menu. …Sometimes there’s some thought leadership (natural foods, eg), but that’s the exception to the rule. Simplicity rules here. And that’s awesome.

    0
  14. 39

    Le 28 Thiers and Chipotle is great! What do you think of http://www.marron.no ?

    0
  15. 40

    I can’t begin to imagine why a restaurant would put a BUILDING on its home page. Or a cafeteria-style table (Sono).

    I thought the theme of this collection was *appetizing* sites. Appetizing means the experience makes my mouth water. Instead, I see Luce and my first thought is, “Say, didn’t that used to be a Denny’s?”

    0
  16. 41

    I’m not impressed. Vague navigation in numerous sites. Pity. Picture is not everything.

    0
  17. 42

    Great roundup of interesting websites, thanks for sharing!

    0
  18. 43

    Great Showcase! There are some nice clean sites here!

    0
  19. 44

    Algunos de los sitios son simplemente geniales, gracias por recopilarlos para nosotros

    0
  20. 45

    Le 28 Thiers — breathtaking design!

    0
  21. 46

    Nice collection
    - My favourite was “Caravan”

    0
  22. 47

    Thanks so much for the showcases. I really do find them inspiring. Can I make a request for a showcase – Tradies (people like plumbers, builders, handymen, electricians, …)

    1
  23. 48

    Thanks so much for featuring two of my designs. I’m honored.

    0
  24. 49

    What kind of cost comes along with great looking and feeling stuff like this? Can someone expect to drop 15K on something like this?

    0
  25. 50

    La Vista caught my eye with your description, it’s the only one I felt compelled to click.
    I think the overlay flash is a great effect, one I’d never thought of, thanks for the great post.

    0
  26. 52

    I Superlike this .. i m designing one of the restaurant site n i m sure this comes handy to me.

    0
  27. 53

    Im loving the showcase, but the advert background is utterly rubbish. If this is the way smashing magazine is going, ill be reading more in google reader…. or not at all. I understand you need to raise funds, but really??

    0
    • 54

      I don’t mind the ads. I look past them. Not a great visual addition to the page design, but not a major distraction.

      0
  28. 55

    Bryon Leigh Reece (sonic frequency)

    September 2, 2010 11:39 pm

    Flash in decline for mobile….Mmmm. Verizon just rolled out Adobe Flash to all the Droid phones.=)

    0
  29. 56

    Good Inspiration!

    0
  30. 57

    I like the Georgian wine society design. The high quality images in the flash instantly grab the users attention, and there is a lot of detail in the rest of the design also. The textured backgrounds on all the content areas makes the site look more interesting.
    I also like the Geogeske design, as the full screen images make you feel as though your in the restaurant.

    0
  31. 58

    Some interesting ideas and twists. Here’s a tasty Irish one, http://www.cafeparadiso.ie/ for Cafe Paradiso in Cork, Ireland’s best vegetarian restaurant. Designed using textpattern, it has some juicy photography from Jörg Köster. I’ve no connection with the business, but thought it was well done.

    0
  32. 59

    Niiice, some swweet looking websites there!

    You do realise though that that polling system is heavily weighted to be only answered by people who liked the look of the article enough to click on it, read it through and scroll to the end. No wonder the majority of answers say ‘yes, absolutely’.

    0
  33. 60

    Good article Sam, but am surprised to see this one did not make the list: http://www.mellowmushroom.com/index.php

    I think it is one of the most well done restaurant sites I’ve ever seen.

    0
  34. 61

    Yummie! Now am hungry :-)

    0
  35. 62

    It can be tough to find elegant restaurant websites. Searching for inspiration usually leads to marketers that target restaurants, as opposed to great sites. Nice showcase!

    0
  36. 63

    Great list!

    Check out more at a showcase of restaurant sites I put together:
    http://www.kareydarnellhelms.com/Blog/2010/03/showcase-of-35-food-restaurant-website-designs/

    Thanks!

    0
  37. 64

    some of the web sites listed are anything but great examples. They seem to be half finished and are a navigation mess, in my humble opinion of course. They may look great on a screenshot, but I think you should try to use them before adding them to such a list. Other than that I think show cases are great way to highlight whats new in the web design world.

    0
  38. 65

    Maria Manoela Porto

    September 3, 2010 12:54 pm

    I love your showcases!

    0
  39. 66
  40. 67

    Here is one awesome website from Maldives http://www.seahousemaldives.com/ keeps me full when ever I go.

    0
  41. 68
  42. 69

    Love it! I’m just getting into restaurant websites… this was fantastic!

    0
  43. 70

    I can almost taste it!! Thanks for the post

    0
  44. 71

    Nice post! Always hard to make a selection there are so many good sites. One i’m really fond of is http://www.lunchkiosk.nl/ , i like the menu.

    0
  45. 72

    Love the list! All restaurants should have a website these days. These are fantastic.

    0
  46. 73

    That is a wonderful post. I love all of them.

    0
  47. 74

    Chipotle’s main burrito animation is using flash. The pig is javascript though.

    0
  48. 75

    First time commenter here – glad to see my local favorite Luce made it!

    0
  49. 76

    Very cool post, my mind is running wild with ideas now.

    0
  50. 77

    Wow… Nice collections… all are very good design concepts… :)
    Thanks for post…

    Cheers with hungry,
    Mani…

    0
  51. 78

    beautiful site………..good work………….keep it up

    0
  52. 79

    Another one to add to the mix…..www.McMenamins.com.

    Beer counts as food, right?

    0
  53. 80

    Brooklyn Fare seems to have changed! For shame!

    0
  54. 81

    Gerhard van der Velde

    March 11, 2011 12:38 am

    I will give a cleu

    0
  55. 82

    Hey there!

    If you are looking for some great inspiration for designing restuarant websites, check out http://www.restaurantinspiration.com, where I collect beautiful and creative restaurant hompage designs as a resource for other creatives.

    All the best

    Jonatan, Stockholm

    0
  56. 83

    This website has got some very helpful stuff on it! Thank you for informing me!

    0
  57. 84

    The site of Caravan is just amazing !!!!

    0
  58. 85

    I feel like I’m constantly looking for interesting things to read about a variety of niches, but I manage to include your site among my reads every day because you have interesting entries that I look forward to. Here’s hoping there’s a lot more top-notch material coming!

    0
  59. 86

    Hey, what a great article! I’m a huge fan of fullscreen background websites, so I found this one: http://lauros.co.uk

    Sorry for my bad English btw ;-)

    0
  60. 87

    I love the collection and used them to help inspire me to create a site for a restaurant client of mine.

    Hopefully it makes this list oneday.

    0
  61. 88

    Very nice collection.
    Another one responsive and tasty resource that must be added to this collection is http://demo.wplook.com/delicacy

    All the best

    0
  62. 89

    Adding online ordering to these restaurant websites instead of the PDF menus will make it so much better. The website designs are amazing of all these restaurants, but when i see flash or pdf menu it just not user friendly.

    http://www.wpmenumaker.com

    or simply adding a simplified menu version like this. http://www.wpmenumaker.com/restaurant-menu/

    Thank you,
    Constantine

    0
  63. 90

    check out http://www.redgravynyc.com/

    Fully responsive and appetizing at the same time.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top