Hotel and restaurant website design

Website design for The Wychwood Inn - a hotel, bar and restaurant based in the Cotswolds.

I wrote the content, planned the structure, and then designed and programmed the hotel website using SCSS, HTML5 and PHP.

The intention was to keep the site fast-loading to help its organic search engine optimisation.

Design of the hotel website

As requested, I used the corporate colours of brown and lime-green throughout the site. The lime green call-to-action buttons draw the eye, leading the user to journey through to the next part of the site.

The Wychwood Inn have great professional photographs, so I used them within the top menu as four large buttons.

On a desktop computer, there is movement in the navigation area as the user scrolls. The mobile menu 'collapses' because the desktop version would take up far too much room on a small screen.

‘Collapsing’ hides the menu items behind an icon (known as the burger menu - the three horizontal bars). It’s important to label this and keep it noticeable for visitors.

The burger menu is an orderly way to enable the visitor to find information quickly.

Hotel and restaurant website design
Hotel website in the Cotswolds

Images and media

Understandably, The Wychwood Inn wanted to use large images for visual effect, but I’ve kept the website as fast as possible.

I used a large parallax image on the home page of the desktop; a parallax is an image that stays still whilst the page scrolls.

The parallax was positioned further down the page for two reasons:

  • The search engine bots will easily find the written content.
  • It’s a better experience for users. Loading a large image further down the page helps with the core web vital metric - LCP (largest contentful paint).

These are preferred tactics when developing a website for better search engine rank.

I used a grid gallery on the ROOM pages to show the lovely photos of the bedrooms. Again, I needed to use higher resolution images to look good on the page, so I used an image loader which speeds up the process.

The images open a larger version in a lightbox; a lightbox displays images by filling the screen and dimming the rest of the web page.

On each ROOM page there is a Google virtual tour created by Andy Willis Photography.

Structure of the website

The website splits into four main areas - STAY, EAT, DRINK and BOOK. The structure makes it easy for visitors to find information. They are micro websites in themselves.

Internal links and call-to-action buttons help the visitor to navigate.

Written content for SEO

I wrote each page after I researched key terms for which the site would rank well. The build was design-led around those keywords.

The AREA page is an informative hub around Shipton-under-Wychwood (the village), where I was generous with external links to help the SEO.

Writing 'THE BAR' page was enjoyable - conjuring up the image of this historic building to a would-be visitor.

There are plenty of really informative pages on the site, written around terms that I know are searched online. They help the user understand what is on offer at The Wychwood Inn, creating a great user experience.

View more of my web design portfolio