A while ago I worked on a prototype for a website for a luxury hotel brand. The prototype turned into an almost complete front end build and the client decided to not go with us in the end, but I'm still proud of the work.
This was my first large scale project working for Builtvisible and I'm really pleased with the result. It's nearly been a year since I completed work on this, so I'm posting it a bit late.
The prototype consists of three pages, each fully mobile responsive. The pages are fairly light on functionality but have a few nice touches (detail below). First, here are three pages:
Home page
The home page features an expandable booking widget, hot spot navigation in the 'Welcome' section, an interactive location map with retreating overlay, and a couple of carousels to pack more content into a smaller space. The booking widget was built to be functional, connecting through to the original backend of the website.
Most of the imagery was taken from the client's resource library, apart from a few photos taken on a fact finding trip to the hotel.
Dining page and Accommodation page
Both these pages are built on the same template but with differing content. They also feature the booking widget but apart from that the focus is on the content rather than functionality.
Design
The aim of the design was to convey a feeling of luxury, conveyed through a clean colour palette inspired by the hotel interior and a careful balance of photographs and solid colour areas. There are also plenty of subtle CSS transitions for both hover effects and animations to help add to the overall effect.
Responsiveness
The site was built for all sizes of mobile and tablet device. The Dining and Accommodation pages feature a slide in booking widget on mobile and an expanding submenu in place of the left hand navigation. The tiles on the home page retain their aspect ratio as they scale, meaning that some content has to be carefully removed as the screen scales down.
SVG images are used wherever possible to retain a crisp appearance on high pixel density screens, while the srcset attribute is used to serve appropriately sized images.