The Vine Inn Davis

A new website for a boutique hotel in downtown Davis, CA

The Vine Inn Davis website mockup splash half

Project Brief

Design Challenge: What kind of website design will reflect the future of The Vine Inn Davis?

The Vine Inn Davis is a hotel located in Davis, CA, located within walking distance of the UC Davis college campus. The property was undergoing an extensive remodel and needed a new website. The Vine Inn upon arrival had only a single page of content and absolutely no branding other than a logo.

Skills & Tools Used:

The Final Design

The final website design used cool, warm, and neutral colors. The banner displayed various locations around Davis, CA. A booking toolbar within the banner made it easy for guests to make their reservations right on the website.

The Vine Inn Davis website home page banner
site header with booking widget and navigation
The Vine Inn Davis website home page callouts
home page call to actions for rooms, local attractions, and more
The Vine Inn Davis website home page amenities with icons
home page highlighted key amenities
The Vine Inn Davis website home page footer
home page contact callout and site footer
The Vine Inn Davis website local area page 1
local area page displayed a promo code and map of local attractions
The Vine Inn Davis website local area page 2
local area page displayed list of attractions—each linked to view more information
The Vine Inn Davis website guest rooms page
rooms page with coupons and descriptions of each guest room type

Design Research

Since the website was being created while the hotel was undergoing remodel, a lot of our reference images were computer generated. From this we were still able to extract color schemes and a sense of atmosphere.

The Vine Inn Davis research slide 2
mood board
The Vine Inn Davis research slide 3
The Vine Inn Davis research slide 4
color palette exploration
The Vine Inn Davis research slide 5
The Vine Inn Davis research slide 6
The Vine Inn Davis research slide 7
typography sample
The Vine Inn Davis research slide 8
The Vine Inn Davis research slide 9
The Vine Inn Davis research slide 10
The Vine Inn Davis research slide 11
The Vine Inn Davis research slide 12
web design research, wireframes
The Vine Inn Davis research slide 13
The Vine Inn Davis research slide 14
The Vine Inn Davis research slide 15

Design Process

Starting with a basic wireframe, the design was built up over iterations. Each version tied in various placeholders until we gained an understanding of how to arrange content and thus—what content would need to be acquired for the final website build-out.

The Vine Inn Davis website design process 1
The Vine Inn Davis website design process 2

Conclusion

With the mockups complete I was able to deliver them to the web developer who built out the website into a functioning WordPress theme. The website launched in 2019.

Project Team

  • Jacob McAdam: Visual Designer and Content Developer
  • Moe Himed: Website Developer

This website was made by OptiRev for their client The Vine Inn Davis (2019).

Back to Top