New Work: Uphill Manor


About 6 years ago (whilst still at School and doing a paper round), I was out taking photos in the dark one night in the village where I grew up. A couple approached me after realising that I was their paperboy and started talking to me about the photos I was taking. One of the first questions I remember being asked was “how did you afford a camera like that?!” I’ve always been one to save up as much money as I could from various paper rounds and other jobs to buy technology and other such items. My camera was no exception and was funded mostly through the money earned from building a website for the Weston Arts Festival of 2006 (the very first website that I built with support from my Science teacher). When the couple had found out that I was capable of building websites and taking photos, they told me they were the owners of Uphill Manor, a bed and breakfast style hotel at the entrance to the village and asked if I could make a website for them and take the pictures to go on the site.

Of course, I went away excited about earning a large (for a 15 year old) amount of cash and then proceeded to think of ideas for their site. After a few meetings with them and a visit taking all of the photos, this is the site that I had created.

Uphill Manor original site design

The original site design I created way back in 2007

Absolutely awful isn’t it?

In fairness, I was very young and the site was built entirely with Dreamweaver and tables which even at the time was a very old method used to build sites, but I knew no different.

Four years later and I had reignited my endeavours into web design and development through learning to code. I was asked to update some of the text on the Uphill Manor site and in return I offered to redesign the whole site as it was very much out of date. The owners actually declined my offer stating that they were still very happy with the site and that it had all of the information that was needed online. They had also mentioned how many of their guests were very complimentary of how easy it was to use as it wasn’t full of distracting content. Two years passed and the owners got back in touch with me, this time saying how they were in “desperate need of a new site”. Immediately I was very excited to begin working on the project as I had gained even more experience with coding and site design, and would now be fully competent at delivering a functioning website that would be easy for them to update. I initially started planning the whole project in complete depth and wanted this to be the first freelance work that I had managed as a professional project in a very thorough manner. Having met with the owners again, I soon realised that they actually had little interest in running this project like a full creative brief and just simply “wanted a new website”.

The whole process for designing the new site became very simplified as there were some features that weren’t to be included. For example, there would be no online booking system as they prefer to get to know the guests who would essentially be staying in their home through phone or email first. There also would not be any links to sites such as Trip Advisor, bookings.com or Expedia as they would rather have personally selected testimonials publicly viewable on their site; even though every single comment they have on Trip Advisor is rated 5 stars. It’s barmy, but I understand how they would prefer to include messages that have been written in their guest compliments book.

As far as the design goes, I was in a very open position with complete creative freedom to style the site and manage what content would be displayed. I would also be the photographer responsible for the images on the site and the developer who codes the whole thing together. All in all, this one brief pretty much sums up all of my creative skills into one. The first stage of the project was taking the photographs and editing them.

Having edited all of the photos needed, I then began wireframing the site on paper as usual. I prefer to sketch my wireframes as they’re purely personal and are never in any need to be presented to anyone. By having them sketched, they also allow the viewer (either client or myself) to interpret them as adaptable and not fully completed designs.

The site is fully responsive and built entirely on WordPress as a custom theme, allowing for easy editing capabilities. I also created a few modules of my own and made plugins to use them as [shortcodes] in the WordPress editor. One such module is a simple cross promotional set of thumbnail links that can be used in the body of the text to link to other areas of the site. For such a simple outcome, the backend is actually quite complex as I wanted to keep it as easy as possible for the owners to edit in the future.

The following images show each of the page designs across the site. The main idea was for the site to be a location that would slowly reveal the Manor and allow the user to “get to know” it through navigating each of the pages. The images used have an added sense of mystery to them enticing the viewer to want to know more and hopefully book a trip to stay there.

You can take a look through the site at uphillmanor.co.uk and let me know what you think of it in the comments below!

Take a look at uphillmanor.co.uk

Share this post

If you think other people would enjoy this post,
share it across whichever social network is most relevant to you.

Comments


One comment

  1. Not bad, bro – I am impressed. Also, great photos. Well done!


Leave a comment

You can use the following HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>