Web Design Dos and Don’ts for a Professional Website + Case

It has already been established that having a website will give your business more legitimacy. 

When you’re designing the website there are so many decisions you make that have the potential to affect your Bounce Rate and the visitor’s choice to stay and take action. For that reason I decided to put together the list of recommendations to make these design decisions easier to take. 

I am using my own case as a reference to highlight the mistakes people make when creating a website. As per my client’s request I used the ‘drag and drop’ website builder Wix to design the website that is presented in this case, if you wish to design a similar website simply follow these dos and don’t and your visitors won’t be disappointed.

Website Layout

Clutter the space with a bunch of unnecessary content

Rely on User Experience guidelines to ensure your visitors find their way around.

Think about all the information that needs to be presented on the website and allocate it throughout the relevant pages of the website to avoid overpopulating the pages. One page websites do look beautiful however they are not favoured by search engines, so my suggestion organise your content in a clear, easy to navigate manner and you’ll please both your visitors and search engines. 

My client is a beat-maker so the information that had to be presented on the website had to answer the following quiestions:

  • who is this website about?
  • what kinds of beats he produces?
  • how to buy the beats?
  • how can people contact the producer?

 

If you still not sure how to allocate different sections of your page to a certain content, this sample wireframe could help you get the idea. Also, there is a printable version of the website wireframe for small businesses that can be downloaded below. 

Are you a small business owner? You might find this interesting:

Establishing Web Presence. 3 Steps to Start Marketing your Small Business Online

Colour Scheme

Pick colours that are heavy on the eyes. They might be beautiful but people won’t be able to endure them for long.

Follow the Colour Rules to ensure your colours correspond. Use Adobe Colour Wheel as a guide when setting your scheme.

As you could see on the previous photos I didn’t make a drastic change from the original colour scheme as it perfectly communicated the website’s and my client’s identity. Though, I added a bright colour onto it; that way the visitor eyes instinctively travel towards the brighter colour where the important information is presented.

Fonts 

Pick fonts that are hard to read.

Rely on fonts that set a professional tone to your website.

You may use overly creative fonts for your header image but with the rest of the site try to go with the fonts that are readable so your potential customers don’t get tired half-way through reading the content.

I used Wordmark.it font previewer to decide which font goes with the vibe of the site. As you can see all of them are simple with minimum details that bother the eye. 

created using Wordmark.it

Background

Use the background that will distract users from the content of the website.

Pick the background that compliments the contents of the page. 

Most of the times boring monotoned background is just what your website needs.

Keep the big screens in mind if you do choose to go with a picture background; the higher the resolution the better.

Header

Use stock images to simply fill the space, just the title of your website would be enough.

Make sure your header contains the title of your website, logo and contact details. 

Responsiveness

Forget to check how your website looks on other devices. Majority of your traffic could be coming from mobile devices.

Optimize content of your site for mobile screens. This includes menubar, images etc. Some element might even be unnecessary for mobile viewing.

Most website builders like Wix and WordPress have mobile preview mode. To avoid dysfunctional mobile version make sure everything is clickable and no elements are missing in a mobile version of the website 

Here you can see how one page looks on different devices. 

Media Content

Use low resolution images and videos these don’t look good on bigger screens.

Try to use .png format images for logos and other transparent elements. 

When it comes to logos and flavicons it is best to have them in a .png format in case you’ll need to insert it in other branded images.

To redesign the logo below I had to get rid of the white background because my client didn’t produce a .png backup; it is always good to save yourself some work and have the right format just in case.

It is not hard to become a professional website owner, following these recommendations will hopefully help you get started on the web design without feeling overwhelmed.

And finally…

Forget to share this article if you liked it.

Leave this article feedback in the comments below.

Share this post:
Twitter
Pinterest
Facebook
Google+
http://www.marinachuprygina.com/web-design-dos-and-donts-for-a-professional-website-case
LinkedIn
RSS

2 thoughts on “Web Design Dos and Don’ts for a Professional Website + Case”

  1. Normally I do not read post on blogs, however I wish to say that
    this write-up very compelled me to take a look at and do so!
    Your writing style has been amazed me. Thank you, quite nice article.

  2. First of all I want to say terrific blog! I had a
    quick question which I’d like to ask if you do not mind.
    I was curious to find out how you center yourself and clear your thoughts before writing.
    I’ve had a difficult time clearing my thoughts in getting my ideas out there.
    I truly do take pleasure in writing but it just seems like the first 10 to 15 minutes tend
    to be lost just trying to figure out how to begin. Any recommendations or tips?

    Many thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *