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.
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.
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.
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.
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 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.
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.
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:
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.
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.
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.
A well-structured menu can make or break how easy it is to navigate your website.
Your best bet here is to follow design conventions. Put your menu on top of your site, with your brand’s logo on the left-hand side. In the middle you’d then put the most important sections of your site.
To the right you could add a CTA. For instance, a buy-button.
If your site has a ton of content, it can be handy to add some search functionality to your website as well.
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.
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:
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.