Work

×

The Dorchester Collection

The Dochester Collection

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.

Responsive design

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.

Magazine-style design

Restaurants

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 Connect

Social Media Connect

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.

Suites & Rooms

Suites & Rooms

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.

Destination

Destination

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.

×

Selhurst Park

Selhurst Park

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.

Responsive Design

The website was designed to be responsive in recognition of the increasing use of mobile devices to access websites. This was taken a step further by creating the styling in SASS/CSS with a mobile-first approach. This approach helps to ensure a great experience on mobile devices. Bootstrap 3, responsive images, responsive javascript, an icon font and SVG were used to achieve this goal.

Our Spaces

Our spaces grid

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.

Galleries

Stanley Stephenson Lounge

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.

Responsive Content

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.

×

Greenwich Peninsula

Greenwich Peninsula

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.

Responsive Design

Greenwich Peninsula on tablet Greenwich Peninsula on mobile

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.

Explore the Peninsula

Explore the Peninsula map

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.

District: Lower Riverside

Lower Riverside

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.

Property: The Lighterman

The Lighterman

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.

On the Peninsula

On the Peninsula

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 Hotel and Club

St James's Hotel

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.

Responsive design

St James's Hotel on tablet St James's Hotel on mobile

The website is optimised for display on desktop and tablets, with a separate dedicated mobile website.

Rooms & Suites

Rooms & Suites

Each room panel has tabs with more information and also an integrated social media button.

Seven Park Place

7 Park Place

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.

Cocktails

Cocktails

To show off the delicious cocktails available at the hotel’s bar, a parallax scrolling panel was created featuring images, ingredients and instructions.

×

Lancaster London

Lancaster London

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.

Fullscreen app-like design

Lancaster London on tablet Lancaster London on mobile

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.

Fullscreen gallery

Gallery

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.

Attractions map

Attractions map

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.

×

The Ritz Club

The Ritz Club

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.

Responsive design

The Ritz Club on tablet

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.

Luxury feel

Gaming

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.

×

Hotel Nevaï

Nevaï

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.

Large imagery

Rooms

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.

Responsive design

Nevaï on tablet

The website is optimised for use on desktop and tablets with a separate dedicated mobile website.

Farm Club

Farm Club

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.

×

Every Hotels Blog

Every Hotels

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.

Responsive Design

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.

Local Guide

Piccadilly local guide

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.

×

Virgin Active

Virgin Active

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.

Responsive Design

Virgin Active on tablet

The page is designed to be responsive down to tablet size, since they have a separate dedicated mobile website.

About

×

Pure Sturcture is the portfolio of London based
Front-end Web Developer Nigel O Toole.

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.

Learning is very important to me so I keep up to date with the latest in web development and continually update my skills. My areas of expertise include HTML5, CSS3, SASS, JavaScript, jQuery and Photoshop.

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.

Get in touch with me on pure@purestructure.com or read my CV below for more information.

Contact

Message sent

I will reply to you as soon as possible.

Message failed

Please try again or email me directly on pure@purestructure.com.