KhaiMun.com header image

KhaiMun.com

≡ Menu
 

5 Web Design Best Practices You Should Keep In Mind When Designing A Website

Quality beats everything. This is the single most important thing you need to remember when designing your marketing website. The truth is, there’s no secret formula to a good website. As long as it is functional, relevant, and engaging – it’s already good enough.

But are there any benchmarks which you can follow along when designing your site?

The answer is YES. Having a successful website is not rocket science. And while every website aims at a specific target audience which has different needs, in general, ALL marketing websites should tailor to the 5 best practices I’ll be sharing with you below…

#1 Design For Conversion

Designing a website according purely to your own taste is nothing but a shot in the dark.

The most important thing to have in mind when creating a website is conversion. Whether the aim of the page is to capture the user’s email address, to make them buy a product, or simply entice them to read through your copy – every element standing on the website should be tailored to conversion. So what does this mean?

It means that design and conversion should not be in war with each other. Instead, they should unite. In order to ensure this, not only you need to fully understand the principles to a great looking site, you also need to understand what makes a high-converting site.

Implementing the design principles that help to advance conversion goals are important. So, what are the main principles of website conversion?

  • Less is More: Keep it stupidly simple. Remove unnecessary elements like the slider, pop-up forms, or any distracting banner ads.
  • Personalized Images: Use authentic images instead of stock images. People want to know you’re actually running a real business.
  • Plenty of White Space: White space allows our eyes to focus on nothing but only the content. Always keep your website readable.

#2 Skimmable And Consumable Content

“Web design is 95% typography.” – Oliver Reichenstein, Founder Information Architects.

Every day, there are thousands and thousands of people out there who have some sort of problems that need solving. Chances are they will be looking at multiple websites to find a solution. It’s super important that you make your content easy to consume and engaging enough. After all, not everyone is ready to digest your thoughts just like the way you do.

So what are the fundamental principles for good web typography?

  • Use not more than 2 types of fonts (title and body).
  • Use font size of at least 16px for the body text.
  • Use dark text on a white (very light) background.
  • Use skimmable elements, like subheads, bullets, short paragraphs, and blockquotes.

Using typography that makes your content easy to consume plus visually attractive is the key to capture visitors’ attention. Therefore, you should focus on using plain background, simple fonts, and short paragraphs. The structure of your content also plays a huge role and you should separate it in subheadings, paragraphs, and bullet points accordingly.

#3 Optimized For Speed And Performance

According to Statistic Brain, the average attention span of a human being is 8.25 secs.

Because of this, your marketing website needs to load blazingly fast for visitors. What’s the point of having a fancy looking site yet it takes minutes to load? The rule of thumb is to ensure your site loads below 5 seconds, otherwise your visitors will be gone forever.

The latest performance report for KhaiMun.com, tested on Mar 14, 2016

Remember, people don’t come to your site simply to ‘admire’ your design. They come because they are looking for information/solution that can help solve their problem(s).

Below are some quick tips to help you improve the speed of your website…

  • Use a realiable web hosting service (if can, avoid using shared hosting).
  • Use a compressor to compress your images to the minimum possible size.
  • Use tools like GTmetrix and Pingdom to analyze your site’s performance.
  • WordPress users, use a premium theme that’s optimized for performance.

#4 Fully Responsive On Any Screen Size

I believe I don’t have to emphasize the importance of having a responsive website (do I?). Think about the last time you used your smartphone or tablet to search for information on the web. Was it an hour ago? 30 mins ago?? Or you’re reading this on your phone now?!

Use Google tool to check whether your site has a mobile-friendly design

Mobile-friendliness also plays a huge role in search engines these days. Hence, it’s no longer an option for your site not to look great on any device and screen size anymore.

#5 Easy And Effective Website Navigation

So you’re reading a great post you found from Google search results. You are thinking “Wow, this is top-notch… what else does this site offer?” And BAM – you cannot easily navigate around and think “This is getting too hard for me, maybe I should just leave.”

Sounds familiar? This is why your website must be easy to navigate. People shouldn’t feel lost when they arrive at your site, regardless of the type of device they are using.

Below are some quick tips to help you improve your site’s navigation…

  • Keep your website navigation consistent on every post/page.
  • If you’ve a blog, divide your categories clearly and show your popular posts.
  • If you’re running a large site, add a search bar to the navigation or sidebar.
  • Your call-to-action should display clearly throughout your site.

Just a word of caution, you shouldn’t include too much links on your navigation. It can be quite irritating to make people click on a long list of navigation links. Only insert the most important links you want your visitors to click while they are checking out your website.

Nowadays you often hear experts talked about the latest trends in web design, and how one should dramatically change the look of a site. In reality, the web isn’t magic. It is just a medium to convey your message to your target audience. As long as you implement the 5 best practices I’ve described above, you are already good to go for the most part.

That’s all from me. If you have more to add, let me know by leaving a comment below.

by KM Lee

KM Lee has been a self-employed geek since 2008. Currently he's working full-time from home online. You can also connect with him:

1 comment… add one
  1. Hi KM Lee, great blog!

    I wondered if it’s possible to make the header, using OptimizePress and CSS edits, the full width of the screen? I found a way but this meant that the navigation bar was stuck below the header but I’d like it above. Any help is greatly appreciated, thank you!

    Reply

Leave a Comment