Mobile Friendly Website Design Work Experience – Day Six

Mobile Friendly Website Design
Work Experience – Day 6

Website ScreenshotAfter a relaxing weekend, I cycled back to Drive By Websites, happy to be back doing what I enjoy.

I set about creating an upgrade to a mobile friendly website design idea for Fibre Glass Roof Master, the same way that I had done with a previous website’s template ideas.

The client had not given any design specifications, so I had to present a wide variety of styles to him so that he could decide which style suited him the best.

I screenshotted the template ideas off of WordPress, went into Photoshop, and added this company’s details. However, all was not going to go as planned, as when I tried to copy their logo, I found out that it was combined into the header, and I could not copy it by itself.

I started designing the website templates without the logo, on the five templates that I had screenshot. Most of them had spaces for photos, and on Fibre Glass Roof Master’s current website, there were not many large or clear photos that I could copy. I used the ones that were large enough, and I also copied the company’s information to use on the template. The owner of the company had requested a different look to his website, so I found it difficult to design, since I couldn’t separate their logo from the header.

I had finished designing the templates, so I decided to try separating the logo from the header. I used the Polygonal Lasso tool to separate the two parts, and then I used the Magic Wand tool to remove the white from the background of the logo. I then copied the logo onto all five of the design ideas that I had made.

Afterwards, I edited them because the designs were too white, and didn’t include enough of the blue in the colour scheme. I changed some of the features, such as the font size and the spacing, and some of the layout, following Jack’s suggestions.


Design 1Design 2Design 3


Design 4











Design 5







I then was asked to re-design another website to give it a more modern layout and look. I had three pages on their site to create designs for. This was a hard task, since I would have to use a layout that complemented all three sections, yet one that would let them all be unique in their own way.

The three pages would have the same layout, but different colour schemes on each one.

I started designing the website page but I couldn’t decide between two WordPress themes, so I used both and compared the look of them.