Mykonos Panormos Villas
A case study
Mykonos Panormos Villas case study
DESIGNED FOR DESKTOP, TABLET & MOBILEOffering sumptuous private luxury villas with stunning views over Mykonos’ beautiful Panormos bay, Mykonos Panormos Villas required a website design which reflected the laid-back idyllic nature of a Mykonos holiday. The team behind Mykonos Panormos Villas take a forward thinking and dynamic approach to the web, and understand its full potential and power as a marketing and sales tool, so they commissioned x2interactive to create a totally custom build website design for their site. The tailor-made Mykonos Panormos Villas site was created to perfectly reflect the style and ambiance of the luxury villas, with image rich content and easy-to-use minimalism influenced menu and navigation elements providing a smooth user experience. The website was built using the most modern web development technologies, allowing full responsive design scaling across the whole site, ensuring great functionality across all devices. The content management system for the Mykonos Panormos Villas site is Wordpress, which provides an easy-to-manage backend with great usability and a logical and robust layout, hugely simplifying the day-to-day business of site administration. Mykonos Panormos Villas website has also been comprehensively search engine optimised.
SCREENSThe website screens show exactly how we could take advantage of the freedom offered by a custom site design to create a feature-rich and dynamic website. The Mykonos Panormos Villas homepage is dominated by a full browser window sized image showing the exterior sea view from one of the villas, fully immersing users in the Mykonos experience instantly. The homepage has many similarities to a splash page, but by harnessing the newest web development technology we were able to add full interactive functionality whilst keeping the image as a main focus of the page. The main menu providing full navigation functionality breaks out from the Mykonos Panormos Villas logo on the top left of the page, and can be hidden again with another click. This ensures easy navigation, but at the same time doesn’t distract from the main content on the site and also serves to eliminate clutter. As an example of the full interactivity we built into the site, the breakout menu actually changes colour when activated to increase legibility. We carefully selected all the hues and accents used throughout the website to match and compliment the Mykonos Panormos Villas brand identity to create a harmonious balance across the whole website. The footer at the bottom of the homepage remains hidden until activated, at which point it slides up from the bottom of the page to reveal full contact information for Mykonos Panormos Villas, links to the whole suite of the villas’ social media channels, and the Splendia membership and TripAdvisor endorsements.
The content pages within the site feature some elements from the homepage, but follow their own set of design principles to help to make them unique. The breakout menu remains in the same position from the homepage and retains the ability for users to hide the menu, but on the inner site pages the menu also ‘sticks’ to the left of the page as the user scrolls down the page - keeping all navigation just a click or two away no matter where the user is on the page, providing a seamless user experience. Building on the immersive experience groundwork laid by the homepage, the inner pages of the site use a large content panel occupying two thirds of the right of the page which has a slight transparency. Behind this panel and the menu bar is a fixed background image, so as the user scrolls down the page both the menu bar and content panel appear to float over the static background image. Prominently displayed at the top right of every single page of the website is a large ‘Book Now’ button. With a mouseover, this button changes so that the hues used for accents invert, and two new buttons also break out to the left. This again increases the site’s interactivity, and completely streamlines the online booking process to ensure maximum conversions between browsing for villas and direct online booking of a villa.
The Mykonos Panormos Villas website uses responsive design to create beautiful mobile pages without the need for a mobile specific site. On the homepage on a mobile device, the site logo is positioned at the centre of the browser window with a slight transparency effect, while the breakout menu appears below it. As the user scrolls down the background image remains static, with all content and the menu floating above it. On the inner site pages, the breakout menu and ‘Book Now’ button transform so they float from the top of each page while the user scrolls the page beneath them. With responsive design, all site content and navigation elements are scaled and reorganised automatically according to the width of the browser window used to access the site. This ensures a great user experience no matter what the device or operating system, and has all been accomplished through a single source of content and website front end serving the needs of all users.