In this guide I’ll be explaining all facets of good design.

The good news:

We’ll be not just sticking to theory. I’ll also be offering you several design tips you can apply to your website today.

To get more specific, we’ll be discussing how you:

Ensure that your site’s text is super easy to read
Use colors the right way
Can let your imagery really stand out
Create a great user experience
And more

This guide is relevant for pretty much any kind of website: affiliate blogs, business sites or ecommerce shops.

TIP: Are you an affiliate marketer, or are you looking to start an affiliate site? Then check out my affiliate starter templates here. They’re fast, convert extremely well, and have all design principles you’ll find in this guide baked in.

The table of contents below shows you which subjects we’ll be tackling. Click an item to scroll through, or just start reading from the start.

Let’s get after it.

Chapter 1: The importance of good website design

Many people underestimate the importance of good web design. The thing is though, you’re only got one shot at making a good first impression on your visitors.

In this chapter I’ll explain in more detail why investing in good web design is so important. Plus, I’ll lay out some of the universal principles of good web design.

Why is good web design so important?

Good web design is extremely important for the eventual success of your website. A study which looked into why people did not trust websites, revealed that 94% of the commentary had to do with design. Just 6% was related to content.

Interestingly, this study looked into medical websites, a subject where you might expect that content supersedes looks.

The contrary turned out to be true: people do indeed judge a book by its cover.

Moreover, people determine whether they trust a site in a snap. This research showed that visitors take on average 50 milliseconds to form an opinion about a web page’s attractiveness. To put this in perspective: blinking your eyes takes 100-150 milliseconds.

A well-designed website generates trust and can help set a certain a certain stage (for instance, one which makes people feel like buying something). Besides, a well-designed website makes it easier for visitors to process information.

Example of good website design — Example of a well-designed website

In contrast, sub-optimal design leads to people trusting your website less, won’t convert as well and makes visitors bounce off your pages much quicker.

In short, there’s quite something at stake when it comes to web design. If you’re running a site with a commercial angle (you probably are), then web design has a direct impact on your bottom line.

A brief summary: the primary principles of good website design

The following principles should underpin every single website.

Keep it simple

The old adage is true: less is more. Simplicity should be the primary goal of website design.

Even though it can be tempting to add all kinds of bells and whistles to your site, always keep in mind the end-user. How can you offer them the information they’re after in way which is as simple and clear as possible?

Don’t make your visitors think

Steven Krug’s book Don’t Make Me Think has been around for decades but is still relevant.

Whenever you’re designing a website, it’s up to you to erase any questions that may pop up in your visitors’ minds. You can do this by creating a clear visual hierarchy, sensible navigation, and consistency in design elements.

Your copywriting is equally important here: could there be any ambiguity in your site’s content? Is your writing as crisp and clear as it can be?

Steer people’s attention to the right things

This is an addition to the previous point. Use contrasting colors or different sizes to draw people’s attention to certain parts of your website. Do this to guide them from point A to point B, without it costing them any effort.

Use a ton of white space

Your web pages are so much easier to digest when you’re applying generous amounts of white space.

White space makes your web pages feel spacious as opposed to cramped, and calm down your visitors. One of the first thing a visitor does when she lands on your website is scanning a page

Being original is okay, but don’t steer away too far from expected design conventions

The internet would be impossible to navigate if anyone just threw certain design conventions out of the window.

Just like in real life (for instance, many airports are designed according to a similar blueprint), people browsing the internet expect a certain amount of predictability when visiting a site. Think about a navigation menu at the top of a site.

Design is not just what it looks like and feels like. Design is how it works.
Steve jobs

Chapter 2: Font types, font sizes and readability

Picking the right fonts doesn’t only ensure your text is easy to read. They also have an important psychological impact on your visitors.

The size of your fonts and line spacing is also critical, as is the ratio of the size of your headings to the size of your text.

Furthermore, the width of your text has an important impact on its readability.

Fonts and the impact on website identity

Different kinds of fonts can have a subconscious impact on how people feel about your website. These feelings can have to do with trust, strength, professionality, and creativity.

When you’re writing about yoga, you want to generate a different type of feeling than when you’re writing about business software. With a yoga blog, you’d probably want to use a font which feels lighter and more creative, while with the latter you want to exude professionality and trustworthiness.

This is how you pick a font for your website

There are thousands of fonts you could pick. Given this much choice, you could easily spend hours trying to pick the right one for your site.

To simplify picking fonts, keep the following point in mind:

