Construction Website Design
The Good, The Bad and The Ugly ~ 25 Examples

Looking for inspiration for your next construction website design project? You’re in the right place!

In this article we cover the good, great looking construction websites that will give you inspiration. The bad, common technical mistakes construction company websites will make. And the ugly, design issues you will often within construction website design.

Lastly, we will share out construction web design process and how it might be the right fit for your project.

The Good

1. Level 10 Construction

Why it works: Modern layout, easy-to-read texts all over, beautiful slideshow on hero section

www.level10gc.com

2. XL Construction

Why it works: Unconventional but creative layout, use of colors to separate important sections/pages of the website, not crowded and overwhelming

www.xlconstruction.com

3. McCownGordon Construction

Why it works: Very nice clean layout, great coding and graphics on the features section, subtle animations create extra engagement

mccowngordon.com

4. First Finish

Why it works: creative modern layout, use of shadows creates depth between elements, the heirarchy in the ‘process’ section is genius

www.firstfinish.net

5. The Walsh Group

Why it works: Engaging transitions of elements in hero slideshow, compact and easy-to-use website design and layout

www.walshgroup.com

6. AMHigley

Why it works: Narrower-than-usual body content width is easy to read and friendly for devices, proper project label for each item in the slideshow

www.amhigley.com

7. Monterey Mechanical Co.

Why it works: Use of own quality project images, clear declaration of what they do and offer upfront, clearly-labeled sections

www.montmech.com

8. Building Green

Why it works: topmost navigation not distracting, very clear main navigation, big bold logo to promote brand and presence, services offered clearly presented in a single column

www.buildinggreen.com

9. Truebeck Construction

Why it works: stunning slow-mo video on hero area, minimalistic and straightforward

www.truebeck.com

10. Technical Builders

Why it works: Beautiful photography, unique page loading animation, big catchy texts, not overloading pages with too much content to read

www.technicalbuilders.com

11. SV Demolition, Inc.

Why it works: Strong and constrasting colors, main CTA button on hero section clear and projected well, easy-to-identify CTA also at the footer

www.svdemolitioninc.com

12. Mrozinski Construction

Why it works: Unique layout with clear contrast between sections and elements, subtle but effective hover animations, loading animation unique and matches the branding

www.mrozinskiconstruction.com

13. Bechtel

Why it works: navigation bar has clear presence, information properly segregated in chunks, the contact section has its own real estate, highlighting its importance

www.bechtel.com

14. Desert Star Construction

Why it works: Lots of white space used effectively, elegant typography, subtle but elegant entrance animations of sections and the navigation

http://desertstarconstruction.com

15. Weitz

Why it works: One can easily tell the nature of what they do and the industry they’re in just by the colors, great choices of typefaces used, simple graphics complement the website very well

www.weitz.com

The Bad

1. Outdated Website

A regularly updated website is a reflection of a company’s care and conscientiousness about their image/branding and reputation. Easily and quickly establish credibility faster by making your website up-to-date with both design and content.

2. Non-selectable or Flattened Texts

You’d want to keep your texts selectable and readable by machines as much as possible without compromising the visual aspects of it. This is particularly important for SEO purposes.

3. Hard Transitions & Interactions

Our example website here has a hard-to-use transition that involves both a full mousewheel scroll and some seconds of delay for the animation to take place. To improve user experience (UX), animations applied on transitions and website should be intuitive and flowing.

www.donohoe.com

4. Multiple Distracting Animations & Movements

Animations, slideshows, and transitions should all be played around only when it tells the right part of the story, and when they point visitors to the important areas. But when animations (such as marquee elements) are but put just everywhere and when they move in opposite and unintended directions, visitors might lose focus and their eyes might fall over to different irrelevant areas.

https://mbe-eng.com

5. Missing or Generic Favicon

A lot of websites miss this critical element in the website building process. A favicon serves the following purposes: 1) quick identification of website especially in search results; 2) easy to relocate a website lost in a lot of browser tabs; 3) It further establishes your brand, making it easier for visitors to distinguish a ‘familiar’ website from queries and other websites

6. Broken Links and Media

One of the biggest deal-breakers in the web industry is broken links. Aside from the familiar 404 and 504 errors, encountering a website with a missing or broken content or link almost immediately pushes visitors away.

7. Not Enough Website Security

Security badges, such as the one missing in the example below, is important in telling your visitors that their privacy and information are safe and handled properly. Without such, information that pass through this connection may be tampered by unwanted hands.

8. Flash is Dead.

Flash was once a dominant ‘feature’ found in websites before, primarily used for animations and creating interactive elements. But it’s deprecated, not advisable at all anymore, and is technically inefficient. As a solution, we should look at what the most basic web technologies of today (e.g. HTML5, CSS3, and Javascript) can already achieve, and it’s amazing.

9. Low Page Speed and Website Performance

We may not see these things bother us on a client level, but who loves a slow website? Another issue that a visitor may encounter is when a website is heavy in size and he/she may have a limited internet speed. For optimum end-user experience, optimize your website properly.

10. Bad Responsiveness/Not Mobile-Ready

A website might work ‘ok’ from a desktop perspective, but how about in mobile? A lot of websites suffer this kind of issue where it gets totally messed up, like overlapping elements, unproportional layouts, and so on. Be sure to check your website if it works in at least a majority of devices today to ensure usability.

The Ugly

1. Hard to Read Elements/Texts & Improper Contrast

