Overview

My clients, the owners of a contracting company based in Toronto, approached me to create their branding and a website to launch their web presence for the first time to help grow their client base. For this project I was responsible for the concept, branding, UI/UX design and the development of their website using WordPress.

My Role

Branding, Graphic Design, Concepting, Wireframing, Mockups, User Interace Design, User Experience Design, Front End Development (HTML, CSS, Javascript, jQuery), Project Management.

Tools Used

Adobe Photoshop, Brackets, WordPress, HTML5, CSS3, Javascript/jQuery.

The Problem

The problems my clients were running into were lacking a space to show off their work and have it easily accesible for their current clients and potential clients to see what services they offer and examples of those services in action. They also, beyond just word of mouth and business cards, had no straightforward way for potential clients to contact them with questions or possible jobs.

Project Goals

1. Have a portfolio to showcase their work and a system that can handle a large amount of images.
2. Create a responsive design so the website is just as easily accesible to clients on a mobile device as it is on a desktop or laptop.
3. Branding that could carry across both digital and print mediums that would be easily recognizable.

Branding

The E&M name comes from the first initials of both the husband and wife founders of the company, which is called E&M Contractors. The company orginally started out offering services in roofing but over the years has expanded their skillset, offering services as general contractors with a focus in custom carpentry, metalwork, eavestrough and siding. I wanted to provide them with a logo that would be strong, iconic and would not solely be associated with roofing services, placing emphasis on their intials and tieing them together with the '&' symbol.

The logo was created with the sans-serif font Helvetic Neue, which I vectorized to modify so that the '&' would fit within the initials and tie them together. I did so by increasing the terminal of the '&' so that it would fit within the left most stem of the 'M', overlaying the '&' above the natural space between the two letters. I used white to make the '&' pop against the light blue of the letters and created a darker blue background to further emphasize and stage the logo. The logo went through mulitple iterations from concept, sketching to digitization to ensure the clients were satisfied with the end result.

Concepts

I created multiple branding comps, using style tiles, based on the colour scheme we had decided upon so my clients would have a very clear visual idea of what their website would look like. I wanted to remain true to their branding by keeping notes of blue to empahsize information and neutral grays to encompass the design along with a bright touch of red as a call to action on certain buttons.

Final Stages

After the final style was chosen I finalized their brand throughout their website, implementing it in Wordpress, uploading and optimizing all of their images and copyright, and provided them with stationary.