Hotel and restaurant website design

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

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

These are the languages of the web - I intend to keep the site fast for SEO.

Design of the website

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

The Wychwood Inn have great professional photographs, so I used some in 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 fast loading.

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.

I placed the parallax further down so that Google bot discovers the writing before the large image - much preferred 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 to make it easy for visitors to find information. They are almost like micro websites in themselves.

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

Written content

I wrote each page after I researched key terms for which the site would rank well.

The AREA page is an informative hub around Shipton-under-Wychwood (the village), where I included plenty of external links.

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

thewychwoodinn.com

View more of my web design portfolio