Connection with your brand. A pretty font is of little use if it doesn’t match your brand.
Consider your audience. Would they like this font? Try to find a balance between your personal taste and who visits your site.
Readability > appearance. Pick a font which not only fits your brand but is also totally legible. Avoid any overly artistic fonts, no matter how graceful they might look.
Versatility. What does the font look like in different sizes? Does it have enough different styles? What does the italic version look like? What do the commas, periods and other punctuation marks look like?

If you still have trouble picking a font, consider one of these three: Roboto, Lato or Open Sans.

A big advantage of these fonts is that they’re pretty neutral and fit a wide array of different websites. They’re also free to use. These fonts are being used by 10s of millions of different websites.

I would always pick at most two different fonts: one for your headings and one for your text. The more fonts you pick, the higher the odds are you’ll ruin the visual consistency of your site and confuse your users.

On top of that: the more fonts you’ll use, the slower your website gets.

For some of my websites I’m using something called “system fonts.” Basically, visitors will see the default font from their device on your website.

The upside of this is that your visitors get served a font they’re used to and that your site will load super-fast. The drawbacks are that you can’t show your brand’s unique identity through your fonts and that you’ll have a harder time distinguishing your site from other sites.

Font size and scale

I’d always pick a font size of at least 16px, though 18px is better (that’s the font size of the text you’re reading right now).

If you go smaller than this, your visitors are going to have a hard time reading your text.

A content-heavy site like Medium even uses a 21px font size:

The result? Extremely readable text which invites you to read more.

Don’t pick the size of your body text and headings at random. People feel attracted to beauty. And most beautiful things in life have perfect proportions.

You better believe this also applies to font sizes. So, make sure your headings, sub-headings and body text size are modularly proportional. You can easily make sure this is the case by using this tool.

Add the size of your body text to the “base size” field, pick a scale at “scale”, et voila: the tool now feeds you the correct sizes for your headings and sub-headings.

Text color

Play it safe when it comes to text color. Dark grey on a white, or super light grey background works best. For your headings you can get a little bit more adventurous, as long as this doesn’t compromise readability.

I wouldn’t use pitch black. This tends to be a tad more tiresome when reading than going with, say, super dark grey.

Line height

By using sufficient line height, your text “breathes” more and is easier to read. When using a font size of 18px, I’d pick a line height of at least 1,8em. Personally, I use 1,9em.

If you use WordPress, many themes let you adjust line height in the theme customizer.

Width of your text

The width of your text has a direct impact on the readability of your content.

This study showed that text that’s easiest to read has a width between 480 and 700 pixels (all of my own sites are at exactly 700 pixels). Is your text wider than this, than your eyes have to move too much from side to side. This leads to fatigue more quickly.

Chapter 3: Colors

Using color on your website in the right way is by far one of the most difficult aspects of website design.

I’m going to share how to use a color palette to help you manage your site’s colors.

On top of that, I’ll be sharing a few of my favorite free tools for discovering colors and putting together a color palette.

Color: consistency wins the day

Color is something that directly impacts your visitors’ emotions. On top of that, colors play an important role in how easy it is to navigate your website.

Research from Adobe and the University of Toronto has looked into picking colors and the preferences people have for certain colors. One of their conclusions is that people prefer simple colors.

In many cases, people deemed the use 2 or 3 different colors of a website the most attractive. Which is why it’s so important to put together a color palette for your website and stick to it.

How do you make a color palette

A color palette is something you apply to your entire website. It subtly determines the look and feel of your site. Besides ensuring visual consistency on your website, such a palette also makes designing your site much easier. You don’t have to think constantly about which colors you want to use on every page or piece of content you publish.

A color palette can be divided into accent colors, text colors and basic colors.

Accent colors

Accent colors are the colors you’re using the least. They are colors you use to get your visitor’s attention. This is why it’s important that these colors sharply contrast with the rest of your site.

You’ll want to use their colors for your call-to-actions (CTA). It’s important dedicating quite a bit of time to picking them, as they’ll be setting the tone for your brand.

Many people mess up here. For instance, they pick red as their website’s primary color, but then make their CTA-buttons red as well. This causes these buttons to don’t stand out which means visitors will feel less inclined to click on them.

Text colors

You use these colors to create hierarchy within your text and the borders you use on your site. Usually, you want to choose a spectrum of shades of gray for this. These can be “gray gray”, but also have a warm or cold shade:

Try a few different shades to see what fits your site best.

Background colors

