Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Captivating Winery Websites For Your Inspiration

From the Napa Wineries in California to the vineyards of Australia and France, the beautiful designs of these wine maker’s websites embody the spirit of the vine. Trends for winery websites have been leaning towards a dynamic Flash introduction, animation and beautiful graphics, which would give the best representation of the products for the target market.

While sites have gone in the direction of a more modern and contemporary approach with fresh and sleek designs, others have taken the more traditional route by captivating their users with the bold earthy Tuscan colors and impressive graphics and art.

There is much to consider when designing a site for a wine maker. Use your creativity to promote the wine and winery, so that the quality portrayed encourages users to inquire how to contact, where and how to buy, and even obtain information on upcoming events.

Good design ≠ Good visual design Link

Unfortunately, winery sites strongly focus on the visual design, while best usability practices are often ignored. For instance, some web-sites do not offer a search functionality and use hardly readable content (and the size of the text can not be increased, because the text is embedded into a Flash-animation). Besides, since many sites are Flash-based, it’s also impossible to bookmark a specific page, although (in general) it can be achieved in Flash).

Screenshot
When good visual design fails: the font-size of the text on Dancing Bull Wines can not be scaled up; for many users it may be way too small for comfortable reading.

A good design is not a good visual design; good design is rather a balanced combination of good visual design and usability, resulting in the positive user experience. In our experience, too many sites appear to be very complex and hard to navigate, because in the trade-off between visual design and usability designers often decide against the latter one.

Winery Websites For Your Inspiration Link

With that in mind, we share with you 40 captivating wine maker’s websites displaying some examples how it can be a rewarding experience – please notice that these sites often can be improved in terms of usability.

Moët Chandon1

Screenshot2

Screenshot3

Robert Mondavi Winery4

Screenshot5

Screenshot6

Screenshot7

2 Lads Winery8

Screenshot9

Bonny Doon Vineyard10

Screenshot11

Screenshot12

Dancing Bull13

Screenshot14

Screenshot15

Red Bicyclette Wines16

Screenshot17

Chandon18

Screenshot19

Caduceus20

Screenshot21

Black Estate22

Screenshot23

Da Vinci Wine24

Screenshot25

Folie à Deux26

Screenshot27

Champagne Clerambault28

Screenshot29

Screenshot30

3 Blind Moose

Screenshot

Screenshot

Pepi Winery31

Screenshot32

Screenshot33

Rex Goliath Winery34

Screenshot35

Domaine Laroche36

Screenshot37

Screenshot38

Frog’s Leap

Screenshot

Screenshot

Dog House Wine

Screenshot

Tenuta dell’Ornellaia39

Screenshot40

Screenshot41

Big House Wines42

Screenshot43

Screenshot44

Gnarly Head

Screenshot

Domaine Carneros

Screenshot

Yellow Tail45

Screenshot46

Screenshot47

De Saint Gall

Screenshot

Screenshot

Hatten Wines48

Screenshot49

Screenshot50

The Little Penguin51

Screenshot52

Chateau Lazaridi

Screenshot

Rocky Creek Winery53

Screenshot54

Renwood Winery55

Screenshot56

Toasted Head57

Screenshot58

Rumbaur Vineyards59

Screenshot60

Turning Leaf61

Screenshot62

Mumm63

Screenshot64

Mumm Napa65

Screenshot66

Bonus: Wine & Beer Bottle Design Tutorials Link

Wine bottles make exceptional design elements. Following are a few “how to create wine bottle tutorials” – we have added them to this article, since they would add value to this article.

Realistic Decorated Wine Bottle Illustration67

Screenshot68

Create a Realistic Wine Bottle Illustration From Scratch69

Screenshot70

Photoshop Glass Bottle Technique

Screenshot

Illustrating a Cool Glass of Beer in Photoshop71

Screenshot72

Beverage Ad Enhancer in Photoshop73

Screenshot74

Design Beer Glass and Bottle in Photoshop75

Screenshot76

Further Resources Link

