The website redesign
As this was the main thing Carl wanted to be updated and modernised, it was the next part of the rebranding process. During the logo redesign process, I had already created some elements to compliment the logo. These branding elements were utilised to create a mockup of how I felt the site should look. They also solidified the basis of the visual brand elements and colours scheme.
Once I had developed the mockup in Illustrator and formulated how I’d like the site to function, I could then get stuck into the coding and interactivity of the site. A lot of the brand elements were intended to be interactive or animated on the website, so it’s always a pleasure to see the static mockup come to life.
Luckily, even though the existing site was not looking great, it had a bunch of copy that I could use to create the new website. I sourced all-new imagery and filled out the pages with the old site content in the new style I had formulated. I edited all the text to make it easier to read and to allow clear navigation of the site in conjunction with visuals that reinforced the copy.
By incorporating interactivity and subtle animations into the site design, I was able to grab customers attention and entice them to interact with the page. Whether this is to get them to click a link or keep reading, it will keep potential customers engaged and hopefully lead to sales.
I paid particular attention to the responsive aspects of the design so that the site would work well on all devices. I optimised the web pages to be viewed on a large screen first as that was the easiest way to get things approved and to allow us to tweak the elements and layout.
Once the general site styling and design was approved, I then got stuck in with customising the site for use on mobile devices, such as tablets and phones. To ensure that the website looked great on smaller devices, I created bespoke sections that would only be displayed on smaller screens. In contrast, particular styling and sections were designed for larger screens are automatically hidden, depending on the device being used.
Another smart feature I implemented was to reduce the font sizes to ensure that they would display correctly on any screen size. In addition to this, the arrow brand elements were also rotated and repositioned on smaller screens. So that the images were kept with their associated text even though the page element order changed.
We decided to use the WordPress platform to build the site, for its capacity to add functionality and SEO features easily. Another advantage of this was that Carl would be able to easily make small updates to the content of his site, while I handled the more complex design aspects.
You can watch a quick video on how the site functions below, or better yet, actually visit the website here.