Client Name: 360 Fire & Flood

Project Description

Position: Project Manager, Brand Designer
Website Url: www.360fireflood.com

360 Fire & Flood were starting a new construction business that managed disasters and needed a website, logo and branding materials. Their focus was the Midwest, specifically Michigan. I managed the website build and designed the branding assets.

Planning & Research

I started by researching Emergency and Disaster Management websites. Red and blue were commonly used colors and there was a lot of competition, so the logo, colors and branding needed to stand out and we needed to develop trust. The client wanted to focus more on water than fire. I choose two shades of blue, to represent water, and to differentiate the client.

Branding

Next, I built a few logo ideas with fire and mostly water elements. I chose bold and strong font that was clear and legible. This helps establish trust and confidence with the user. I also built the style guide to display the design elements. I also built custom service icons to brand his services.

The client didn’t have any images of himself or his team, so we decided to use stock photography. This website needed to show real people working to once again establish trust, so we decided real images were needed instead of vectors or illustrations.

Project Results

Branded Stock Photography

360 Fire and Flood did not have any images of their company or employees. Because of this we needed to use stock photography to brand their website. A blue hard hat represents carpenters and electricians while a yellow hard hat represents general construction workers operating heavy machinery. Unfortunely, the stock photography website had mostly yellow helmets. Due to this, the helmets needed to be edited and turned blue with the clients logo. We also needed several images in different sizes for the homepage and top banner images.
Using Photoshop, I created the banner size that I needed first. I then dragged and dropped the original image (on the left) into the banner image. I extended the edges of the image by using the cloning and healing tools. I also flipped the image horizontally and added it to the right side to extend it further. On the left side of the banner image, I added a black and transparent gradient. To change the helmet to blue, I created a new layer that contained only the helmet. I then added a layer mask and edited the hue and saturation until the helmet was bright blue. I added a transparent white version of the logo on the helmet and adjusted the perspective.
Using Photoshop, I was able to change the helmet to blue. I created a new layer that contained only the helmet. I then added a layer mask and edited the hue and saturation until the helmet was bright blue. I added a transparent white version of the logo on the helmet and adjusted the perspective.
Using Photoshop, I was able to change the helmet to blue. I created a new layer that contained only the helmet. I then added a layer mask and edited the hue and saturation until the helmet was bright blue. I added a transparent white version of the logo on the helmet and adjusted the perspective.