Footnotes Link

  1. 1 http://www.moet.com
  2. 2 http://www.moet.com
  3. 3 http://www.moet.com
  4. 4 http://www.robertmondaviwinery.com/
  5. 5 http://www.robertmondaviwinery.com
  6. 6 http://www.robertmondaviwinery.com
  7. 7 http://www.robertmondaviwinery.com
  8. 8 http://www.2lwinery.com/
  9. 9 http://www.2lwinery.com/
  10. 10 https://www.bonnydoonvineyard.com/
  11. 11 https://www.bonnydoonvineyard.com/
  12. 12 https://www.bonnydoonvineyard.com/
  13. 13 http://www.dancingbullwines.com/
  14. 14 http://www.dancingbullwines.com/
  15. 15 http://www.dancingbullwines.com/
  16. 16 http://redbicyclette.com/
  17. 17 http://redbicyclette.com/
  18. 18 http://www.chandon.com
  19. 19 http://www.chandon.com
  20. 20 http://www.caduceus.org/
  21. 21 http://www.caduceus.org/
  22. 22 http://blackestate.co.nz/
  23. 23 http://blackestate.co.nz
  24. 24 http://davinciwine.com/
  25. 25 http://davinciwine.com/
  26. 26 http://www.folieadeux.com/
  27. 27 http://www.folieadeux.com/
  28. 28 http://www.champagne-clerambault.com/
  29. 29 http://www.champagne-clerambault.com/
  30. 30 http://www.champagne-clerambault.com/
  31. 31 http://www.pepi.com/
  32. 32 http://www.pepi.com/
  33. 33 http://www.pepi.com/
  34. 34 http://www.rexgoliath.com
  35. 35 http://www.rexgoliath.com
  36. 36 http://www.larochewines.com/
  37. 37 http://www.larochewines.com/
  38. 38 http://www.larochewines.com/
  39. 39 http://www.ornellaia.com
  40. 40 http://www.ornellaia.com
  41. 41 http://www.ornellaia.com
  42. 42 http://www.bighousewines.com/
  43. 43 http://www.bighousewines.com/
  44. 44 http://www.bighousewines.com/
  45. 45 http://discoveryellowtail.com
  46. 46 http://discoveryellowtail.com
  47. 47 http://discoveryellowtail.com
  48. 48 http://www.hattenwines.com/
  49. 49 http://www.hattenwines.com/
  50. 50 http://www.hattenwines.com/
  51. 51 http://www.thelittlepenguin.com/
  52. 52 http://www.thelittlepenguin.com/
  53. 53 http://www.rockycreekwinery.ca/
  54. 54 http://www.rockycreekwinery.ca/
  55. 55 http://www.renwood.com
  56. 56 http://www.renwood.com
  57. 57 http://www.toastedhead.com/
  58. 58 http://www.toastedhead.com/
  59. 59 http://www.rombauer.com
  60. 60 http://www.rombauer.com
  61. 61 http://www.turningleaf.com/
  62. 62 http://www.turningleaf.com/
  63. 63 http://www.mumm.com/
  64. 64 http://www.mumm.com/
  65. 65 http://mummnapa.com
  66. 66 http://mummnapa.com
  67. 67 http://www.photoshoplady.com/realistic-decorated-wine-bottle-illustration/
  68. 68 http://www.photoshoplady.com/realistic-decorated-wine-bottle-illustration/
  69. 69 http://psdfan.com/tutorials/drawing/create-a-realistic-wine-bottle-illustration-from-scratch/
  70. 70 http://psdfan.com/tutorials/drawing/create-a-realistic-wine-bottle-illustration-from-scratch/
  71. 71 http://psd.tutsplus.com/tutorials/drawing/illustrating-a-cool-glass-of-beer/
  72. 72 http://psd.tutsplus.com/tutorials/drawing/illustrating-a-cool-glass-of-beer/
  73. 73 http://www.tutorial9.net/photoshop/beverage-ad-enhancer/
  74. 74 http://www.tutorial9.net/photoshop/beverage-ad-enhancer/
  75. 75 http://www.photoshopstar.com/graphics/design-beer-glass-and-bottle/
  76. 76 http://www.photoshopstar.com/graphics/design-beer-glass-and-bottle/
  77. 77 https://www.smashingmagazine.com/2008/11/24/billboard-top-40-design-showcase/
  78. 78 https://www.smashingmagazine.com/2009/03/12/showcase-of-beautiful-fashion-websites/
  79. 79 https://www.smashingmagazine.com/2009/02/09/movie-website-designs-examples-and-current-practices/
  80. 80 https://www.smashingmagazine.com/2009/04/23/30-beautiful-real-estate-websites/
  81. 81 https://www.smashingmagazine.com/2009/04/04/showcase-of-beautiful-sports-websites/
  82. 82 https://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/

