Visitors to a website tend to like uncluttered simplicity in the layout, and from a designer’s point of view this helps walk the visitor through the information they need, leading to an action being taken such as making a booking or a purchase. Achieving this means utilising negative space around elements that make up a web page. If elements such as paragraphs and photographs only take up something in the region of about 50% of the screen on a desktop version of a website, it helps the visitor focus on the information presented to them without any distractions (the constraints of a mobile phone screen practically forces the designer to do this in a mobile version of a website).

The inevitable consequence of simplifying a web page layout in the desktop version, and therefore leaving lots of negative, unused space, and also creating a mobile version which flows in a similar manner, is that the page becomes longer than it would be if the information was spread right the way across the screen. This is not a bad thing; it helps keep the visitor engaged.

Below we have an example of a website we created recently for Millstone Cottage, a holiday cottage in the Peak District National Park. We’ll go through the various sections of the page and explain how the elements are set out. You can view the website here: https://millstone-cottage.co.uk/

The Banner and Header

At the top of the page we have a large ‘hero banner’, intended to grab attention and draw the visitor in. When designing a website for a hotel or a holiday cottage, it might be tempting to put an image of the accommodation itself here, and while that can be a good idea, in this instance, rather than displaying a picture of the cottage or one of its rooms, the main image shows the visitor a snapshot of some of the spectacular scenery they will encounter in the Peak District. It says straight away, very loudly, that: ‘This is what you will get to see if you explore this area!’. And of course, to get out and about in this region, you’ll need a place to stay. The paragraph across the photograph informs the visitor what accommodation place is, who it is suitable for, and where it is located.

To keep this main banner uncluttered, the website’s navigation menu bar does not appear at first – it only reveals itself once the visitor scrolls down. To ensure visitors know where navigate to next (although a web designer can rely to some extent on the natural instinct to scroll down, especially on a mobile device), there is a large ‘Find out more’ button at the bottom of the screen, just so the visitor knows what to do! But instead of navigating away to a different page, this button scrolls the current page downward to the next section.

The Introduction

Now we come to a brief introduction which goes into slightly more detail and gives a taste of what the accommodation can offer, and some of the amazing places to visit nearby. Notice that the style is clean and uncluttered with plenty of space either side of the content. At the end of the paragraph there are two further options – to ‘Read more’, and a call to action: ‘Book now’. There is nothing wrong with being direct and asking the visitor if they wish to book right away. It is, after all, the reason why they have potentially come to the website – to book holiday accommodation. At the top of the screen the navigation bar now appears (which contains the name of the accommodation, just to remind the visitor!); this has a menu which allows the visitor to scroll to various parts of the page.

More Details and Photographs

Scrolling further down the page we have a fuller description of the accommodation and also a few photographs of the cottage itself. There is another ‘Book now’ call to action button to help navigate to the section of the page where a visitor can request a booking. Note that the colour of the call to action buttons is more vibrant than the colour of other elements on the page; this is to draw attention to the buttons and to indicate that clicking them will make something happen.

The Booking Form

As the visitor scrolls down the page there are more sections, such as photographs of the local area, as well as bullet-points that sum up what the accommodation has to offer. At the bottom of the page we have contact details and then a booking form, which is what we have been guiding the visitor toward. Through this they can send their contact details and request dates which they would like to stay at the accommodation. It is important to consider GDPR regulations when creating applications such as forms on a web page, and it is good practice to disable a booking form until the visitor checks a box to say that they understand that making a booking request requires them to send details such as their email address and telephone number. There is also a link to the Privacy and Cookie Policy should the visitor require further information. This helps demonstrate that the website is open and transparent about the data it collects, and what is done with this data.

A website that is created to convert a visit into a purchase or booking needs to help the visitor gather the information they need and guide them to the product they wish to purchase. If you would like to discuss setting up a website for your business, please get in touch with Spire Designs.