Construction Homepage

Mock Design

Having been in the trades for a better part of my late teens and early 20’s I always noticed that most businesses came from word of mouth or in my case it was when I was in the middle of replacing a roof and it caught the neighbor attention. I always wondered why so little focus was put on online marketing.

Well times are changing and a lot of successful construction companies are now investing in their online persona’s. However, as I look through these websites I am noticing a lot of Wix or other website builder websites.

It is for that reason I thought I would build a mock design of what I would love to see in a website for a company in this industry.

The Navigation

For the navigation I went with two different styles. The first (the top image) is there on page load. It contains the company logo and a simple hamburger style menu. When the user clicks the icon the menu will slide in from the right and fill the screen.

The second style (bottom picture) takes place after scroll and remains fixed to the top of the screen as the user scrolls down the site. As the user scrolls the second menu will slide into view from the top. Once in view, the modified logo icon will slide in from the left and the menu options will slide in from the left after the logo.

Mock Website Design Navigation
Mock Website Design Navigation

The Font – Bauhaus 93 / Helvetica

Since the trades are such a visual industry, I thought I would use a font that is more visual than practical for the section headers. Bauhaus 93 is a bold curvy text that manages to still be legible while others of the same style are often too hard to read.

For the body text, I went with Helvetica because of its complementary feel to Bauhaus and Helvetica is one of the best web fonts for reading … so it was an easy choice.

The Call To Action (CTA)

As I had mentioned in the previous section, the trades are a very visual industry. It is for that reason you will find that I have placed the gallery above the traditional “call to actions”. Gallery sliders are a pretty common element in websites, so I decided to change up the layout a bit by placing the navigation to the left of the galley instead of the normal right and left arrows.

Under the gallery slider is where you will find the traditional CTA. For that section, I went with the construction yellow icons to make it pop out from the faint background image.

Mock Website Design

Designed with all different types of devices in mind.

mobile display
tablet display

All the content stacks nicely on mobile devices so that the useability does not suffer.

No matter the device, the design was created with usability and accessibility in mind.


desktop display