Moreland Consulting Engineers Ltd are a team of consultant engineers performing Temporary Works Design and Cat III Checks for civil engineering contractors based in Chelmsford. Founded in 2016 by Laurent Davense, he aspired for Moreland to meet an emerging requirement for Cat III checks within the industry.
After a successful make over on a sister site, we started working with Laurent and his team in the summer of last year. We were asked to quote on building this new site for Moreland with a plan to start in the Autumn of last year.
Design & Development
The brief from Moreland was to design a modern, clean and easy to use website that show-cased their projects. Their current logo was poorly composed and their colour scheme was too brash, stage 1 of the process was to evolve the logo and set a new colour palette to portray a more contemporary feel whilst keep a strong, bold look that suits the construction industry.
We decided against a slider for the site after viewing several statistics that highlighted that they can be ineffective. Instead, we decided to go for a large succinct statement which clearly informs the users.
The rest of the homepage followed a full width design, alternating between flat blocks of colours from the chosen palette and images. The first major blocks of information focus on their two main services – with ‘Read More’ buttons for further content.
As an alternative to a page full of read more buttons, the links on the other service blocks change colour on hover to indicate you can interact with them and lead you to more content.
Using featured images for the news section, helps lead the eye to read the full article and helps to break up the layout.
We added extra interest with a parallax skyline at the top of the page beneath the menu. This adds subtle animation as the user scrolls down the page but keeps to clean, clear design approach.
For the rest of the site we maintained a consistent colour palette, using the full width layout to accommodate content for multiple devices.
If you view the projects and services page you can see examples of this the only difference being the services pages has a different colour per section and on the projects page we use the featured image of the project to showcase the different work Moreland have done.
As mentioned in the development section, the most noteworthy feature of the site would be the parallax skyline which is part of the header. The skyline is built out of two layers, when laid over the top of each other it creates the skyline effect. When you scroll down they move at different speeds which creates a distance between the blocks like a skyline disappearing behind a horizon.