I was approached by Tom and Gary from Midland Damp Doctor to build a content-rich website to market their Leicester based damp proofing business.
After several meetings, which included brainstorming and competitive analysis, we agreed a time frame, contractual terms and price.
The website was developed in WordPress and made mobile responsive. As the website took on its identity, an original graphic logo was conceptualised and produced.
Early Graphic Logo Ideas
Myself and Lee, graphic designer at Ilkeston Web Design, began developing logo concepts for Midland Damp Doctor.
Meanwhile, I sent the video Design Discussion 1: Graphic Logo Concepts to Tom from Midland Damp Doctor to clue him into the design process.
Within a few days of brainstorming, Lee and I had created five concepts and recorded a short presentation for the client.
It is embedded below:
Final Graphic Logo Discussion
As the website neared completion, and with input from the client, the logo underwent several minor changes. We also decided to create two versions of the logo – one for the desktop PC view and one for the mobile view.
Rather then add a PNG to the site, as is typical for most web design, we decided from now on we would always use the superior .SVG format due to it’s small file size and crisp quality. It can also be scaled with CSS inside the stylesheet.
Here are our final thoughts on the logo, including tips on how the Adobe Illustrator vector paths offer a cost saving advantage over raster formats like PNG or JPEG.
When a client is supplied with original source files, they can repurpose the logo for every type of media, from websites to business cards to billboards.
Final Website Overview
The website was started on February 19th 2016 and completed on March 4th 2016, which was the agreed timeframe.
An offline server called WAMP was used to create the site privately, and the site was later transferred to the client’s chosen public web host.
The WordPress Genesis Framework was used together with a customised mobile theme. WordPress “Pages” were used for the main content including but not limited to About, Contact and Testimonials.
WordPress “Posts” were used to set up an RSS feed for damp proofing case studies using a category called Examples. The client intends to publish information about each of the jobs they complete – such as Case Study 1 – as part of their ongoing marketing.
A colour scheme was suggested by the client – their preference was to use a green and black palette but a dark grey gradient was settled upon.
Because the idea of the Midland Damp Doctor brand was one of doctors, surgeons etc, the green in combination with white lent itself well to connotations of the medical profession.
A medical symbol was used as an icon in the navigation bar and was designed to change colour when the link was hovered over by the mouse cursor.
This colour scheme was used as part of the creation of the logo.
Green became the website action colour, meaning that the visitor would always know that the colour green is giving a visual cue as to what can be clicked upon.
Featured images of 700 x 400 were used for almost every page on the site. These images were created in Photoshop using the groups and subgroups feature to organise all images into a clear and well labelled hierarchy.
The featured images, along with other image files, have been supplied to the client on a USB stick.
When an image is added to a WordPress site via the media uploader, multiple smaller versions of different sizes are created, and used by WordPress widget areas.
For this reason, all the cropping areas of each image have to be manually positioned.
This explained in more detail here in an Ilkeston Web Design YouTube video.
A test version was put online at http://www.ilkweb8.dreamhosters.com so the client could examine the website and suggest any last minute changes.
Once the test/preview site was signed off, the task of uploading it to the client’s public server began, including adding and configuring a number of security plugins such as iThemes Security and WordFence.
Contact Form 7 was also configured to ensure all mail could be sent directly from the email contact form directly to the client’s email inbox.
Finally, the reverse proxy CDN CloudFlare was added. This is an excellent tool which caches content, improves performance and acts as a protective shield for the website.
It’s helpful for budget shared hosts because it helps conserve bandwidth.
CloudFlare is normally added to all Ilkeston Web Design client websites as standard procedure.
Below is a video that was supplied to the client to fill in any knowledge gaps and ensure they can refer back to any of the ideas mentioned. The video was published here with the client’s permission.
Once the project was complete, all the files were zipped using WinRar and loaded on to an Ilkeston Web Design USB stick and mailed to the client.