As seen in the example, the logo is lost in the background image, and the social icons almost blended with the window area of the background. We should always test our elements to ensure that elements—especially the important ones—can be easily seen and identified.

2. White Texts on Pure Red (No, please!)

Using pure bright red color on elements may be fine when implemented properly. However, a bright red section with white texts such as the one seen in the example below only burns the eye, keeping visitors away from actually reading the content.

3. Too Much CTAs

A website layout and the corresponding elements should all let visitors know what the owner does or offers, and lead them to the right step/s. But when you throw too many buttons and call-outs, not to mention some pop-ups, visitors will find it very hard to identify what will their next step/s be.

4. Too Much Going on in One Viewport

The below example website may seem aesthetically catchy, but a lot of elements are too small, and the overall layout looks too compressed. Using white/negative spaces serve one great purpose: to allow breathing room around elements or sections so users can focus on one idea at a time. This example could really use a lot more white space.

5. Ugly Collages/Galleries

The example below is a clear example of what we want to avoid visually. As much as possible, avoid having images that are rotated to a certain angle, or flipped, or stretched unproportionally. Doing such steers visitors away from looking at what you’re trying to showcase.

6. Uneven and Untidy Layout

Aside from having a weirdly-sized button above the fold, the testimonials section of this website has aligned content to the bottom, leaving an uneasy negative space above that serves no good purpose. Alignment in layout is important because it makes the UX more intuitive, and allows the visitors’ eyes to flow properly from one element to another according to pre-set hierarchy.

7. No Visual Contrast & Hierarchy

As you can see in the example below, practically all elements—including the background—uses only one hue of a color, and almost the same saturation at that. While the blue color might be easy on the eyes, finding information and distinguishing one element from the other will be hard.

8. Blurry & Pixelated Images

This is basic: blurry or pixelated images are ugly. If you really cannot provide a quality image of your own, better run to stock sites and grab a good one rather than sacrificing quality. This is one other big reason why we insist that companies hire proper photography services.

9. Too Much Going on Above the Fold

Aside from setting up proper hierarchy to elements and giving a clear CTA, we must also avoid the temptation of flashing too many elements that we thought would entice visitors into grabbing our offers or services. Remember, by stripping away unnecessary elements, UX will be improved.

10. Lack of Effort or Investment in Web Design

As they say, “A business with no sign is a sign of no business”. It’s also tantamount to saying a business with an ugly website is a sign of a possible ugly business. Invest in a proper website. Hire the right web design and development agency. In the end, you get what you pay for.

Construction Website Design: Why We Love Working With Construction Companies

If you’re looking for help with your Construction Web Design project, you’re in the right place.

We love working with construction companies. Read the last paragraph in the article to find out why.

We’ve worked with many different clients within the construction industry. From piping, cutting and building infrastructure. To roofing, window installation and siding. While all of our clients are unique we’ve found that there are some similarities in terms of the main benefits we offer our clients.

Here are the main benefits we provide:

Highlight Your Projects

When potential customers come to your website they want to know that your company can deliver. Typically the first thing a visitor does when browsing a construction company website is visit their projects page to check out their work. We help our clients put their best foot forward by making the design clean, visually appealing and image heavy (people don’t like to read these days.)

Also, we use multiple category filters for every project, so visitors can filter by project type, such as piping, structural, hydronic, etc… Or they can search by industry, such as government, commercial and residential. This allows users to quickly filter through your project portfolio and get to the specific type of work they are interested in.

Easily Found on Google

If you’re like most of our clients then you probably get most of your new construction business via referrals, word of mouth and personal contacts. But wouldn’t it be nice if your new website could generate an entirely new stream of business that you wouldn’t otherwise have gotten? This is something we help our clients do. As you probably know the construction industry is a little behind the times when it comes to online marketing. Because of this it won’t be that difficult for us to get you top ranking for key search terms in your area. And when it comes to SEO (Search Engine Optimization) we don’t just talk about it. Just ‘Google’ ‘San Francisco Web Design’ or ‘Hire a Web Designer’ and you’ll see that we’re at the very top of Google for both of those keywords.

Mobile Responsive

Did you know that almost 25% of all website traffic comes from mobile these days? All of the construction websites we design are fully mobile responsive. Adapting for the iPhone, the iPad and all other mobile devices. We also design your Project and Service pages in such a way that they are easy view on Mobile, since those are the pages most often visited.

Strong Call to Action

Our main goal when working with a client is not to make them a pretty looking site. You heard that right. Design is not our number one objective. To be sure we love making beautifully designed websites and hope that our portfolio of work reflects that. But at the end of the day the purpose of a website is to generate new business. That is how we measure success for our construction company website clients. Not just in terms of how the site looks, but how it performs in generating new business. That’s why all our sites are designed with strong and specific calls to action to compel website visitors to fill out a contact form, or pick up the phone and take an action.

Construction Website Done For You

Here’s the reason why construction companies love us the most; and frankly, why we love them. Most construction companies we work with are looking for someone to take charge and full ownership of the design process. They are looking for someone they can trust. Both in terms of design, content structure and project management.

Most of our clients want to just push a button, and for a new, awesome looking website to appear without them having to do anything. And that’s exactly what we do. And frankly we love working that way. We appreciate working with companies that trust our vision and our process and let us do the heavy lifting for them.

If your company is looking for someone to rely on to deliver not only a great website but a great experience throughout the process, then count on us. We won’t let you down.