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.
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.
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.
Now take a look at the same form, with a little padding added to each element.
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.
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.
Much better! Use colour 2 to make things within colour 1 stand out.
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:
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.
Our text is now nice and easy to read, separate from the titles and spaced out well.
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.
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.
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.
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
Your users are the reason for your website's existence, so it makes perfect sense to gear everything around them.
You can write, can’t you? You might even enjoy it. So why pay someone else to write your website content?
Most websites built today need some sort of content management in order to easily keep everything up to date and relevant. Let's run through the best available options you've got.