Your background colors are the lightest colors on your website. Usually they’re white or light grey, but you can pick other colors, too. Background colors stand out the least on your website but play an important role in tying together all other design elements.

Handy color tools

Below are some of my favorite tools that help me choose colors for my websites:

Image Color Picker. Here you can upload images and check which colors are used.
Adobe Color Wheel. Design your own color palette in just a few clicks.

If you’re an (aspiring) affiliate marketer, then take a look at this article which is about picking a color scheme for an affiliate site.

Chapter 4: Imagery

A website without images looks bland and unappealing.

In this chapter I’ll explain why images are as important for your site as they are. We’ll also take a look at some great free image resources.

Finally, I’ll share a nifty trick to make your images look just a little bit more appealing.

The importance of images on your website

Every website should feature images. Not only do they make your site look more attractive, but they can only help enhance the user friendliness of your site.

Product images, images for decorative purposes and screen captures explaining how to use a certain type of software, all go a long way in making your website better.

People are visual creatures. Visitors will stick around on your site longer when your text gets broken up my images. This longer dwell time servers a positive signal to Google, which in turn can lead to higher organic rankings.

In short, there are plenty of good reasons to add images to your site.

Where can you find images?

There are pretty much just 3 ways to get images for your site.

Stock photo websites

The easiest way to get images is through stock photo websites. The images on these sites don’t have copyright, so unlike images you’ll find on Google, you can legally use them.

These are my favorite sites for free stock images:

Freepik (for photos and vector images)
Pexels (for photos and videos)
Pixabay (for photos)
AllTheFreeStock (for anything and everything, including sound effects)

Keep in mind that if you don’t have a paid membership on these sites, that in some cases you’ll have to add image attribution.

Make your own photos and illustrations

Shooting your own photos or making your own illustrations takes more time, but the upside is that your site’s imagery will be 100% original.

Self-made images truly can make your pages feel much more authentic. Something that’s of particular importance when running an affiliate site.

Check out the photo above I took for a product review. This photo shows readers that I’ve actually used and tested the product. This is a lot more convincing than if I just used a generic photo from the manufacturer.

Whenever possible, make sure to add your own unique photos and graphics to your site.

Make screen captures

If your site is about software, make sure to add a ton of screen caps.

Not only does this make your content look better, but it will also make it much easier for your visitors to follow along.

Spice up your images with a border

Within my content, practically all images have a border. It comes down to personal taste, but I think it looks a lot neater. This is especially true for screen captures that contain a lot of white. A border nicely frames these images and makes them stand out against your text.

If you use the WordPress editor (Gutenberg), it is often not that straightforward how to add a border to your images. But luckily, it isn’t hard to add one. All you need is a tiny bit of CSS knowledge, which I’m going to share with you below.

In the WordPress theme customizer, go to Additional CSS (this can be called slightly different depending on your theme – as long as CSS is mentioned you’re probably fine). And now add the following lines of code:

.img-border {
border: 3px solid #cccccc;

Then open the Gutenberg editor and click on one of your images. Then add the words img-border under Advanced, Additional CSS (classes).

Next thing you know, your image has got a border:

Check out this site to see how you adjust the thickness, color, and radius of these borders through CSS.

Chapter 5: User Experience

In this chapter we’ll be diving into user experience.

First, I’ll explain what user experience exactly means.

Then, I’ll give you a few UX tips which you can apply to your website straight away.

What is user experience?

User experience refers to how a user uses a product, system, or service (like a website) and experiences this.

User experience (UX) and user interface (UI) are terms that are often used interchangeably, but they’re not the same.

UX is an umbrella term that refers to the overall experience of a user visiting your site. To provide good UX, you need to know what your users’ goals are, predict how they will use your site, and structure your site so they achieve both their own goals and those of your business.

A website with good UX ensures that:

It’s clear what problem visitors want to solve and creates ways to solve these problems
Users can easily navigate the site and find what they are looking for
Users have a smooth experience leading to a successful transaction
The user leaves the site with a good feeling about the website and the brand

UI, on the other hand, refers to how your website looks and is presented. This is determined by font, color, images, white space, and other design elements. Basically, everything we’ve discussed so far in this guide.

A website with good UI ensures that:

It looks visually appealing
The fonts are easy to read
There is a clear visual hierarchy
The layout is not crowded and contains enough white space
Design elements are used that look familiar to your visitors, so that they can achieve their goals more easily

This means that UI is a part of UX. One is not better than the other, and both disciplines require equal attention.

A good experience on your website helps a visitor easily solve the problem that they have.

Let’s take a look at some of the things which can lead to a better user experience.

Navigation

It’s frustrating when you can’t find on a website what you’re looking for.

The following two things are most important in ensuring your visitors can easily navigate your site.

Homepage

For many websites the homepage is the most important page. Together with your “About” page, it is the most important spot to tell your visitors what you’re all about.

Besides, many visitors use your homepage to navigate to different sections of your website.

Below I’ll be dissecting the homepage of one of my sites, Start24, and show you what exactly is the purpose of each section.

1. Tell what the website does and add a call to action

“Above the fold” refers to the part of a page that people see when they open it. On this part of your site, you want to 1) immediately make clear what your page or website does and 2) motivate your visitors to take a certain action.

