Brand• Brand Authority• Brand positioning• Business Consulting• Contractor• Digital Marketing• Digital marketing strategy• HVAC• HVAC Branding• HVAC Business• HVAC Marketing• Marketing• Optimization• Plumbing• Skilled Trade• Strategic Marketing• Website• Website Design

Websites & The 4 Design Principles

When designing a website, many factors are considered including the design, layout, and structure. When creating every page and formatting images and other media, there are four main elements to keep in mind. These website design principles include the proximity, the alignment of the text and elements, the repetition of shapes, color, and text, and their levels of contrast. Small business website design starts and ends with these core principles.

The following two HVAC contractor websites, designed by their respective creative agencies, will be compared with these elements in mind. The first website is for a contractor in Southern Maryland named Williamson HVAC services. The other website is another contractor in Southern Maryland, R.E. Graves Heating & Cooling. The service industry and HVAC businesses are highly competitive in this area, with multiple contractors that cover a large area. Their HVAC website designs are both unique and fairly different considering these core principles.

1. Repetition Principle

Figure 1- Williamson HVAC site repetition (
Williamson HVAC lacks eye-catching repetition that keeps the user engaged. R.E. Graves, below, uses elements, text and images that promote an organized and entertaining presentation.  
Graves heating and air repetition website design principle
Figure 2- R.E. Graves HVAC site repetition (
Williamson HVAC contains a weak flow of repetition and consistency regarding the text and visual appeal. When compared to R.E. Graves, the text color, font size, and usability are subpar. Users who land on this site are more prompted to become naturally curious and will explore the site. Williamson HVAC uses consistent text across the website, yet the visual elements are lacking both appeal and even coverage.

2. Contrast Principle

Figure 3 – R.E. Graves color contrast (
Williamson HVAC blends white text on top of an image containing a shiny silver round pipe. “Southern Maryland HVAC Services” is dark gray and highly illegible. R.E. Graves uses an eye-pleasing contrast of colors on each page.  The shade of blues and grays blend well with the tan background and items in the image used.  
Color contrast website design principles
Figure 4 – Williamson HVAC text color contrast (
The way in which text, images, and color complement one another is a critical element of website design. Pleasing the user’s eyes and influencing their attention is what keeps them scrolling through a website page to page. This is referred to as the click-through rate (CTR), which is the amount of time that’s spent on a website before the user abandons ship. Of course, the content and message are essential, but without well-executed contrast, a lack of professionalism and attention to detail will discourage future visits. This is especially true when the competition has the same offerings on a more polished and appealing website.

3. Alignment Principle

Figure 6 – Visual connections & clean alignment practices (
Both R.E. Graves and Williamson HVAC have clean areas of alignment across the site. The clear difference is R.E. Graves utilizes more of a visual connection among elements.  
Alignment website design principles
Figure 5 – Williamson HVAC alignment, lacking visual connections (
The idea of alignment is like organizing the back of your work truck. If tools are out of place and things are scattered about, it’s difficult to navigate your way around. The same goes for your customers, except they can easily leave your site and find one that’s more organized. If things are off and don’t align, it will strain their vision and discourage action. Ensure your website design elements are neat and align well.

4. Proximity Principle

When elements are too close for comfort, an issue with proximity arises. Creating design elements that contain a decent amount of white space between images, text blocks, and search areas can be highly beneficial to a website’s layout and visual appeal. When user’s attempt to navigate throughout the site, they need elements spaced in a manner that provides an organized structure. Williamson HVAC contains an excess of white space in their header area combined with a smaller text size used for each page link.

Figure 7 – Williamson header proximity (
R.E. Graves examples a more visually-appealing proximity principle. Although Williamson HVAC does not contain much clutter and cramped elements across their site, it lacks effective visual grouping.

Figure 8 – R.E. Graves visual proximity (
The four design principles of proximity, alignment, repetition, and contrast play a major role in effective HVAC website design. When searching the web for services, products, and information, we often stumble upon sites that practice poor design principles. The entity behind the website is potentially deemed unprofessional and all the content and purpose of the website are disregarded. In order to keep a viewer on your website engaged and the CTR high, it’s imperative to incorporate these principles into a proper, attractive website design.

The following is a list of additional user-friendly website features:

  • Mobile compatibility
  • Fast loading
  • Clear communication
  • Easy navigation
  • Accurate grammar
  • Concise content
  • Valuable/unique content
  • Quality images
  • Contact us page
roberts consulting marketing leadership business
Ronnie Lee Roberts II is a brand and marketing super fan and owner & operator of Roberts Consulting Firm. He writes about marketing, leadership, and business.

Questions or Comments? Drop Them Here!

Leave a Reply

Your email address will not be published.