OFF THE VINE

THE PROBLEM

Design a working website for small winery in Geneva, Ohio called Off the Vine. The company had some specific goals they wanted to include:

  • An ability to buy wines online
  • Feature events that the winery offered to reinforce the idea that Off the Vine was an experience, not just a winery
  • Include local hotels and bed and breakfasts so that visitors can make a weekend out of Off the Vine

SKILLS

HTML, CSS, Javascript, Codepen, GitHub, Atom, Sketch, Adobe Illustrator and Adobe Photosop.

 

THE SOLUTION

With these goals in mind and after researching competition, I created a website with these goals in mind:

  • Include photos of the wine bottles 
  • Include photos with people at the winery 
  • More typographic hierarchy on each page, especially if there is a lot of text 
  • Images that span the entire page minimal texture-if any at all- don’t use it as a filler technique 
  • Actual calendar of events

 

*Above are screenshots of the design, for live site click here

RESPONSIVE DESIGN

It is so important in our technology-driven world to design for mobile. 

All the pages of my live site are responsive to fit for mobile. 

 

REFLECTION

This was my first-ever experience with coding and I really enjoyed it! There was something uniquely satisfying about getting the code formula correct and then seeing the website respond exactly (or not exactly) the way it was programmed. 

I also learned the hard lesson of "your eyes are bigger than your stomach" in translating code to design. While I accomplished lots in the code, not everything I had originally designed in sketches could be translated to the code I was capable of. I paired down immensely and embrace the minimalist vibe.

NEXT STEPS

This is one of those projects I will love to continue to add to. I think there are better ways to present the information, especially the lodging information. I also want to experiment with a shopping feature. Adding a cart in the corner or getting a pop-up cart to see what you're going to purchase.

Using Format