In this case, I let my visitors know that the purpose of my site is, which is to help them grow their business.

Straight after, I ask them to subscribe to my email list. I do this via a clear CTA: promising exclusive entrepreneurial tips and a big, chunky sign-up button.

2. Social proof

Social proof is an important way to increase conversions on your site.

The term refers to the concept that people follow the actions of other people. The idea is that because other people do or find something, it will be fine.

Here I present social proof by showing a number of large, well-known websites on which my articles have appeared.

If you work directly with customers, you can generate social proof by posting testimonials from these customers on your homepage.

3. A more comprehensive, but still concise explanation about the purpose of this website

At 1. I already explain what the site does, but things aren’t really concrete yet. In this part I offer a bit more details regarding what the website exactly does.

Many websites don’t really go beyond adding a few generic buzzwords on their site. This doesn’t really help you visitors.

Make sure to explain briefly on your homepage what your site is really about.

4. The product

Start24 is a blog, so the product here is content. In this section, I showcase the best content this blog has.

At Start24 I write about building your own website, business development, business tools and more. I show you these different categories, alongside the best articles within each category.

You will also find links to the different categories here, which improves site navigation.

5. Most recent articles

Here the blog’s visitors will find the latest articles that have appeared on the site. Especially with content websites, you want to clearly communicate that your site is up to date.

Speed

Nobody likes a slow website. Slow websites convert worse than fast websites. What’s more, your visitors are more likely to bounce off your site.

Simply put: a fast website has a major positive impact on website UX.

Furthermore, website speed is both a direct and an indirect Google ranking factor.

This study, which looked into the speed of web shops, showed the following:

0-4 seconds loading time leads to the best conversion rates
The first 5 seconds of page load time have the biggest impact on conversion rates
Website conversion rates drop by an average of 4.42% with every additional second of loading time (between 0-5 seconds)
Website conversion rates drop by an average of 2.11% with every additional second of loading time (between seconds 0-9)

There are several tools with which you can check website speed. Here are a couple of examples:

Page Speed Insights. Google’s own tool that analyzes the content of a webpage, and then offers concrete suggestions to make it faster.
GTmetrix. Uses data from Google PageSpeed but offers extra features. For example, you can set from which location your site is tested. However, to also check the speed of the mobile version of your site, you need a paid account.

This has the biggest impact on the speed of a WordPress website

If you’re a WordPress user, take a look at the following:

Web hosting. No matter how lean and well-coded your website is, it can’t be fast without solid hosting. Here are the providers I recommend.
Theme. Many WordPress themes are poorly coded and bloated. Page builders like Elementor and Divi can also slow down your website tremendously. Pick a lightweight theme like Kadence, GeneratePress or Blocksy.
Images. Google’s WebP format is a tad lighter than PNG and JPEG, which makes your site faster. Consider using this format for your site as well. There are several free plugins which can convert your current images for you.
Plugins. Install as little plugins as possible on your website. Remove plugins you don’t use, and only pick safe and well-coded plugins (pick plugins that are frequently updated and have received heaps of 5-star reviews).

By doing the above, this is what my speed scores look like on my websites:

Next steps

This is the end of this website design guide. I’d like to wrap things up by giving credit to a few sources of inspiration that have had a lot of influence on my thinking about (website) design:

Steve Krug. He is the author of Don’t Make Me Think: A Common Sense Approach to Web Usability.
Paul Rand. The legendary art director and graphic designer. I highly recommend his book Thoughts on Design to get a better feel for design in general. This book is from the 1940s but is still relevant.
The team behind Kadence. Kadence is a WordPress theme that I use for all my sites. On their blog you will find some fantastic web design insights.
Brian Dean. The founder of Backlinko, an SEO blog where you occasionally find excellent web design tips.

Website Design: The Ultimate Guide