Hotel Website Design Insights – Site Tree

Here comes part 2 of the Hotel Website Design Insights series:

2. Site Trees

Before you jump into designing your website, take some time to arrange it in an orderly, logical way.

In particular for businesses, in this case hotels, it’s vital that the website visitor finds the information they are looking for. People are very impatient, especially online, and if they want to know where a hotel is located, they should be able to find this information instantly. Otherwise you risk losing them to your competitors. Optimising a website in such a way is called ‘usability’ and means making a website user-friendly.

For a website to be usable, you need to organize your information into different pages and provide links to these pages from the home page. By providing links to the other pages, you let the website visitor choose which information they want to see and when. Your home page should have links to other sections of the website and an introduction describing the USPs of your property.
Normally, the site tree will be created together with your web agency.

What is a site tree?
Think of it like a family tree – a chart showing all descendants of an ancestor, in this case your home page. All children have to be linked from their parents to illustrate their relationships.

Here is a simple example of a site tree for a hotel website:

Example of a hotel website site tree

A site tree includes a short description (or name of the link) for all the information that will be part of a website and shows the logical relationship with other content items. The different levels translate into priority whereby level 1 features the main navigation items, i.e. more general information. The further down the levels you come, the more detailed the information will be.
Very important links need to be put on the top level, so that the website visitor can access it easily. Very specific information, for example menu options for a banquet, will only be needed by a limited number of website visitors and therefore can be linked from further down in the tree, although it should still be easily findable.
There will usually be a footer level, too with either additional links that are only accessed very infrequently (e.g. legal information) or repeating links a website visitor may want to access again after having scrolled down a page.
External links lead the visitor away from the website to a different domain and are highlighted in a different colour.

What’s the purpose of a site tree?
By creating a site tree, website content can be organized logically and relationships between information can be defined. The site tree also helps to make sure no information is forgotten.

The graphic designer will use the site tree and know exactly how many information items a website will contain and how many levels of navigation there should be. They will so be able to create a layout fitting everything in. It should be noted, that the site tree may well be changed/rearranged by your web agency and / or a designer to improve usability.

Hotel Website Design Insights – Wireframes

This series of 3 blog articles will be about hotel website design or redesign or better the initial stages before the design process even starts.
You will learn about:

  1. Wireframes
  2. Site Trees
  3. Design Brief

Here we go:

1. Wireframes 

So, you want to redesign your hotel website.
Before the actual design phase, i.e. before a graphic designer even begins with the layout, the first step should be the development of a wireframe.

What is a wireframe?
Think of it like a floorplan of a flat – a simple drawing showing were the kitchen will be (including sink, fridge, cabinets etc.) A wireframe is a line drawing illustrating how your new webpage will be organized. It usually lacks typographic style, color, or images, since the main focus is on functionality, usability and importance of content. In other words, a wireframe focuses on what a screen does, not what it looks like.

Here is a simple example of a wireframe for a hotel website:

example of a hotel website wireframe
Example of a hotel website wireframe

A wireframe includes all the ‘elements’ that will be a part of a webpage, including navigation systems, website functionality, like a web form linking to the online reservations interface, and how they work together. Wireframes can range from pencil drawings or sketches on a whiteboard to wireframes produced by means of a broad range of software applications.

What’s the purpose of a wireframe?
By using a wireframe for the initial layout, elements can be quickly moved around and re-organized. This is an effective way to quickly make prototypes of pages, while checking the practicality of a design concept. It allows for faster collaboration and vastly improves the graphic design process.
The idea is to arrange the website elements to best accomplish a particular objective. For hotel websites this will usually be to direct website visitors to make a reservation. However, a wireframe is not always necessary especially for simple websites. The downside of giving the designer a wireframe is that this may hinder the creative process. So, if your website isn’t very complex, doesn’t contain very many ‘elements’ and you don’t have a specific layout in mind, you can opt for leaving the this totally to the designer.

The wireframe provides the graphic designer with an organized blueprint to work from.