black estate

black estate

While browsing through Greg Storey’s always interesting weblog, I came across an excellent new website for Black Estate Vineyard, a winery in New Zealand.

The entire website is displayed in one long, easy to navigate page. The content is organized into a six column grid; although it is more staggered than organized—but that is why this site is so much fun!

Navigation

Although it is a very long page, finding your way through the site is not difficult at all. The navigation occupies the left-most column, however it stays in place no matter how far down a user is scrolled. When menu items are clicked, the page automatically scrolls in a quick but smooth motion, which is a nice touch that’s been seen somewhat recently on other sites, but works exceptionally well here.

Typography Set in Adobe Jenson, Times New Roman, and Georgia

The entire page is set to a dark gray background; however, the readability is not affected due to the wonderful type and color treatment. Starting at the top, visitors are greeted with a big, beautiful title set in Adobe Jenson, along with a photo of the wonderfully designed bottle on the right.

Each section of the website is dominated by large titles, also set in Adobe Jenson, through the use of CSS image replacement. The rest of the copy is set in either Times New Roman or Georgia, which once gain goes to show how accessible and elegant Times New Roman can be when used properly.

Moving down the page, bright and colorful photos are intertwined with each section. This is done superbly. The photos contrast nicely with the light text and the dark background, which makes for a nice change of pace while staring at a mostly dark design. Also notice how most of the photos have a green and yellow color to them. This reinforces a strong color scheme, but is also a sign of very good art direction. Too many random colors, especially in photographs, can be distracting—which this design definitely avoids.

Stockists

Speaking of color, there is an additional color thrown in occasionally throughout the site: dark red. I can’t get over how perfect this color is for the design. It is used sparsely, mainly for a few small headings, but most notably is used as the background color for the pop-up section of the site called “Stockists.” The white text on an ever-so-slightly transparent dark red, all on top of dark gray, is lovely. Once again, the text is still readable despite the fact that white text on a red background typically brings a big strain to the eyes.

Wines

What I am most impressed with is the use of the grid. Text and photos are staggered throughout the entire site, but the placement of the content is so unconventional and unpredictable that one almost forgets that their is some sort of underlying structure. Pull quotes and photos of all sizes are located all over, whereas the actual copy is usually located in the second, third, fourth, and fifth columns. Whoever designed the site did an excellent job of designing around the content rather than copying and pasting the copy into a pre-defined column.

Criticisms

Gradient

If anything, I’d like to see the wine bottles throughout the page photographed under better light. I’m also not a fan of the random gradient found in the section called “A Brief History of Wine.” The gradient doesn’t fit into the minimal design at all. Other than these few qualms, I don’t have anything negative to add.

Conclusion

The Black Estate Vineyard website is unique, interesting and beautiful. It’s certainly unlike anything I’ve seen in quite a long time. What do you think?

  1. Jonathan Solichin

    I agree, interesting design to say the least. It is very unique in structure. Nice design overall I think.

  2. Robert McCarthy

    The use of the serif in such a bold manner is beautiful. Serifs are often overlooked and underused but this has been used extensively and exquisitely throughout the site.

  3. Kyle Meyer

    I’m in love with the gigantic instances of Jensen, those titles just scream awesome to me in conjunction with the layout. That said, I think the drop caps could be sized a little better to follow the baseline, but overall it’s a beautiful site.

  4. Evan Meagher

    Beautiful. I love how the map at the bottom is incorporated into the background. So cool.

  5. joeypfeifer

    @Kyle
    Yeah, I noticed an issue with the drop caps, too. It seems to line up to the baseline just fine, but the problem is the space below it. Weird.

    @Evan
    I completely forgot to mention the map in the review! It’s done really, really well.

  6. Kevin Zak

    Beautiful site. I disagree with the criticism on the photographs of the wine bottles. I think it is an artistic choice rather than an ignorance that they were photographed in low light. I think the effect sets off the rest of the design quite nicely. I agree one hundred-fold about the random gradient. Too often in minimalistic design is the style momentarily forgotten and something is added that clashes with the rest of the page.

  7. Douglas Bonneville

    Well, I read this article and was very inspired. I came across this and another article at underconseration.com about full-length pages:

    http://www.underconsideration.com/speakup/archives/005396.html

    I redesigned my site entirely because of these two articles:

    http://www.bonfx.com

    I spot a new trend! What better for things like handhelds, too! Scroll down a long page like this on an iPhone. That must be kinda fun!

    Thanks,

    Doug

  8. Tim

    Woah, - Im from New Zealand, I’m designing a long, single page website and my favourite font is Adobe Jenson Pro. That is weird. I need to meet the designer of this website. Very nice website by the way, thanks for sharing.

  9. Douglas Bonneville

    Well, I think we might be on to something here! I sat down with a new client looking for a small ecommerce setup. We reviewed all kinds of sites. At one point we ended up on my site freelance graphic design site (www.bonfx.com) to talk about modal windows for his product closeups. I implemented a JQuery plugin called SimpleModal. Anyway, when I scrolled down the page to show him some examples, he blurted out “hey, your site is one page…you can do that?” We then talked about why the one page worked in my case. He said he thought it was bad to scroll, but had no idea how he got that idea. I chuckled. I explained the bit about advertising and “the fold”, as an former designer for AOL and Netscape and CompuServe, etc. Since he has only about 20 products right now, I said there was no reason we can’t do a one-page store! You get everything when you land on the homepage! He totally fell in love with the idea. So we’ll roll that out in a month or so. Maybe I’ll jump back and post a link to that. We are going “swiss design” in a long format - should be interesting. I’m sure it’s not the only store like that of course, but it feels like a new idea to me anyway…

  10. How to Get Six Pack Fast

    I can tell that this is not the first time at all that you write about the topic. Why have you decided to write about it again?

  11. Kerry Webster

    I found the Black Estate site while reading about site designs using the 960.gs Grid System (ny Nathan Smith). Very well done indeed. This is a superb single page implementation of this css framework. Does any one know the name of the designer or the design firm?

  12. Matt

    Designed by the fellows at Sons & Co.