/blog/thumbs/600x300r/2018-08/lettexplus-festival-homepage.png
Web Design

5 Ways To Improve Your Website's Design With Examples

By Matthew Beck

Website design is difficult. It's also one of the most important aspects of your website and crucial that you get it right. Incorporate these quick and easy ideas and you'll be well on your way to a beautiful and clean website.

#1 Space Out Your Content

Content needs room to breathe. Your visitors can only focus on one thing at a time so take the opportunity to choose what they should be paying attention to. It's okay to use a lot of vertical space, web users nowadays are no strangers to scrolling.

Split your pages into sections that span the entire width of the screen. Clearly label what that section is about and make sure it's a about a single topic.

Sit back.

Try to look at your website with fresh eyes. It's all too easy to get used to your website and everything it says and forget that everything on the page might not be as obvious as it looks to you.

Not every part of your page needs to contain something, white space is very powerful. Your content will stand out when given a little space!

Your individual elements deserve some spacing too. Almost every element on your web page should have some padding.

Take a look at this email capture form. As it stands it has almost no spacing or padding, it gets the message across but nothing has any room to breathe.

a contact form with little spacing
Space-less content doesn't attract attention or look clean.

Now take a look at the same form, with a little padding added to each element.

an updated version with plenty of spacing
A little padding goes a long way.

#2 Make Good Use Of Colour

You've probaby got some colours already chosen for your website. If not, then make sure to choose some that compliment each other, Paletton is a great tool for that.

Aim for two colours that work well together and that look good overlaid over each other. Three or possibly four colours can work, but too many will detract from your website's design rather than improve it.

Make sure to put your colours to good use.

Here we have great, bold and complimentary colours clearly defining sections. But no styling at all on the button.

an unstyled submit button
No styling makes for a wasted opportunity for great visual appeal.

And now let's make use of our colours. Obviously we can't use the cyan here (which might be the colour we normally use for button backgrounds), so let's use the blue.

using secondary colours to improve your buttons
Borrow section colours in other sections for a great contrast.

Much better! Use colour 2 to make things within colour 1 stand out.

#3 Get Your Text Right

You only have two ways to talk to your visitors, through images and through text. Sure you could auto-play a video or have audio play automatically, but please, don't do that.

Without text, your visitors aren't going to take anything away from your site. Problem is, people are notoriously impatient when it comes to websites and won't be interested in reading though everything until you've already captivated them.

You can think of your images and titles as merely a means to convince people to read what you have to say.

Let's set the scene.

You've successfully piqued someone's interest thanks to your great images and catchy titles. Now we need to convince them to read some text.

Your goal is simple.

Make the text as easy as possible to read.

Here's an example of some hard to read text:

hard to read text
Dark backgrounds and pure blacks don't make for light reading.

We've a lot to improve on from there, so let's get started.

Firstly, we need to avoid using black as our text colour. It's surprising a little difficult to read but don't change it too much. A small change to dark grey is much better.

The background colour and text colours need to contrast as much as possible. Dark grey text on white is the best combination by far.

Choosing a font can be difficult and goes outside the scope of this article. Choose a simple and modern sans-serif font like open-sans or verdana.

Take a leaf out of the spacing book from above and space your lines out. Maybe even space the letters out a touch.

Text shouldn't be too wide, beyond a certain point it gets hard to read. I've limited it to 800px of width.

Let's finish up by changing the title colour to properly diffentiate it from the text.

much easier to read text
Much better! Now if only we could fix grammar with CSS...

There!

Our text is now nice and easy to read, separate from the titles and spaced out well.

Much better.

#4 Naturally Order Your Content

You've got some great content. You've followed that up with some great design. Now to make sure we put things in the right place.

In theory, this should be quite easy. For the page as a whole, stick to a common flow:

If your page has a very clear purpose then it's important to bring that purpose in as soon as possible. An online shop for example should show products immediately after grabbing visitor's attention.

Be careful not to introduce any content too early that breaks the flow of your page. If you're displaying products, don't break that with another section before going back to more products. You'll disorentate your visitors and the last think you want to do is confuse them!

If your sections have different colours, you'll need to alternate them properly. It's great if you can follow a pattern!

If you don't alternate, you'll have multiple sections with the same background colour, something to be avoided.

Here's an example of bringing in a flow breaking section too early. The footer now looks awkward sitting below the green strip and the colour pattern doesn't look good.

badly ordered content
If the ordering is wrong, you'll have a tough time enhancing the design that isn't there.

Let's try a quick rearrangement. Of course that'll mean we now have two white sections next to each other, so we'll need to introduce a new colour. I'll tidy up the oddly hanging text too while I'm at it.

rearranged and much better to understand content
Think through your decision carefully before ordering.

#5 Make Everything User Friendly

Your visitors are at all times hunting for an excuse to leave your website. Nice design, clear content and relevance to what they're looking for will be your main assets in keeping them there.

Even with all of these in place, you cannot afford to add anything that will upset, irritate or distract them.

Avoid anything that makes a noise. Unexpected sound will surprise people and not in a good way. Unless your site is for video or audio streaming, only ever use sounds as a way to repond to user input. Better still, don't use sounds at all.

Many websites nowadays will introduce a popup a few seconds after loading the page, encouraging the user to enter their email address. Try to avoid doing this, it's not user friendly and will turn many of your visitors away. As a bonus reason, Google will reduce your position in search results if your site does this.

Don't try to fill every corner of your site with attention grabbing content. If everything tries to grab someone's attention then nothing will get through.

example of non user friendly elements
Popouts like this do a lot to reduce your site's user friendliness.

Try to view your site as your visitors do, they know nothing about you and it's on you to convince them to change that.

I'm Matthew Beck, web designer, developer and owner of Lightspeed Digital. I create bespoke websites from scratch, working with any industry. To find out what I can do for you, call 01273 421702 or send me message at: lightspeed-digital.com/contact