↑ Back to top Tweet itShare on Facebook

Advertisement

  1. 1

    Just finnished a site for a winery. About to go live!

    1
  2. 2

    wow what a pointless article.

    Why bang on about usability in a visual design showcase?

    -3
  3. 3

    Michael Davis

    May 3, 2009 9:29 am

    Take it from a designer (web & print) and major wine geek. The better the site…the worse the wine.

    The best wines come from small producers in rural France/Italy. It sells itself without SEO, Flash or AJAX involved. Not a Twitterer in the bunch.

    Cheers,
    Michael

    -3
    • 4

      Joel Salisbury

      September 4, 2010 1:23 pm

      Do you actually believe this? I think some wines become very popular and then can thusly afford to beef up their marketing efforts. It’s not always vice versa.

      1
  4. 5

    These are sadly, almost all the same: dull, drab, and conformist.

    Sad. Really is. There are a lot better examples of progressive interaction design than these (and yes, I am talking about the global wine, spirits, and beverage industry)

    (SM) please share a couple of these examples with us, Craig!

    -4
  5. 6

    Abdel Faiz

    May 3, 2009 6:42 am

    very intersting, thanks :)

    0
  6. 7

    Michael Chacon

    May 3, 2009 6:46 am

    Cool, thanks!

    0
  7. 8

    Sergey Kapustin

    May 3, 2009 7:40 am

    One more wine-related website with award winning design

    0
  8. 9

    Erik M Kubitschek

    May 3, 2009 8:01 am

    I am currently working on a winebar site (domacinwinebar.com). Seeking some creative ideas and feedback. (wordpress/flash).

    0
  9. 10

    The Image and the link of “Create a Realistic Wine Bottle Illustration From Scratch” and “Realistic Decorated Wine Bottle Illustration” are mismatch. They should be swapped.

    (SM) thanks, fixed!

    0
  10. 11

    saurabh shah

    May 3, 2009 8:48 am

    nice one …

    0
  11. 12

    Mazhar Khan

    May 3, 2009 8:52 am

    its a nice article awesome!

    0
  12. 13

    As a commercial artist, I really enjoyed and appreciate the creativity that wnet into these sites. Great post!

    0
  13. 14

    nice one … but sorry to say that the google rss feed is no longer working

    (SM) what do you mean? We just checked it and it seems to work just fine.

    0
  14. 15

    Oops! Sorry about the typo. “went” not “wnet”. :-)

    0
  15. 16

    Diego Ghiggi

    May 3, 2009 9:55 am

    Great sites, but the De Saint Gall and The Little Penguin are wrong with the reflection.

    Cheers.

    0
  16. 17

    That Nokia ad up top is obnoxious. Way to go Smashing. This is why I deleted your RSS and stopped visiting.

    0
  17. 18

    Black estate has a really cool site!

    0
  18. 19

    There’s a lot of value on the wine labels and the cork, they give the identity to the bottle, and the vineyard, but it seems that’s not taken into account in the design of those websites, since most of them are pretty ugly. (except for a few examples).

    0
  19. 20

    Wine sites really cater to a select group (people who REALLY enjoy wine.) For the rest of us, they are pretty simple, 5 page sites with not much else.

    0
  20. 21

    Leif Miltenberger

    May 3, 2009 2:52 pm

    Thanks for featuring one of our designs (the Rocky Creek Winery site)! I’ve really enjoyed looking through the other sites listed here – quite a few that I hadn’t seen before.

    Cheers!

    0

↑ Back to top