Basic Web Design Tips For Selfbuilders

So you’re looking at putting together your first website? Here are some top tips in order to create a more professional looking website. Whether you’re using a website builder or are learning to code along the way these tips will help you create a site which people will be happy to use and trust.

Looking for someone to create a website for you? View our web design page and get in touch for more details.

Whitespace is important

It can be tempting to try and fit as much as possible onto a single screen. Many attribute this to back to print media where you’d only get a fixed sized space to get your message across, but this isn’t the case for your own website. You essentially have as much space as you want (although you need to consider how long you’ll be able to keep your visitors engaged with your content), therefore there’s no need to try and cram everything in as close together.

Whitespace is essentially the spacing between different elements on the page. This also comes from print when the background would be left white, but the background can be any colour. Ensuring that you have enough space will help give your website a clean professional look.

Whitespace can be added in web design by using paddings or margins. For spacing between different sections of your website we would recommend a minimum of 60px spacing.

People have different screen sizes

There are more screen sizes available now than ever, so ensuring that your website looks good across them all can be a challenge. If using a web builder for your website it’s likely that there will be options available to change the device depending on the type of device. If coding the site yourself you may want to consider using a responsive framework such as Bootstrap.

One of the most challenging factors can be testing your website at different screen sizes. Luckily if you’re using a bigger screen there is an easy way to replicate smaller screens. You can do this by either just resizing the browser window or by using developer tools. Developer tools can be accessed by pressing F12, this will open a panel which will display the front end code of your website. At the top left of this there should be an icon which looks like a mobile phone and tablet together. If you click this you can then get options to replicate different devices and screen sizes.

Your logo doesn’t need to be that big

Clients asking for their logo to be bigger is a bit of a joke amongst web designers, with it being one of the most common requests from clients on an initial design. For some reason a lot of business owners think that it’s one of the most important elements on the webpage, but in most instances it’s the opposite.

What you want to do is make the main content of your websites as visible as possible. To do this you want your header to be as small as possible. Consider this, Facebook, one of the most well known brands has a header that is just 56px tall. Do you think this has stopped their brand growth?

When considering the size of your logo we would first suggest thinking about your overall header size and would recommend keeping it below 150px tall. From there there’s likely to be some spacing around the logo so the maximum size for your logo should be around 120px tall.

Remember to add written content

If your business has great visuals then it can be tempting to forget about written content altogether. Whilst this may make your site look good there’s 2 considerations to take which should make your change your mind:

  1. Search engines will struggle to understand your content. This can make it hard for you to rank for target keywords and therefore limit the amount of traffic you’ll get to your website.
  2. Your visitors will need some direction. For you it might seem obvious what you’re supposed to do on your website, to others they might just not get it. Using written content can help them take the next steps you want them to.

Social proof helps build trust

It’s easy for you to shout about how good you are, but are people likely to believe you? Would you believe it if a different company you were considering using did it? It’s unlikely that you’re going to build trust like this. However using other people’s words is a great way to do this and social proof is just that.

Making sure that you use things such as reviews and case studies is one of the best ways in which you can build trust with your website’s visitors, after all what others are saying about your business is much more likely to reflect what your business is actually like.