Inclusive Retreats

Summary

I was invited to this project by former colleague and trusted business partner Peter Lewis, to design and build the front-end of the site. Peter worked as the main client contact and the back-end developer/devops engineer.

My initial task was to come up with a simple but striking brand that would evoke high quality while maintaining an informal contemporary style. I decided on a simple logo mark in striking purple, that communicated the high values of the brand while standing out from the competition. The logo plays with the initial letters of Inclusive Retreats in a simple but effective manner.

I worked with Peter and the client to establish a sitemap based on several user journeys. We were working towards a Phase One of the site, which would be a full brochure site and a basic contact form once the customer had selected their choices. Phase Two would come later and would integrate a full booking system.

Once we had the structure of the site in place, I produced a number of wireframes for the key screens. These were honed after several rounds of feedback from the client, and used to inform the visual design. I produced just two PhotoShop mockups, one of the homepage, and one of a holiday details screen. This was to help the client understand how the site would look overall, but left us plenty of flexibility to modify the design during the front-end build.

I built all the front-end templates for the site mainly using flexbox for layout. As usual, I hand coded the HTML and Sass CSS from scratch, without relying on any frameworks. For a site of this scale, a framework would have caused us far more problems than it would solve. We needed complete control over the HTML and CSS. I built an SVG sprite system and a number of ‘automatic’ layout modules that would re-format their contents depending on where they appeared within the page. This used a simple system of CSS sibling selectors which can be extremely powerful when used smartly.

I was particularly pleased with the treatment for images, using an inset border with an area cut out for titles/subtitles. It’s an unusual technique not often seen on the web, giving some identity to the overall style.

Once the main templates were built, my colleague Peter set to work on building the back-end in Craft. This was a very large build and we worked together over many weeks to ensure that the front-end was as flexible as possible to work with the the back-end system. The core of the system was a page-builder, a modular system in the CMS that allowed the client to build pages out of small modules in any order they chose (within some pre-defined constraints). This gave the client incredible flexibility in what they could build without needing to touch any HTML or other code.

I’m extremely pleased with the design and build of this site and the client is delighted with the final result.

Postscript

Due to funding problems, the website was only live for a brief time before the client decided against investing further in the project. The site went offline and only lives on through backup code and screenshots. This was incredibly disappointing, and a major factor in my decision to stop doing freelance web-design for direct clients. Six months work down the drain. It’s not a fulfilling way to spend one’s time, is it?