The previous website fulfilled a need, and did it fine for a while. A stock homepage, a services page, a gallery page and a simple contact page. The guys at Ultimate Yacht Refinishing (UYR) however knew that they needed something better, something more 21st century and something…’trick’.

We teamed up with local company DigitalMOP, who knew this client, the area and market all very well. Over a series of on-site meetings with Nigel from DigitalMOP, our own John from LMD and the guys from UYR, we established the key needs and goals the new website would need to uphold. The aim for the new site was to leverage some good stuff from the old site and add plenty of new features and best practice web development to make something on brand, high quality and future proof. The guys were also interested in reshaping their offerings and promote certain services that most potential customers and clients didn’t know UYR even did.

During the meetings we scamped up what the pages could end up looking like, taking all this into consideration. By the end of our initial visit we had a great idea of what to turn paper into webpages with, and a happy client feeling assured that his then web worries would soon be a distant past.

In order to meet the ‘trick’ objective, we loaded up this website with many features. Most of these can be seen in the About page shown and annotated here.

1. Text effect on the hero image: with the help of the Fullwidth Header Extended plugin, we managed to create a nice effect to ease in the text on the hero image. This effect is found on most of the website pages.
2. Jump-to button: a nice little touch was to add this simple button which allows people to jump with a short transition to the next section. In turn, this triggers the Andy and Dirk images to transition in from the left and from the right respectively.
3. Social media bar: this is found on several pages and pushes the emphasis on the social media importance to this client. The guys at UYR are social media fans and post a lot of content up on their channels – why not take a look yourself.
4. Andy and Dirk images hover effects: with the help of the Image Intense plugin, we were able to add a nice hover effect on each of these images. Hovering shows what each of the specialisms the guys have; a nice clean way of showing content on request.
5. Counters for stats bar: this is a nice way to display key statistics to visitors. The feature counts the relevant stat upwards from zero over a few seconds to reveal the final number.
6. Full width slider: UYR’s clients include some of the most beautiful yachts this world has to offer. So we decided the best way to show just a little insight into their grandeur was to put each craft into it’s own full width slider and allow people the option to use the slider’s navigation arrows to move back and forth between them. Upon load, the key stat for each craft is shown, emerging softly from below. To finish things off, we added some true parallax for a great effect when scrolling down to the next section.
7. Facilities hover effects: like with Andy and Dirk hover effects above, we used the Image Intense to add a nice hover effect on each of these images. The effect is different on these just to mix things up a bit for the visitor, yet keeping an air of consistency with it. For the finishing touch, we added an array of slide-in effects to make things even more interesting for site visitors.
8. Values blurbs: just a simple load effect decision was taken here, as the values section is a little more serious and did not require undue distractions for the visitor.
9. Andy and Dirk contact pods: it was vital for potential clients to have a mechanism to be able to get in touch with the right UYR contact straight away, and to put a face to a role. This is why we added contact pods on almost all website pages, and gave visitors multiple ways to get in touch that would match their given preference. We added click-to-email and click-to-call, and a personal contact form for each of the guys.
10. CAPTCHA security: although it is vital for UYR to receive form based enquiries, we didn’t want to allow for spam or even just simple mistaken form content to get sent through; these guys don’t want to be bothered with this sort of thing. Adding a CAPTCHA feature minimises this risk and keeps the enquires that do come through as genuine.
11. Partners bar: we added a slim bar on every page to house UYR’s partners logos. They are quite discrete being grey-scale, until hovered over when they become slightly larger and in colour. Upon click, a visitor is taken to the partner website. This is a nice way to allow visitors the chance to find our more about how the magic at UYR is done.
12. Social media icons: further to adding the Jump-to button’s above, we added the social channels in the footer of every page too.

In order to meet the ‘trick’ objective, we loaded up this website with many features. Most of these can be seen in the About page shown and annotated here.

1. Text effect on the hero image: with the help of the Fullwidth Header Extended plugin, we managed to create a nice effect to ease in the text on the hero image. This effect is found on most of the website pages.
2. Jump-to button: a nice little touch was to add this simple button which allows people to jump with a short transition to the next section. In turn, this triggers the Andy and Dirk images to transition in from the left and from the right respectively.
3. Social media bar: this is found on several pages and pushes the emphasis on the social media importance to this client. The guys at UYR are social media fans and post a lot of content up on their channels – why not take a look yourself.
4. Andy and Dirk images hover effects: with the help of the Image Intense plugin, we were able to add a nice hover effect on each of these images. Hovering shows what each of the specialisms the guys have; a nice clean way of showing content on request.
5. Counters for stats bar: this is a nice way to display key statistics to visitors. The feature counts the relevant stat upwards from zero over a few seconds to reveal the final number.
6. Full width slider: UYR’s clients include some of the most beautiful yachts this world has to offer. So we decided the best way to show just a little insight into their grandeur was to put each craft into it’s own full width slider and allow people the option to use the slider’s navigation arrows to move back and forth between them. Upon load, the key stat for each craft is shown, emerging softly from below. To finish things off, we added some true parallax for a great effect when scrolling down to the next section.
7. Facilities hover effects: like with Andy and Dirk hover effects above, we used the Image Intense to add a nice hover effect on each of these images. The effect is different on these just to mix things up a bit for the visitor, yet keeping an air of consistency with it. For the finishing touch, we added an array of slide-in effects to make things even more interesting for site visitors.
8. Values blurbs: just a simple load effect decision was taken here, as the values section is a little more serious and did not require undue distractions for the visitor.
9. Andy and Dirk contact pods: it was vital for potential clients to have a mechanism to be able to get in touch with the right UYR contact straight away, and to put a face to a role. This is why we added contact pods on almost all website pages, and gave visitors multiple ways to get in touch that would match their given preference. We added click-to-email and click-to-call, and a personal contact form for each of the guys.
10. CAPTCHA security: although it is vital for UYR to receive form based enquiries, we didn’t want to allow for spam or even just simple mistaken form content to get sent through; these guys don’t want to be bothered with this sort of thing. Adding a CAPTCHA feature minimises this risk and keeps the enquires that do come through as genuine.
11. Partners bar: we added a slim bar on every page to house UYR’s partners logos. They are quite discrete being grey-scale, until hovered over when they become slightly larger and in colour. Upon click, a visitor is taken to the partner website. This is a nice way to allow visitors the chance to find our more about how the magic at UYR is done.
12. Social media icons: further to adding the Jump-to button’s above, we added the social channels in the footer of every page too.