Mock Construction Homepage Design

Having been in the trades for a better part of my late teens and early 20’s I always noticed that most business 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.

mens fashion simple navigation

The Navigation

For the navigation I went with two different styles. The first (the top image) is there on page load. It contains the companies 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.

The Font

Section Titles: Bauhaus 93 Regular

Body Text: Helvetica Regular

Since the trades are such a visual industry, I thought I would use a font that is more visual than pratical 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 to 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.

mock-mens fashion homepage fonts
mens fashion homepage design

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.