Tri-City Roofing Brand Identity + Website Design

Tri-City Roofing had an old logo and website design that had been stagnant for years. My task was to create a refreshed brand identity and website design for the company.

The existing logo was dated, but overall professional and simple with a simple triangle “roof” symbol above the company name. I created a similar graphic element, but added depth by replicating one side of the “roof” into three peaks – a reference to the “tri” in Tri-City. Stacking the name creates more compact proportions that can adjust to horizontal or square spaces – a must in the current digital landscape, to work with website headers and social media avatars.

I continued brand style discovery by researching the competition. Blue is the most common color used in the roofing industry, and was also central to Tri-City Roofing’s previous logo and website. I didn’t want to stray too far from this, especially since blue is a good color for trust, reliability, and professionalism – all qualities that are important to Tri-City Roofing. To help differentiate Tri-City Roofing’s website from the sea of blues, I added a warm terra cotta and soft gray to the palette, with a vibrant gold for accents.

Textures abound in the roofing industry, so I took advantage of this by using textured backgrounds with overlays in the brand colors. I also created a seamless background pattern that uses the roof graphic from the new logo. This allows for a more subtle texture option while reinforcing the brand style. Thin chevron-shaped dividers separate the many sections of the website’s homepage, and also create repetition of the pitched roof style of the logo.

Tri-City Roofing’s values and consistently high reviews are important to the company, so these are both highlighted in the website layout. The team at Tri-City Roofing want to have direct contact with their potential clients, so prominent phone and email buttons are at the top of the sticky header on each page. An inquiry form starts the homepage above the fold to encourage a client interaction right away.

View the full site here. Development by Mocha Designs, LLC.