Project: WineTree Vineyards

by Brian Farr — March 1, 2012

WineTree Vineyards, a local winery owned by close friends of mine, came to me to ask if their pre-built website could be improved. The hosting package they had been using had very limited layout options and did not have allow them to use their own photos, among other problems.

WineTree Vineyards home page

We met and agreed that a static site, backed by a simple CMS for easy editing, would best meet their needs.

They already had a great logo and some ideas for branding and color scheme — they also run a print shop and were awesome to discuss graphic design issues with.

One of the biggest factors in all of the design decisions we made was clear communication to the customers. There were certain features of the business that they wanted to strongly emphasize, like the two locations available for tasting, being able to visit the production facility and vineyard, and that it was family-owned. We achieved this through careful and informative writing, and lots of inset photos from around the winery.

WineTree Vineyards Tasting Room page

After doing some user testing, we improved the home page to provide more pathways into the site, especially with the short phrases above the fold describing different areas of the site. We also added a second navigation menu at the bottom of the page, and a return to top link.

Design Notes

The site makes use of Open Sans for body text, a friendly humanist typeface available for use on web sites. I used Georgia, a very readable, yet sophisticated, serif for the headings. The logo was already designed by the owner, Craig Bandy. They make use of the lovely darker red in much of their branding, so it was a natural choice for the design.

Technical Notes

Although the site is filled with graphics and photos, loading speed was still a goal. To that end, I was careful to optimize the images used in the background, page and headers. Choosing the right image format, such as GIF or PNG for low complexity or color line art and graphical elements, and optimized JPEG for photos and more detailed art, can yield huge filesize savings. Additionally, JPEG images can often be set to quality settings around 50-70% before there is any noticeable artifacts, which can also give huge savings over a naive full-quality JPEG export. Once the stylesheets were finalized, they were also minified to remove comments, collapse blocks, and remove extra line endings.