Including some of the world’s foremost luxury hotels, The Dorchester Collection wanted to bring all of their hotels under one umbrella website. The website needed to reflect the Dorchester brand with a clean magazine-style layout and to utilise responsive design to optimise the website for use on tablets and phones.
Custom-made grids based on Twitter Bootstrap were used to provide a responsive design that adapts to the users’ screen size. As the client previously had dedicated mobile websites, it was important that the new website provided as good a user experience. The website is also resolution independent; using multiple image sizes, SVG images and icon fonts so that the website is visually sharp on all displays.
The content is presented in a magazine-style layout, minimalist yet with with well-defined blocks of content. This style was chosen to showcase their content and imagery in an attractive way but also provide good readability and usability.
Social media is an integral part of the clients’ strategy for their online presence, so a social media hub was created for the website. This incorporates a tweet map, social media widgets, online reviews and links to each hotels’ social media pages.
The grid of suites and rooms can be filtered by room type with more information revealed by clicking on the plus sign on each room.
A dedicated hub features information about each hotel's location including a map of local attractions, a location gallery and what’s going on in the area.
Crystal Palace F.C. required a new, stand-alone website to promote their hospitality and event services at their home ground, Selhurst Park.
An eye-catching and immersive fullscreen header image section is used to promote their services and events. For added visual interest, scrolling down the page produces a subtle parallax effect and the images are responsive, with only the appropriate one being loaded to fit the screen size.
All the event spaces are presented and the user can filter the spaces by event type or room capacity. The results can be formatted as a grid or a list with animated transitions between states.
Gallery panels are used throughout the site to highlight all the facilities in different areas of Selhurst Park. The gallery features thumbnail navigation and an integrated virtual tour where available. The gallery uses responsive images and is touch friendly to deliver a great mobile experience.
Tabbed content such as the Wedding packages intelligently switch between tabs on large screens to accordions on small screens, making the best use of the space available to present the content.
In a loop of the Thames, Greenwich Peninsula is an 'island' community at the heart of London and the capital's most exciting new district. The website aims to immerse the user in this new district and showcase the new properties being build there.
The website is responsive to tablet size with a separate one-page website for mobile devices. Bootstrap 3, an icon font and SVG were used to make it responsive.
An interactive map highlighting the districts of Greenwich Peninsula, local attractions and amenities. It was created to be responsive, touch-friendly and retina-ready using Leaflet.
The design uses large images, generous whitespace and clean typography to reflect the properties of Greenwich Peninsula. Each district and property in that district is given its own distinguishing colour.
On the property details page the header and footer are removed so the user can focus on the property. All the information about the property is presented in a tabbed panel including floor plans and photos of the property.
This is a blog of news and events for the Greenwich Peninsula community, laid out in a responsive grid design. Updates about the development and community events such as art shows, festivals and events can be found on the blog.
St James’s is a luxurious 5 star boutique hotel in London. Their website needed to reflect the character of the hotel, while showcasing their beautiful rooms and Michelin star awarded restaurant; Seven Park Place.
The website is optimised for display on desktop and tablets, with a separate dedicated mobile website.
Each room panel has tabs with more information and also an integrated social media button.
A microsite was created for their Michelin-star restaurant to highlight its elegance, haute cuisine and Head Chef William Drabble. The microsite was designed to make a strong impact, with a striking background and easy access to a gallery of restaurant images.
To show off the delicious cocktails available at the hotel’s bar, a parallax scrolling panel was created featuring images, ingredients and instructions.
With views of Hyde Park, Lancaster London puts its guests at the very centre of this vibrant city. Along with the hotel’s central location and luxury bedrooms, the website also needed to promote Lancaster London as a venue for fine dining, meetings and events.
Designed to give the feel of a tablet app, the website features a fullscreen background image with fixed navigation and sidebar. Smaller details like an icon for the home link, a slide-out share menu and large buttons reinforce this theme. The website is also responsive to tablet size with a separate mobile website.
For maximum impact, the gallery was designed to give most of the screen space to the images, tying in with the app-like design of the website.
Emphasising the hotel’s central location, a Google map of nearby attractions allow the user to see all the main attractions at a glance, read more information or find directions from the hotel.
A name known the world over, The Ritz Club is one of the most luxurious private member’s clubs, combining the greatest gaming experience with the finest food and drink. The website needed to illustrate this while connecting it with The Ritz brand.
The website is designed for use on desktop and tablets with a separate mobile website. The website is also resolution independent using icon fonts and SVG images to retain sharpness on all displays.
Fullscreen background images were used to show off the decadent surroundings of The Ritz Club with a narrow content area that can be hidden. Fonts, colours and spacing were all carefully crafted to reinforce this luxury feel while adhering to The Ritz brand guidelines.
With state-of-the-art architecture and taking its inspiration from life in the mountains, Hotel Nevaï has created a unique blend of alpine luxury and natural ambience, ensuring the finest stays in Verbier. The primary aim of the website to capture the hotel’s atmosphere and scenic surroundings.
A large header image area was used throughout the website to give users a feel for the hotel. Fullscreen background images of the hotel’s surroundings show off the natural beauty of the area.
The website is optimised for use on desktop and tablets with a separate dedicated mobile website.
A microsite was created for the Farm Club, which is part of Hotel Nevaï and the best place to party in Verbier. A darker colour scheme and new header image carousel capture the character of the club, while interface elements remain faithful to the style of the hotel website.
The Every Hotels group wanted to add value to their offering by creating a blog and local guide giving their customers information about what's going on around their hotels.
The blog covers all the latest things to do, nightlife and tips to get the most out of your stay at an Every hotel.
It was important that users should be able to access this service on all devices so the website was created with a mobile-first responsive design. Bootstrap 3, an icon font and SVG were used for this.
A guide to the must see attractions around your hotel, currently this focuses on the Piccadilly area. Each article features imagery, a google map and all relevant info for the user.
The client wanted a slick and streamlined contact form, so the form was broken down into three steps with animation of page elements between steps to give an app like feel. Google Places location services was integrated to help users find their nearest club.
The page is designed to be responsive down to tablet size, since they have a separate dedicated mobile website.
I create attractive websites, built using best practices that deliver an excellent user experience. I enjoy a challenge and always strive to create the best website possible by writing clear, modular and scalable code.
I have worked in web development since 2004 I am currently the Senior Front-end Web Developer at Digital Agency McCormack & Morrison, where I create projects for high priority clients and develop the in-house front-end framework.