Affiliate Marketing with a Website

Chapter 7- Designing an Effective Website

A functional and professional looking website is critical and is essential to the success your Affiliate Marketing Business. In this chapter we are going over basic principles for Designing an Effective Website for your affiliate marketing business website.

What We Won't Discuss

In this article, we are not going to get into the mechanics of creating webpages and the elements contained within them. We are working on an entire section dedicated to the How To aspect of creating a webpage, but for now, there are numerous resources available on this subject that we will include at the end of the article.

Understanding the Psychology of Website Design

As we discussed in the previous chapter about designing a memorable logo, we dug into the psychology behind the shapes used in a logo, and how it envokes different images and ideas in a customers mind. There are similar principles that you need to be familiar with when designing your website, in order to create a sales encouraging environment.

We are going to examine a few differnt page elements and the psychological impacts of those elements in the next couple of sections.

If you are interested in digging in deeper into the psychology in web design, you can check out this article by Jonathan Cutrell on The Psychology of Content Design.


When a visitor first lands on your page, they are going to immediately form an impression about your site. That is just a fact, and there is nothing we can do about that. If someone lands on your site and forms a negative opinion, you are highly unlikely to recover from that, and the visitor will most likely quickly hit the back button. How the page is organized will heavily impact how they form their opinion, so have a well organized page should be one of your top priorities, and that includes how much space everything takes up.

If you aren't familiar with the concept, “white space” is the area in a design that doesn't have anything trying to claim the visitors attention. White space acts as a sort of rest stop for your visitors eyes as they navigate through your page. Margins and spacing around images, headers, or event text, are all places where white space can provide this much needed reprieve.

Too much text can be overwhelming. This is particularly challenging when you are an information site, like this one. When you have a large amount of information to convey, white space starts to get quickly eaten up.

This is where the idea of minimalism comes into play. Minimalism is simply using the least amount of visual content in order to convey your point or idea. Minimalism is currently very popular right now, so using it would give your site a very modern and trendy feel. The opposite is true as well. If every inch of real estate on the screen is taken up by words, graphics, blinking things, etc., this can make a visitor start to feel uncomfortable and generally view your page as outdated. If no white space is present, there is nothing for them to move their eyes to take a visual break. On our site, we would rather not cut back on the amount of text, and instead choose to use wider margins and images where possible to break up the text. This can be a great strategy if you find yourself in a similar position.

At the end of the day, taking the time to keep your content well edited and organized in a way that takes your available space into account gives a feeling of professionalism, organization and generally positive impressions to visitors. You want your visitors to feel like you are an authority on the subject, and the best way to do that is to have a professional and well-thought-out web page. Keeping things simple with website that uses adequate white space tells visitors that you value their time.

If you want to learn more about the spacing between characters than you ever wanted to know, then check out this article from Smashing Magazine.


Colors have a significant impact on visitors and how they feel when they visit your site. Most sites use a color theme that is based upon their brand, and usually equates to the use of their main colors along with neutral colors (i.e the tints, shades, and hues of whites, grays, and blacks). These neutral colors often take dominance within the page in terms of how much space they occupy. This is because trying to use brand theme colors as a background can be overwhelming. Imagine if the brand colors where red and yellow, and the site had a red background with yellow text, it would look something like this, and everyone would hate you for it...

Instead, well designed websites will use their theme colors as accents only and then neutrals to act as white space. In most instances you probably don't even notice that the background behind most text is actually not white, but some shade of a light gray with varying degrees of blue. Here is an example of a clean website that uses accent colors:

Colors themselves play into the psychology of your Web design. Cooler colors (blues, greens, purples) often provide an inviting, professional and relaxed feeling. In contrast, it can be used to give a very cold and unfriendly feeling as well. Warmer colors (yellows, oranges, reds) are soothing, warm, and give a sense of creativity but can also give off negative feelings such as anger and stress. Here is a color wheel that helps with pairing colors with their corresponding emotions:

In addition, neutrals such as white often give a positive feeling of openness, but could also feel bland and dull. Grays are often considered slick, modern, and clean, but can be very cold and uninviting. Blacks are often associated with being professional and clean cut, but is also very overpowering and can be rather generic.

How you use colors to help convey the positive feelings discussed above depends on the tint (lightness), hue (type) and shade (darkness) of the color as well as how much of the color you opt to use. If you want your site to be inviting, open and creative, a combination of blues and greens, with touches of yellow or orange, on a white or light gray background will help convey these positive feelings to your visitors.

Where Should You Use Colors?

Sometimes the best color influences can come from subtle usage. Here are a few areas that you should pay attention to color choice:

  • Pop-Ups
  • Borders
  • Headlines
  • Background Hues
  • Web Banners or Hero Graphics
  • Buttons, but espcially a call for action


Typography can convey tons of emotions and feelings for visitors to your website. There are numerous different typeface options, and thesee typefaces are becoming more readily available for use in websites thanks to CSS.

There are different Typefaces for a reason. They are designed to be used in specific situations and for certain uses. Serif fonts (the embelished fonts that have tails hanging off letters, like Times New Roman) are often associated with professionalism, scholarly, and seriousness, while san-serif fonts (the fonts, without the embelishments, like Helvetica) come accross as more modern, clean, and informal.

Most news websites (i.e. The New York Times) use serif fonts to help convey the feeling of tradition, importance and knowledge. They try to impart a feeling of being an authority that knows what they are talking about. For technology companies, they often use san-serif fonts to convey feelings of modern, clean, sophistication and upscale and to make visitors feel like they are in touch with the times or even futuristic.

You should also pay attention to how spacing is implemented in your text. Leading (space between the lines) and kerning (space between the letters) should be considered. Text will feel lighter or more airy if you use large leading with lots of white space between lines. Text that has little leading feels dense and can be hard to read more than one paragraph at a time. Having text that is too close to other elements on your page, like images can make the page feel crowded. Also, the size of your font can impact the tone of your page, and can come accross as almost yelling or whispering.

At the end of the day, there are a bazillion choices for fonts, so here is a great infographic created by Weemss that helps to summarize when you should consider using different fonts and what psychological effect they each have.

In summation, make sure you take spacing, colors, and font styles into consideration when designing your page. The last thing you should do is just throw a page together with no thought given to these ideas, because you will lose visitors quickly, which is the same as money out of your pocket.

Now that we have an effective website designed out, let’s continue onto the next chapter, Affiliate Marketing with a Website- Chapter 8- Publishing Content.

Don't Forget to Share This Article With Your Friends!

Step-by-Step guides on how you can work online from anywhere at anytime.

If you enjoy our content, please Like, Subscribe, and Follow us using the links below.