The Brief

I'm going to start by prefacing that this was a bit of a unique project. My name is Harvey Monro and as you may have guessed by the title, the website is for a family business. Having this close familiarity with the client allowed me to have complete creative freedom with the project and use my knowledge to craft their ideal site. As this was an already established business, there were still specific features the client needed to include in the design, but how they were implemented was left up to my discretion as the designer.

Mark's initial requests were clear. He wanted a simple website that showcased who they were, what they could offer and how to get in touch. During our first consultation,  I outlined that all of this would be possible, and recommended other elements that could be featured to help sell their expertise.

Let's get into it.

The Brand

To design any website, knowing the client's brand is imperative. You need to understand who they are and what they can offer their target audience to design a website that accurately reflects that. After speaking with Mark, his main clientele was now going to be local roofs for smaller commercial projects. Although he has worked with large-scale companies and heritage sites in the past, he wanted to downsize and focus on supporting the local community.

Monro Roofing LTD's trademark colour is a cool blue. This was the building block I based the rest of their brand colours around, starting with a few darker and lighter shades of the same colour, before incorporating a bold, golden yellow to stand out amongst the site's primary black background. These colours worked together nicely, both complimenting and highlighting important information.

For the typography, I went with the similar clear, bold Outfit font for all headings, paired with the clean, serif Zilla Slab font for paragraph text.

The Website

The design began like most custom sites made by New Heights Design, on Figma. Figma is an amazing tool that allows me to quickly put together an initial wireframe and easily prototype the main animations on the page. Similar to how roof tiles are laid, I decided to go with a block layout for most of the elements, overlaying on top of one another to highlight important information.

The homepage needed to capture all of the features Mark was looking for, such as a short about section, a highlight of their services and a large call-to-action that would lead to a contact page. On top of these, I also included two important sections, testimonials and projects. Both of these were custom-made and imperative to help sell the legitimacy of their work to potential customers. Mark has been in the business for 40+ years and has satisfied many people with his work. It only felt right to showcase these through positive feedback and a unique hover animation for his most recent projects.

The About and Services page followed a similar structure to the Home page, keeping the design clean and consistent. It was for the project page that I decided to try something new. Here I created a section for each project being showcased, with the main image being full-width of the screen and auto-snapping to the next project on scroll. This was to separate each project and create more of a presentation that simply showed the pictures. Each section had unique animations for revealing information on click and lightbox elements for additional images.

A modern trend in today's design world is unique, micro-animations. These animations are what took the longest to develop, as I had to make sure each functioned as intended and was responsive on all screen sizes. There were many tests and a few had to be outsourced to a friend and product designer mentor to help finish.

The Result

This project took around two months to complete, mainly due to my creative endeavours wanting to add/improve sections throughout the design. The client was in no rush for the website and happy to wait whilst other projects took priority, but in the end, he was very satisfied with the final product and proud to promote it. On-going support will be provided such as SEO and updating projects.