facebook pixel
We share our top tips for designing modern, functional websites that engage users. Follow these guidelines when designing your website and you will be off to a great start.

1. Digestable, relevant content

We all know by now that humans pretty much have worse attention spans than goldfish, so it makes sense that to engage users online we need to be producing bite-sized, easy to digest content. But what if you want to regurgitate a whole chapter of your favourite Tolstoy novel? Well there are ways to make this more palatable, for example:

  • Break content up into sections using relevant headings
  • Use block quotes to break up paragraphs and call out key information
  • Images can add visual interest and support your content
  • Consider using video content

Remember – keep it relevant

It is important to keep the content on your site targeted and relevant to your audience – sounds obvious enough, however it’s east to miss the mark on this and loose valuable customers. People tend to see through self-serving website content, so if you are just looking for better search engine rankings, or more subscribers, it may turn people off. By creating value adding content that aids or empowers your users, you can start to build a loyal customer base.

2. Mobile responsiveness

It goes without saying that your website must be responsive, i.e. should work well on a range of devices, think your smartphone, your tablet and desktop. This doesn’t mean just scaling down your web page so that it fits on your mobile screen, but rather manipulating all the elements on your page so that they work well on your device and provide an immersive and seamless user experience.

Web design rules - responsive website

As of August 2018, 51.2% of all global web traffic was on a mobile device. That should be enough to convince anyone with the slightest doubt that this is a huge consideration.

If you don’t prioritise responsiveness when developing your website, you are potentially isolating a huge number of users who may want to access your website on their handheld device.

As of August 2018, 51.2% of all global web traffic was on a mobile device

Most DIY web building platforms will offer responsive websites as standard, and for any web developer worth their salt, this will be a non-issue. All the websites we develop here at Small Business Hero are mobile responsive and provide a great experience for your customers on all devices from desktop down to a smartphone.

3. Whitespace

The urge to fill every bit of space with more content, bigger logos, more buttons, can be a strong one. With so much competition and clutter on the web, it can be tempting to fill up the space you have in an attempt to get noticed and really get your message across.

We are strong advocates of the ‘less is more’ belief, and this is proven time and again when we redesign websites for our clients who then boast great customer feedback and an increase in website traffic.

It is absolutely possible to create a successful website without all the clutter. Whitespace (or, an area of your website with no content) offers many advantages, and is popular with large brands as you can see easily by looking at the Google, Apple or Bang & Olufsen websites.

 

Advantages of whitespace:

  • Whitespace allows the user time to digest content, and gives the eye time to rest and pause between content sections
  • It can assist with grouping particular groups of content, creating unseen ‘rules’ which aid with content digestion, navigation and interaction
  • Adding whitespace to your website aids a positive user experience by not overwhelming the user
  • It provides balance and harmony in your website design
  • It can add an air of class and elegance to your website
Laptop on white desk

It’s important to remember that whitespace does not in fact need to be white, it is simply an area of your design that does not have any content in it – the space between elements on your page.

Which brings me to my personal favourite quote:

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away” Antonie de Saint Exupéry

The key here is to use whitespace wisely, to perform a specific function on your page. Don’t just add it in here and there and expect it to improve your site, a lot of sites go mad with whitespace and it can end up being a confusing and difficult to navigate experience.

4. Use colour to your advantage

Your brand colours are key to solidifying brand awareness online and should be consistent across your website, social media and other digital platforms. One (maximum two) key brand colour/s should be used predominantly, with secondary colours dotted throughout your website sparingly.

Colour for indicating actions

Colour should be used consistently to represent actions, for example if your primary action on the website is a ‘Get in touch’ button, this should be the same colour everywhere it appears, and should be one of your key colours. Other, less pressing actions such as ‘Read more’ or ‘View similar’ should be consistent in colour and be for example a secondary brand colour.

Use colour to group elements together

Colour for Grouping similar items

Let’s say you run a pet grooming salon. You could use a different colour to represent the different animal groups – all dog grooming treatments would be under blue, whereas if you see green you know this is catered towards cats etc. If you own a catering business, you could use to colour to define entrees, mains and deserts.

Using colour consistently across elements created a visual rule and tells the user, ‘these things belong together’. Of course this should be used in a subtle way, we don’t want our website looking like a rainbow.

5. STREAMLINE fonts

We’ll keep this simple. There is never any need to use more than 3 font families on your website, and that is being generous. Unless of course you sell or design fonts!

We recommend using no more than 2 font families on your website, one for headings and one for body text. You can of course use different font weights (normal, bold), sizes and colours to differentiate sections, but keep it simple and streamline your fonts.

Too many fonts will clutter your website and leave users confused about hierarchy and message.

Need an exceptional website for your business?

Get online quickly with our affordable website packages, offering professional websites for small business.

Liz is a Digital Design expert with over 15 years experience covering design, UX, & development.
She uses her knowledge to develop beautiful and engaging websites for small businesses.

Small Business Tips, Direct to your Inbox

No spam, just great content to help you grow your business.

You have Successfully Subscribed!

Share This