Chris Sissons

About horizonfest website

This site provides a guide to the creation of the horizonfest website.

The main site is horizonfest and this link takes you to the public site. There is also a staging server version of the site, which will mirror the main site at its most complex. The main site is likely to come down towards the end of July 2013 and so the site on the staging server may become the main site.

Design Document

This link will download a copy of the original design document for the horizonfest site. It shows what was originally agreed with the clients. It is based on the original conversation with one person. I soon realised there was actually a team of 3 at their end and after meeting them the structure of the site was revised somewhat. I haven't amended the design document.

Site Specifications

This document comprises site specifications. They are extracted from thge design document and so repeat information that is in there. Hopefully, that will be helpful.

Site Structure

The animated site structure us here. This is the same site structure as a pdf.

Site Templates

Here are links to a couple of pages I used to discuss the header with my clients.

These templates were shared with the client at an early stage. The final website shows the results of conversations based on these early designs.

Sample 1 was the file I used to initially create the template file for the website. It shows a header split between the logo and a photo. The photo is of a local landmark traffic island, which is presented graphically in the logo. The logo is not my work and was supplied by the clients. I was also asked to use the logo colours in the site design.

Sample 2 uses a photo across the screen and the logo is transparent. I had problems with a white outline on the logo, largely resolved in the final version. Having a choice helped the clients focus upon what they wanted and they suggested the version we finally agreed.


Click on the images to increase their size. Click again to return to their original size. Click outside the images to remoive any highlight.

All of these wireframes were shown to and approved by the client.

This was the first version of the site. The pages at the top would have been search engine optimised to various interest groups. This is still a viable idea and the reason it was not eventually adopted is explained below.

Original wireframe horizonfest site overview

This second wireframe shows the overall structure of the site. This was produced as the result of wider consultation, where it became evident that the festival itself was more complex. This version has largely survived into the final site, except that in consultation we added a home page. The events are all in a drop-down menu labelled programme and the home page link is to the left of that.

Wireframe showing the overall structure of the horizonfest site

At this stage this page (now the events page) was to be the home page. So, this shows some of the planning for the entire site, eg for header and footer as well as the specifics for what is now the events page.

Wireframe for original home page on horizonfest site (now events page)


This page was first presented to the clients as an alternative approach to the home page. As we explored the possibilities, this evolved into a model for pages showing one event, eg the God Particle page.

This alternative home page for the horizonfest site became the model for single event pages.

My first thought was to deploy a few pages search engine optimised to certain themes in the festival. This would have involved designer several pages with subsets of festival events, to act as landing pages. This did not happen for various reasons. It became apparent that the festival was somewhat more complex than I'd gathered from the original brief. More pages were needed, for example, for crafts based events. I decided to drop the seo pages so that I could deliver the site within the agreed price. The existing pages are, of course, search engine optimised.

Wireframe for page from horizonfest site, designed for seo

This is the wireframe for the about page. This hasn't changed very much. The page has photos of key personnel. The building moved to the location page. There is still a possibility of adding more to this page or a new page about the local area.

Wireframe of about page for horizonfest page

This wireframe for the location page survived almost unchanged apart from addition of a photo of the venue.

Wireframe of location page for horizonfest website