Why is good website design important?<\/strong><\/h3>\n\n\n\nGood website design is super important for the success of your site. A study that investigated why people do not trust websites showed that 94% of the comments were design-related<\/a>. Only 6% were about the content.<\/p>\n\n\n\nA well-designed website instills trust in your readers and creates a certain atmosphere. Moreover, good design makes it easier for your visitors to absorb the information on your site.<\/p>\n\n\n\n
Conversely, poor design leads to users trusting your site less and leaving your pages quicker. Your bounce rate will soar, and your conversion rates will drop.<\/p>\n\n\n\n
Principles of good website design<\/strong><\/h3>\n\n\n\nKeep it simple<\/strong>
Simplicity should be the primary goal of website design. As tempting as it is to add all sorts of frills and effects, always think about your user.<\/p>\n\n\n\nDon’t make your users think<\/strong>
When designing your website, it’s up to you to remove all the question marks for your visitors. You can do this by establishing a clear visual hierarchy, logical navigation, and consistency of design elements.<\/p>\n\n\n\nFocus attention on the right things<\/strong>
Use color contrast or size contrast to guide your visitors’ attention to certain parts of your site.<\/p>\n\n\n\nUse lots of white space<\/strong>
Your site is much more pleasant to consume when you place a lot of white space between your design elements and text. White space gives web pages a spacious feeling.<\/p>\n\n\n\nOriginality is fine, but don’t go too far<\/strong>
Follow design rules that people are familiar with. Users expect a certain predictability when they visit a site.<\/p>\n\n\n\n2. Text: fonts, size, and readability<\/strong><\/h2>\n\n\n\nFonts and the impact on your identity<\/strong><\/h3>\n\n\n\nDifferent fonts unconsciously generate different feelings in people. This has a direct impact on the identity of your brand. If your site is about yoga, you want to evoke a different feeling than with a business blog.<\/p>\n\n\n\n
How to choose a font<\/strong><\/h3>\n\n\n\nThere are thousands of fonts to choose from. To simplify the choice:<\/p>\n\n\n\n
\n- Align with your brand.<\/strong> A beautiful font is of little use if it doesn’t align with your brand<\/li>\n\n\n\n
- Think about your audience.<\/strong> Try to find a balance between your personal taste and who visits your site<\/li>\n\n\n\n
- Readability > appearance.<\/strong> Avoid very artistic fonts, no matter how elegant they look<\/li>\n\n\n\n
- Versatility.<\/strong> How does the font look in different sizes and weights?<\/li>\n<\/ul>\n\n\n\n
Do you find it difficult to choose a font? Look at Roboto, Lato, or Open Sans. These are neutral, fit many websites, and are free to use.<\/p>\n\n\n\n![\"\"](\"https:\/\/my.host\/blog\/wp-content\/uploads\/2025\/06\/roboto.png\")
<\/figure>\n\n\n\nUse a maximum of two different fonts: one for titles and one for regular text. The more fonts you choose, the greater the chance you will disrupt the visual balance of your site.<\/p>\n\n\n\n
Font size and scale<\/strong><\/h3>\n\n\n\nI would choose a text size of at least 16px, but preferably 18px. If you go smaller than that, it affects the readability of your site – especially for your older visitors.<\/p>\n\n\n\n
Do not choose the size of your text and titles arbitrarily. Ensure that your title, subtitle, and text sizes are modularly proportioned. You can easily do this using this tool<\/a>.<\/p>\n\n\n\nText color and line height<\/strong><\/h3>\n\n\n\nFor the color of your text, you want to play it safe. Dark gray or dark blue on a white background works best. Pitch black letters are more tiring for the eyes than a shade of gray.<\/p>\n\n\n\n
By using enough line height, your text breathes more and is more readable. For a font size of 18px, I would use a minimum line height of 1.8em.<\/p>\n\n\n\n
Width of your text column<\/strong><\/h3>\n\n\n\nThe width of your text column directly affects readability. Research has shown that the most comfortably readable text is between 480 and 700 pixels wide. If your text column is wider, your eyes have to move too much back and forth.<\/p>\n\n\n\n
3. Colors<\/strong><\/h2>\n\n\n\nColor: simplicity and consistency win<\/strong><\/h3>\n\n\n\nColor influences the emotions of your visitors and helps them navigate your site more easily. Research by Adobe and the University of Toronto shows that people prefer simple colors. In many cases, the use of 2 or 3 different colors was found to be the most attractive.<\/p>\n\n\n\n
How to create a color palette<\/strong><\/h3>\n\n\n\nA color palette determines the look and feel of your site and ensures visual consistency. You can divide it into three categories:<\/p>\n\n\n\n
Accent colors<\/strong>
You use these colors to draw attention, for example, for call-to-actions. It is important that these colors stand out strongly against the rest of your site.<\/p>\n\n\n\n![\"\"](\"https:\/\/my.host\/blog\/wp-content\/uploads\/2025\/06\/cta.png\")
You want CTA colors that stand out strongly against the rest of the website<\/figcaption><\/figure>\n\n\n\nText colors<\/strong>
Usually, you want to choose a spectrum of gray tones for this. These can be “gray gray,” but can also have a warm or cool tint.<\/p>\n\n\n\nBackground colors<\/strong>
Your background colors are usually the lightest colors on your website. Usually white or light gray, but you can also opt for other light colors.<\/p>\n\n\n\nUseful color tools<\/strong><\/h3>\n\n\n\n\n- Image Color Picker<\/a> – Upload images and check which colors are used<\/li>\n\n\n\n
- Adobe Color Wheel<\/a> – Design your own color palette in just a few clicks<\/li>\n<\/ul>\n\n\n\n
4. Images<\/strong><\/h2>\n\n\n\nThe importance of images<\/strong><\/h3>\n\n\n\nEvery website should use images. Besides making your site look more attractive, images can also enhance usability.<\/p>\n\n\n\n
People are visual creatures. Your visitors will continue reading your content longer when your text is interspersed with images. This longer reading time sends a positive signal to Google.<\/p>\n\n\n\n
Where to find images?<\/strong><\/h3>\n\n\n\nStock photo websites<\/strong>
The easiest way to obtain images. My favorite sites:<\/p>\n\n\n\n\n- Freepik<\/a> (photos and vector images)<\/li>\n\n\n\n
- Pexels<\/a> (photos and videos)<\/li>\n\n\n\n
- Pixabay<\/a> (photos)<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/my.host\/blog\/wp-content\/uploads\/2025\/06\/freepik.png\")
Freepik has countless beautiful free photos and images<\/figcaption><\/figure>\n\nTake your own photos<\/strong>
More time-consuming, but you get 100% original images that truly add value to your website.<\/p>\n\n\n\nTake screen captures<\/strong>
For software tutorials or reviews. This makes your content much more convincing and easier to follow.<\/p>\n\n\n\nEnhance your images with a border<\/strong><\/p>\n\n\n\nBorders on images, as you see here in this article. This ensures they stand out well against your text, especially for screenshots with a lot of white.<\/p>\n\n\n\n
5. User experience (UX)<\/strong><\/h2>\n\n\n\nWhat is user experience?<\/strong><\/h3>\n\n\n\nUser experience refers to how a user experiences a website and interacts with it. A good UX ensures that your user can easily solve the problem they came for.<\/p>\n\n\n\n
UX is different from UI (user interface). UX is the overarching experience, UI is about how your website looks and is presented.<\/p>\n\n\n\n
Navigation<\/strong><\/h3>\n\n\n\nMenu<\/strong>
A well-structured menu can make or break navigability. Place your menu at the top of your site with your logo on the left. In the middle, place the most important parts of your website.<\/p>\n\n\n\nHomepage<\/strong>
For many websites, the homepage is the most important page. Here you show visitors what you do and why your business is worthwhile.<\/p>\n\n\n\nImportant elements:<\/p>\n\n\n\n
\n- Above the fold<\/strong>\u00a0– Clearly state what you do + call-to-action<\/li>\n\n\n\n
- Social proof<\/strong>\u00a0– Reviews, testimonials or well-known publications<\/li>\n\n\n\n
- Detailed explanation<\/strong>\u00a0– Clearly explain what you have to offer<\/li>\n\n\n\n
- Your product\/service<\/strong>\u00a0– Present clearly and effectively<\/li>\n\n\n\n
- Recent content<\/strong>\u00a0– Show that your site is up-to-date<\/li>\n<\/ol>\n\n\n\n
Speed<\/strong><\/h3>\n\n\n\nNo one likes slow websites. Fast websites convert better and rank higher on Google.<\/p>\n\n\n\n
Research shows:<\/p>\n\n\n\n
\n- 0-4 seconds load time leads to the best conversion rates<\/li>\n\n\n\n
- Conversion rates decrease by 4.42% per extra second of load time<\/li>\n<\/ul>\n\n\n\n
Biggest impact on WordPress speed:<\/strong><\/p>\n\n\n\n\n- Web hosting<\/strong>\u00a0– Without good hosting, your site remains slow: with a host like my.host<\/a> your site will always load quickly<\/li>\n\n\n\n
- Theme<\/strong>\u00a0– Choose lightweight themes like Kadence or GeneratePress<\/li>\n\n\n\n
- Images<\/strong>\u00a0– Use WebP format and lazy loading<\/li>\n\n\n\n
- Plugins<\/strong>\u00a0– Install as few plugins as possible<\/li>\n<\/ol>\n\n\n\n
Test your speed with\u00a0PageSpeed Insights<\/a>\u00a0and\u00a0GTmetrix<\/a>.<\/p>\n\n\n\n![\"\"](\"https:\/\/my.host\/blog\/wp-content\/uploads\/2025\/06\/mijn-host-pagespeed.png\")
A tool like Google PageSpeed quickly shows you how your website stands speed-wise<\/figcaption><\/figure>\n\n\n\nNext steps<\/strong><\/h2>\n\n\n\nGood website design combines all the above elements. Start with the basics – readable text, simple colors, and fast load times. Then gradually add more advanced elements.<\/p>\n\n\n\n
The important thing is to start. Every improvement you make, no matter how small, contributes to a better user experience and ultimately more conversions.<\/p>\n","protected":false},"excerpt":{"rendered":"
This website design guide is a concise overview of what I have learned over the past 10 years about what is involved in effective website design. The good news: we won’t just stick to theory – I will give you concrete design tips that you can apply to your website today. We cover […]<\/p>\n","protected":false},"author":2,"featured_media":2317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"hide_cta_migrate_site":false,"hide_toc_block":false,"footnotes":""},"categories":[228],"tags":[],"class_list":["post-3216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-tricks"],"lang":"en","translations":{"en":3216,"nl":2316},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/comments?post=3216"}],"version-history":[{"count":1,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3216\/revisions"}],"predecessor-version":[{"id":3332,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3216\/revisions\/3332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/media\/2317"}],"wp:attachment":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/media?parent=3216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/categories?post=3216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/tags?post=3216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
A well-designed website instills trust in your readers and creates a certain atmosphere. Moreover, good design makes it easier for your visitors to absorb the information on your site.<\/p>\n\n\n\n
Conversely, poor design leads to users trusting your site less and leaving your pages quicker. Your bounce rate will soar, and your conversion rates will drop.<\/p>\n\n\n\n
Principles of good website design<\/strong><\/h3>\n\n\n\nKeep it simple<\/strong>
Simplicity should be the primary goal of website design. As tempting as it is to add all sorts of frills and effects, always think about your user.<\/p>\n\n\n\nDon’t make your users think<\/strong>
When designing your website, it’s up to you to remove all the question marks for your visitors. You can do this by establishing a clear visual hierarchy, logical navigation, and consistency of design elements.<\/p>\n\n\n\nFocus attention on the right things<\/strong>
Use color contrast or size contrast to guide your visitors’ attention to certain parts of your site.<\/p>\n\n\n\nUse lots of white space<\/strong>
Your site is much more pleasant to consume when you place a lot of white space between your design elements and text. White space gives web pages a spacious feeling.<\/p>\n\n\n\nOriginality is fine, but don’t go too far<\/strong>
Follow design rules that people are familiar with. Users expect a certain predictability when they visit a site.<\/p>\n\n\n\n2. Text: fonts, size, and readability<\/strong><\/h2>\n\n\n\nFonts and the impact on your identity<\/strong><\/h3>\n\n\n\nDifferent fonts unconsciously generate different feelings in people. This has a direct impact on the identity of your brand. If your site is about yoga, you want to evoke a different feeling than with a business blog.<\/p>\n\n\n\n
How to choose a font<\/strong><\/h3>\n\n\n\nThere are thousands of fonts to choose from. To simplify the choice:<\/p>\n\n\n\n
\n- Align with your brand.<\/strong> A beautiful font is of little use if it doesn’t align with your brand<\/li>\n\n\n\n
- Think about your audience.<\/strong> Try to find a balance between your personal taste and who visits your site<\/li>\n\n\n\n
- Readability > appearance.<\/strong> Avoid very artistic fonts, no matter how elegant they look<\/li>\n\n\n\n
- Versatility.<\/strong> How does the font look in different sizes and weights?<\/li>\n<\/ul>\n\n\n\n
Do you find it difficult to choose a font? Look at Roboto, Lato, or Open Sans. These are neutral, fit many websites, and are free to use.<\/p>\n\n\n\n<\/figure>\n\n\n\nUse a maximum of two different fonts: one for titles and one for regular text. The more fonts you choose, the greater the chance you will disrupt the visual balance of your site.<\/p>\n\n\n\n
Font size and scale<\/strong><\/h3>\n\n\n\nI would choose a text size of at least 16px, but preferably 18px. If you go smaller than that, it affects the readability of your site – especially for your older visitors.<\/p>\n\n\n\n
Do not choose the size of your text and titles arbitrarily. Ensure that your title, subtitle, and text sizes are modularly proportioned. You can easily do this using this tool<\/a>.<\/p>\n\n\n\nText color and line height<\/strong><\/h3>\n\n\n\nFor the color of your text, you want to play it safe. Dark gray or dark blue on a white background works best. Pitch black letters are more tiring for the eyes than a shade of gray.<\/p>\n\n\n\n
By using enough line height, your text breathes more and is more readable. For a font size of 18px, I would use a minimum line height of 1.8em.<\/p>\n\n\n\n
Width of your text column<\/strong><\/h3>\n\n\n\nThe width of your text column directly affects readability. Research has shown that the most comfortably readable text is between 480 and 700 pixels wide. If your text column is wider, your eyes have to move too much back and forth.<\/p>\n\n\n\n
3. Colors<\/strong><\/h2>\n\n\n\nColor: simplicity and consistency win<\/strong><\/h3>\n\n\n\nColor influences the emotions of your visitors and helps them navigate your site more easily. Research by Adobe and the University of Toronto shows that people prefer simple colors. In many cases, the use of 2 or 3 different colors was found to be the most attractive.<\/p>\n\n\n\n
How to create a color palette<\/strong><\/h3>\n\n\n\nA color palette determines the look and feel of your site and ensures visual consistency. You can divide it into three categories:<\/p>\n\n\n\n
Accent colors<\/strong>
You use these colors to draw attention, for example, for call-to-actions. It is important that these colors stand out strongly against the rest of your site.<\/p>\n\n\n\nYou want CTA colors that stand out strongly against the rest of the website<\/figcaption><\/figure>\n\n\n\nText colors<\/strong>
Usually, you want to choose a spectrum of gray tones for this. These can be “gray gray,” but can also have a warm or cool tint.<\/p>\n\n\n\nBackground colors<\/strong>
Your background colors are usually the lightest colors on your website. Usually white or light gray, but you can also opt for other light colors.<\/p>\n\n\n\nUseful color tools<\/strong><\/h3>\n\n\n\n\n- Image Color Picker<\/a> – Upload images and check which colors are used<\/li>\n\n\n\n
- Adobe Color Wheel<\/a> – Design your own color palette in just a few clicks<\/li>\n<\/ul>\n\n\n\n
4. Images<\/strong><\/h2>\n\n\n\nThe importance of images<\/strong><\/h3>\n\n\n\nEvery website should use images. Besides making your site look more attractive, images can also enhance usability.<\/p>\n\n\n\n
People are visual creatures. Your visitors will continue reading your content longer when your text is interspersed with images. This longer reading time sends a positive signal to Google.<\/p>\n\n\n\n
Where to find images?<\/strong><\/h3>\n\n\n\nStock photo websites<\/strong>
The easiest way to obtain images. My favorite sites:<\/p>\n\n\n\n\n- Freepik<\/a> (photos and vector images)<\/li>\n\n\n\n
- Pexels<\/a> (photos and videos)<\/li>\n\n\n\n
- Pixabay<\/a> (photos)<\/li>\n<\/ul>\n\n\n\n
Freepik has countless beautiful free photos and images<\/figcaption><\/figure>\n\nTake your own photos<\/strong>
More time-consuming, but you get 100% original images that truly add value to your website.<\/p>\n\n\n\nTake screen captures<\/strong>
For software tutorials or reviews. This makes your content much more convincing and easier to follow.<\/p>\n\n\n\nEnhance your images with a border<\/strong><\/p>\n\n\n\nBorders on images, as you see here in this article. This ensures they stand out well against your text, especially for screenshots with a lot of white.<\/p>\n\n\n\n
5. User experience (UX)<\/strong><\/h2>\n\n\n\nWhat is user experience?<\/strong><\/h3>\n\n\n\nUser experience refers to how a user experiences a website and interacts with it. A good UX ensures that your user can easily solve the problem they came for.<\/p>\n\n\n\n
UX is different from UI (user interface). UX is the overarching experience, UI is about how your website looks and is presented.<\/p>\n\n\n\n
Navigation<\/strong><\/h3>\n\n\n\nMenu<\/strong>
A well-structured menu can make or break navigability. Place your menu at the top of your site with your logo on the left. In the middle, place the most important parts of your website.<\/p>\n\n\n\nHomepage<\/strong>
For many websites, the homepage is the most important page. Here you show visitors what you do and why your business is worthwhile.<\/p>\n\n\n\nImportant elements:<\/p>\n\n\n\n
\n- Above the fold<\/strong>\u00a0– Clearly state what you do + call-to-action<\/li>\n\n\n\n
- Social proof<\/strong>\u00a0– Reviews, testimonials or well-known publications<\/li>\n\n\n\n
- Detailed explanation<\/strong>\u00a0– Clearly explain what you have to offer<\/li>\n\n\n\n
- Your product\/service<\/strong>\u00a0– Present clearly and effectively<\/li>\n\n\n\n
- Recent content<\/strong>\u00a0– Show that your site is up-to-date<\/li>\n<\/ol>\n\n\n\n
Speed<\/strong><\/h3>\n\n\n\nNo one likes slow websites. Fast websites convert better and rank higher on Google.<\/p>\n\n\n\n
Research shows:<\/p>\n\n\n\n
\n- 0-4 seconds load time leads to the best conversion rates<\/li>\n\n\n\n
- Conversion rates decrease by 4.42% per extra second of load time<\/li>\n<\/ul>\n\n\n\n
Biggest impact on WordPress speed:<\/strong><\/p>\n\n\n\n\n- Web hosting<\/strong>\u00a0– Without good hosting, your site remains slow: with a host like my.host<\/a> your site will always load quickly<\/li>\n\n\n\n
- Theme<\/strong>\u00a0– Choose lightweight themes like Kadence or GeneratePress<\/li>\n\n\n\n
- Images<\/strong>\u00a0– Use WebP format and lazy loading<\/li>\n\n\n\n
- Plugins<\/strong>\u00a0– Install as few plugins as possible<\/li>\n<\/ol>\n\n\n\n
Test your speed with\u00a0PageSpeed Insights<\/a>\u00a0and\u00a0GTmetrix<\/a>.<\/p>\n\n\n\nA tool like Google PageSpeed quickly shows you how your website stands speed-wise<\/figcaption><\/figure>\n\n\n\nNext steps<\/strong><\/h2>\n\n\n\nGood website design combines all the above elements. Start with the basics – readable text, simple colors, and fast load times. Then gradually add more advanced elements.<\/p>\n\n\n\n
The important thing is to start. Every improvement you make, no matter how small, contributes to a better user experience and ultimately more conversions.<\/p>\n","protected":false},"excerpt":{"rendered":"
This website design guide is a concise overview of what I have learned over the past 10 years about what is involved in effective website design. The good news: we won’t just stick to theory – I will give you concrete design tips that you can apply to your website today. We cover […]<\/p>\n","protected":false},"author":2,"featured_media":2317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"hide_cta_migrate_site":false,"hide_toc_block":false,"footnotes":""},"categories":[228],"tags":[],"class_list":["post-3216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-tricks"],"lang":"en","translations":{"en":3216,"nl":2316},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/comments?post=3216"}],"version-history":[{"count":1,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3216\/revisions"}],"predecessor-version":[{"id":3332,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3216\/revisions\/3332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/media\/2317"}],"wp:attachment":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/media?parent=3216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/categories?post=3216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/tags?post=3216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Simplicity should be the primary goal of website design. As tempting as it is to add all sorts of frills and effects, always think about your user.<\/p>\n\n\n\n
Don’t make your users think<\/strong> Focus attention on the right things<\/strong> Use lots of white space<\/strong> Originality is fine, but don’t go too far<\/strong> Different fonts unconsciously generate different feelings in people. This has a direct impact on the identity of your brand. If your site is about yoga, you want to evoke a different feeling than with a business blog.<\/p>\n\n\n\n There are thousands of fonts to choose from. To simplify the choice:<\/p>\n\n\n\n Do you find it difficult to choose a font? Look at Roboto, Lato, or Open Sans. These are neutral, fit many websites, and are free to use.<\/p>\n\n\n\n Use a maximum of two different fonts: one for titles and one for regular text. The more fonts you choose, the greater the chance you will disrupt the visual balance of your site.<\/p>\n\n\n\n I would choose a text size of at least 16px, but preferably 18px. If you go smaller than that, it affects the readability of your site – especially for your older visitors.<\/p>\n\n\n\n Do not choose the size of your text and titles arbitrarily. Ensure that your title, subtitle, and text sizes are modularly proportioned. You can easily do this using this tool<\/a>.<\/p>\n\n\n\n For the color of your text, you want to play it safe. Dark gray or dark blue on a white background works best. Pitch black letters are more tiring for the eyes than a shade of gray.<\/p>\n\n\n\n By using enough line height, your text breathes more and is more readable. For a font size of 18px, I would use a minimum line height of 1.8em.<\/p>\n\n\n\n The width of your text column directly affects readability. Research has shown that the most comfortably readable text is between 480 and 700 pixels wide. If your text column is wider, your eyes have to move too much back and forth.<\/p>\n\n\n\n Color influences the emotions of your visitors and helps them navigate your site more easily. Research by Adobe and the University of Toronto shows that people prefer simple colors. In many cases, the use of 2 or 3 different colors was found to be the most attractive.<\/p>\n\n\n\n A color palette determines the look and feel of your site and ensures visual consistency. You can divide it into three categories:<\/p>\n\n\n\n Accent colors<\/strong> Text colors<\/strong> Background colors<\/strong> Every website should use images. Besides making your site look more attractive, images can also enhance usability.<\/p>\n\n\n\n People are visual creatures. Your visitors will continue reading your content longer when your text is interspersed with images. This longer reading time sends a positive signal to Google.<\/p>\n\n\n\n Stock photo websites<\/strong> Take your own photos<\/strong> Take screen captures<\/strong> Enhance your images with a border<\/strong><\/p>\n\n\n\n Borders on images, as you see here in this article. This ensures they stand out well against your text, especially for screenshots with a lot of white.<\/p>\n\n\n\n User experience refers to how a user experiences a website and interacts with it. A good UX ensures that your user can easily solve the problem they came for.<\/p>\n\n\n\n UX is different from UI (user interface). UX is the overarching experience, UI is about how your website looks and is presented.<\/p>\n\n\n\n Menu<\/strong> Homepage<\/strong> Important elements:<\/p>\n\n\n\n No one likes slow websites. Fast websites convert better and rank higher on Google.<\/p>\n\n\n\n Research shows:<\/p>\n\n\n\n Biggest impact on WordPress speed:<\/strong><\/p>\n\n\n\n Test your speed with\u00a0PageSpeed Insights<\/a>\u00a0and\u00a0GTmetrix<\/a>.<\/p>\n\n\n\n Good website design combines all the above elements. Start with the basics – readable text, simple colors, and fast load times. Then gradually add more advanced elements.<\/p>\n\n\n\n The important thing is to start. Every improvement you make, no matter how small, contributes to a better user experience and ultimately more conversions.<\/p>\n","protected":false},"excerpt":{"rendered":" This website design guide is a concise overview of what I have learned over the past 10 years about what is involved in effective website design. The good news: we won’t just stick to theory – I will give you concrete design tips that you can apply to your website today. We cover […]<\/p>\n","protected":false},"author":2,"featured_media":2317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"hide_cta_migrate_site":false,"hide_toc_block":false,"footnotes":""},"categories":[228],"tags":[],"class_list":["post-3216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-tricks"],"lang":"en","translations":{"en":3216,"nl":2316},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/comments?post=3216"}],"version-history":[{"count":1,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3216\/revisions"}],"predecessor-version":[{"id":3332,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/posts\/3216\/revisions\/3332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/media\/2317"}],"wp:attachment":[{"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/media?parent=3216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/categories?post=3216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/my.host\/blog\/wp-json\/wp\/v2\/tags?post=3216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
When designing your website, it’s up to you to remove all the question marks for your visitors. You can do this by establishing a clear visual hierarchy, logical navigation, and consistency of design elements.<\/p>\n\n\n\n
Use color contrast or size contrast to guide your visitors’ attention to certain parts of your site.<\/p>\n\n\n\n
Your site is much more pleasant to consume when you place a lot of white space between your design elements and text. White space gives web pages a spacious feeling.<\/p>\n\n\n\n
Follow design rules that people are familiar with. Users expect a certain predictability when they visit a site.<\/p>\n\n\n\n2. Text: fonts, size, and readability<\/strong><\/h2>\n\n\n\n
Fonts and the impact on your identity<\/strong><\/h3>\n\n\n\n
How to choose a font<\/strong><\/h3>\n\n\n\n
\n
<\/figure>\n\n\n\nFont size and scale<\/strong><\/h3>\n\n\n\n
Text color and line height<\/strong><\/h3>\n\n\n\n
Width of your text column<\/strong><\/h3>\n\n\n\n
3. Colors<\/strong><\/h2>\n\n\n\n
Color: simplicity and consistency win<\/strong><\/h3>\n\n\n\n
How to create a color palette<\/strong><\/h3>\n\n\n\n
You use these colors to draw attention, for example, for call-to-actions. It is important that these colors stand out strongly against the rest of your site.<\/p>\n\n\n\n
Usually, you want to choose a spectrum of gray tones for this. These can be “gray gray,” but can also have a warm or cool tint.<\/p>\n\n\n\n
Your background colors are usually the lightest colors on your website. Usually white or light gray, but you can also opt for other light colors.<\/p>\n\n\n\nUseful color tools<\/strong><\/h3>\n\n\n\n
\n
4. Images<\/strong><\/h2>\n\n\n\n
The importance of images<\/strong><\/h3>\n\n\n\n
Where to find images?<\/strong><\/h3>\n\n\n\n
The easiest way to obtain images. My favorite sites:<\/p>\n\n\n\n\n
More time-consuming, but you get 100% original images that truly add value to your website.<\/p>\n\n\n\n
For software tutorials or reviews. This makes your content much more convincing and easier to follow.<\/p>\n\n\n\n5. User experience (UX)<\/strong><\/h2>\n\n\n\n
What is user experience?<\/strong><\/h3>\n\n\n\n
Navigation<\/strong><\/h3>\n\n\n\n
A well-structured menu can make or break navigability. Place your menu at the top of your site with your logo on the left. In the middle, place the most important parts of your website.<\/p>\n\n\n\n
For many websites, the homepage is the most important page. Here you show visitors what you do and why your business is worthwhile.<\/p>\n\n\n\n\n
Speed<\/strong><\/h3>\n\n\n\n
\n
\n
Next steps<\/strong><\/h2>\n\n\n\n