The construction industry is home to very little variety. Most websites featured are clean, black and white with an accent color, most commonly blue. While the majority of companies' services are very similar, how a brand is presented should not be. Brands need personality.
With this fictional project I decided to address this observation and create a website for a construction company who wanted to appeal to their viewers as trustworthy, professional, but also friendly and approachable.
Quick Note Before You Get Started:
The company model is all imagination, this means the website strategy does not present the same level of research and discovery that a real business deserves. The project’s purpose is to practice and present design skills.
All the names and/or places presented are fictional.
All images are free stock, available photo credits are found at the bottom of this page.
You may notice pieces of text missing from the website, some content, for example about sections or profiles, are specific to the company; this makes any content created without a company unrealistic.
As mentioned, the majority of construction companies use a clean, professional look for their websites. This presents a unique opportunity, it makes standing out easier and all the more profitable.
There are untold ways to stand out in an industry; brand identity, feel, color, visuals, approach, just to name a few. How does this case study stand out in its proposed industry? It began with color. When looking at various construction company websites I noticed their minimalist color schemes of black and white with one accent color. This approach creates the ‘clean & professional’ vibes, so instead, I created a friendly feel for a brand that wants to be approachable to a variety of clients; home owners, families, and corporate. I did this by creating a color scheme with multiple colors and using them prominently throughout the website.
Other small details I used to create this friendly and approachable website are rounded corners, a softer typeface, and images that feature more than just the tools used (a trend I noticed in the industry).
But I didn't want to ditch the clean and professional feel all together. By maintaining some of the sharp corners and clean lines, as well as generous white space, the website presents the viewers with a friendly and professional company.
Viewers should not be asking; is that a button? Am I still on the same website? Where's the navigation? Can I click this? Navigating and taking in information on the site should be clear and logical, giving the viewer a comfortable experience.
Notice first the ‘clickable’ elements in this website. Can you easily identify them? Why? The buttons all share similar formatting, the same height, rounded corners, and capitalized text. Text links also share the formatting setting of capitalized text to identify them.
What about the website as a whole, can you recognize easily that any given section is part of the overall feel? In the services section I re-used the same gradient as in the hero section (the first section) to achieve a cohesive feel. The portfolio section (Our Work) also uses all three colours and the same yellow button to continue the feel. You will also notice that rounded corners throughout the website are all the same. Each of these seemingly small details work together to create a cohesive design, and when applied to the other pages they are easily identified as part of the website.
No matter how great a design, poor images and graphics can completely distract from the quality design and content. Free stock images are not quality, but for the sake of practice I have no other choice with case studies, however, notice the images I chose and why.
Avoid low quality images, or small images that appear pixelated and unclear. You will not have this particular problem with stock, though the problem you will encounter is creating brand identity. It is a challenge to find images that clearly align with your brand. Let me explain. Take the hero section image (the first image), notice how the colours nearly perfectly match the brand colors? This was a complete fluke that I was able to find such a perfect Image, but when a company produces their own visuals you can control the palette used and the feel. The images throughout this example website were chosen for similar reasons.
I also wanted visitors to relate to, or identify with as many visuals as possible. For that reason I avoided the industry trend to show construction sites and workers, and instead feature as much as possible the final product. But what's a construction website without construction? In the project section I purposely used in progress visuals to entice the viewer to click and see the final product.
It doesn't matter how good your content is if viewers struggle or outright cannot read it. Contrast is the principle that designers use to guarantee readability. When using as many colors as I chose to implement in this case study this becomes more important and more of a challenge.
Black on white is historically known as the easiest to read and can be enhanced by softening the glaring contrast with a slightly off black colour. For that reason I chose to place all the main content headings on white backgrounds and used an off black colour.
Where the colours are used as backgrounds I checked the contrast and used white or black text depending. This is pretty straightforward, however, when I wanted to reuse the hero gradient as a background a problem arose, neither black nor white would have worked since it uses both the light blue and green. The solution was to desaturate the gradient, making the green light enough for black writing to be readable.
A poorly created colour palette can make challenges like this nearly impossible to solve. That's why a designer must plan ahead. The colours must work with either black or white foreground, or make sure they are never used as a background.
Photo #1 - by Kendall Hoopes: https://www.pexels.com/photo/brown-coffee-table-surrounded-by-four-chairs-635041/
#2 - by cottonbro studio: https://www.pexels.com/photo/standing-man-look-at-plans-6568691/
Photo #4 - by Pixabay: https://www.pexels.com/photo/living-room-set-271795/
Photo #5 - by Ron Lach : https://www.pexels.com/photo/men-doing-wood-works-8817828/
Photo #6 - Photo by Athena Sandrini: https://www.pexels.com/photo/red-and-yellow-tower-crane-on-top-of-building-under-construction-2323080/
Tuning a website to a specific target audience through friendly professionalism.
Check It Out >A website with a relaxing atmosphere that communicates personal interest.
Check It Out >Targeting the right audience by communicating playfulness and care.
Check It Out >
Send me an email or fill out the form to tell me about yourself and the project I can help your business with.