Home Journey Heat Maps & Web Design for Affiliate Marketing

Heat Maps & Web Design for Affiliate Marketing


Combine the eye and the brain and you have a magnificent machine. In just seconds, a human can analyze a webpage and determine (at least for them) what is the most important part of the page. Why is this important? When choosing a web design for affiliate marketing, it is very important! What your visitors see when they come to your site can make the difference between making an affiliate sale or having the visitor click away from your site.

Going from a basic website design, most people who talk about hot spots or heat maps show a chart like this:

As an affiliate marketer, you want your most important part of your page to be in the hot spots. If you are wanting to capture emails for a list, you might want to put a signup form in Hotspot #1. If you have affiliate ads, place them in Hotspot #2.

But not all layouts follow this simple example. You may need to play with your design to find the perfect one so that you have a perfect web design for affiliate marketing.

There are websites that can analyze your website for you to illustrate where the human eye is most likely to focus. Feng GUI is a great site to use to see how your site measures up. I ran a scan on my site just before writing this post. Here’s what the heatmap looks like:


The Attention Heatmap displays the most attractive elements of the image in the form of “hot” and “cold” spots. The Attention Heatmap report is a predicted eye tracking report which show how areas of the original image attracts the attention.

As you can see, the red dates for the posts were where the eye focused the most, followed by the ad on the bottom right. So I thought about what I really want people to see when they come to my site.

Before I did anything though, I wanted to see where the eyes went and how long they were there. The Gaze Plot report visualizes the scan paths and order between elements inside the image. This one is for the first 5 seconds someone views my homepage (click on it to enlarge):


As you can see, the first two things someone sees are the dates for the first two posts. Based on these two reports, I completely redesigned my site. Here’s the heat map on the new design:


So as you can see, we have shifted away from the red dates that previously attracted the eyes. Now they go first to the Orange label for the Tips and Tricks section. Anything that is red/orange gets the most attention.

Here’s the Gaze Plot:

From this, you can see that the first thing people see is the Tips and Tricks label. Then they are seeing the ad over on the bottom right. Overall, this site design is much better, but I still wanted the affiliate ad to have more focus. Adding a red ad might improve things:


This is better. There is a lot more attention on the affiliate ad. But what if I made it even more red? Here’s another ad in its place:


Now we have a red heat map right on my ad. This is perfect! When do people see this ad? The Gaze Plot should tell us:


This is great! The first thing people see is the ad. The second thing is the Tips and Tricks label. So let’s change that color to blue (as well as the label right under the ad) and see what that looks like:


Interestingly, the change in color for the section titles from red/orange to blue had no real affect on the heat map. And the Gaze Plot is also similar:


Okay, so overall, I am happy with the changes. My affiliate ad is the first thing people notice, and the view is for quite some time (relatively speaking). This is a significant improvement over the first web design where people were focusing on the post dates more than anything else.

So, the take away from this walkthrough is this:

Web Design for Affiliate Marketing

  • requires careful thought about the layout of the site
  • requires purposeful use of the colors red and orange
  • should really be analyzed using a tool such as Feng-GUI

Hope you enjoyed this walk through. Let me know what you think of my new design in the comment section…


  1. Hi Faith, thank you this certainly was interesting and something for me to think about. I had starting wondering recently where the best place to put my sign up form and affiliate ads would be.

    • Yes, it is extremely helpful to have this info on your site. Even the free option at Feng-GUI is helpful if you understand what it actually means.

  2. Like your article!
    Didn’t know there was so much to it, wow. I will defenitely write my articles differently now. Great job done here. Greetings, Kit

  3. hi Faithe!
    How cool is that!! I am trying this on my site tonight for sure! Running the program helps you pinpoint what can be done to increase sales or at least possible sales. Are the sites you mention free to use? Like the Feng GUI one? Interesting also that the 2 basic hot spots are on the top left corner and the right side. I have ads on the right side but maybe I should utilize the top left corner better!

    • Feng-GUI has a free option, but only includes the first 1 second of the Gaze Plot. Still, that alone can tell you a lot if you understand what it means (which you should now that you’ve read the article). At lot is about color, but placement also makes a big difference. Use of white space also plays into things. Great stuff though!!

  4. Faith thanks so much for this read. Your post has illustrated how much affiliate marketing is developing and how sophisticated tools can help businesses of all sizes optimize their website to help their client perceive more value and thus enforce their relationship: basic principle of marketing. Once I’m more established I may give Feng-Gui a try myself.
    All the best!


Please enter your comment!
Please enter your name here