Wine, Websites and Design—Oh My!

Last week I was doing some online Christmas shopping (ahem, looking for presents for myself) and I came across a super cool gift idea. I stumbled upon a company that offers completely customized bottles of wine. You can select everything from where the grapes are grown up to the design of the wine label. This set my heart all aflutter, because it marries my two favorite pastimes: designing and drinking.

I was hooked. I started to explore the site further so I could get to work on a bottle of booze, pronto. But while toggling through pages, I became disheartened. I spent way too long searching for the pricing information (which was buried at the bottom of the “about us” page—not at all where I would think to look), and then I couldn’t figure out how to get started on step No. 1 (grape selecting!). I kept getting led back to pages that told the company story, and while it was a lovely story supported by a beautiful brand, I just wanted to make my Zinfandel and move on with my life.

After spending several frustrating minutes trying to navigate through their site, I grew increasingly annoyed and ended up browsing away from this most awesome gift idea. I gave up on wine and design and the angels cried.*

This account of shattered Yuletide dreams isn’t merely a sob story—it’s also a tale of caution for companies: be careful not to sacrifice organization and usability in favor of aesthetics.

Two major tools used for site organization and planning are site maps and wireframes. A site map is basically a diagram of all of the pages of your site. It establishes the hierarchy and relationship between everything offered in your navigation menu. A wireframe then zooms in on each page, laying out the skeleton for how the site content will be pieced together. It’s used to ensure that all elements of the site have a home and that those elements are fed to a viewer in a strategic way.

These tools ensure that the strategists, programmers, designers and writers are all working from the same plan and fully understand the breadth and goals of a site. These two documents not only keep everyone accountable, they’re the foundation of an entire site—and everyone knows a house can’t stand on a shaky foundation.

Below are examples of what these tools look like.

Sample site map:

Sample wireframes (2 page views):

*I am accepting wine donations to compensate for the letdown I suffered last week.