Thinking of creating your own website?

These 10 essential dos and don’ts of website design are for you!


 
Dos and don'ts of website design.png

Whether your curious browser has just found you on Google or has been referred and wants to check you out before enquiring - your website has an important job to do in reassuring them that they’re in the right place.

The design of your website can make or break that decision (75% of website visitors judge the business by the design of its website) so read on to find out how to avoid being rejected at first sight!

 

10 Top Tips for effective website design

  1. Map the customer journey BEFORE you start building

  2. Use the navigation bar wisely

  3. Frequent & clear CTA’s

  4. Less can be more!

  5. Page structure

  6. Select easy to read fonts

  7. Create compelling copy

  8. Use high-quality imagery that tells your story

  9. Mobile responsivity

  10. Loading speed


 

So let’s look at these in more detail…

  1. Map the customer journey

That sounds obvious, but it’s easy to get excited about updating an existing Squarespace template by adding your adding brand colours and swapping images, that the customer journey gets forgotten, which is a huge mistake as that’s an essential aspect to the user experience.

Remember, the purpose of your website is to drive sales/enquiries, so it needs to take your visitor on a journey from where they are now, to your desired outcome (that aligns with their goals, naturally!).

I suggest starting with what it is you want them to do.

Book a call?

Join a group?

Go straight to a sale?

Then map out the information they’ll need to feel confident in taking that step.

If you have more than one product or service, you’ll need to make it easy for your browser to understand which path they need without becoming overwhelmed or confused, because confused minds say no!

 

2. The navigation bar

It can be very tempting to call your pages wonderfully creative things, but remember, your future clients, not to mention good old Google bots, need to be able to decipher them!

Also, ask yourself if every single page you’re planning to link to the main navigation bar actually needs to be there. Simplicity wins every time, the fewer you can get away with, the better. I always aim to have 3 or 4, but def have less than 5. If you’re finding you need more than that, there’s a chance your structure needs some work, so heading back to step one could pay dividends.

 

3. CTA

I can’t stress enough how important it is to have clear calls to action (CTAs) throughout your website to allow your browser to opt-in at the point that’s right for them. However some people will come to your website with the sole purpose of booking a call with you, so make it easy for them to do that. Make it above the fold (see below), clear & concise.

 

4. Bite-sized content

We’re all busy and if something looks too complicated, we’re likely to just switch off and look elsewhere. This means you could not only be losing a potential client but you’ll also upset Google as you’ll be increasing your bounce rate.

You can achieve a calm, easy to consume, website by utilising a creative layout and lots of negative space, compelling imagery and small chunks of text, even contrasting colours - anything that breaks all the info up.

 

5. Keep offers above the fold

The “fold” is what you can see on a screen without having to scroll down, so everything important needs to be above that line.

The key here is being very clear on what falls into the “important” category. You’re aiming for clear & concise - what you do and who you do it for is a great start. Bonus points for getting that message across creatively!

 

6. Use easy to read fonts

There are soooo many fonts out there, many of them creative, beautiful and desirable. Sadly that doesn’t always mean they’re the right choice for your website. You need to think about what works for (relatively) large areas of copy, the body text, what works as headers and what you can use sparingly as an accent font.

Fonts are a HUGE topic in brand design and it’s way too involved to get into here, so if nothing else, just make sure the ones you choose are easy to read on all device-screen sizes.

 

7. Create compelling content!

Arguably all the stats suggest that website design and visual impact is the most important aspect in getting a curious browser to hang around on your website, but that isn’t at the expense of valuable content.

Think about why your site visitor is there - why are they looking for? Answering their questions (why they need you instead of a.n.other, how they can work with you, contact you and what your packages and prices are will all be required. Make it interesting and easy to read and you’ll be earning serious visitor brownie points!

 

8. Use high-quality imagery that tells your story

We process images 60,000 times faster and the saying goes that pictures speak 1,000 words. The first is scientifically proven, the latter possibly stems from the former, who knows?!

The important takeaway here is that high-quality imagery cannot be underestimated. It is impossible for a website to look great without it.

It conveys key messages faster than words, it means you can show something instead of saying it and they also break up the text. They’re essential!

Naturally, the best thing you can do for your website is to invest in a personal branding photoshoot, but failing that, get creative with stock imagery. Go for the paid options to avoid using the same images everyone else does and crop them differently so they work for you. It’s not the perfect solution, but in a pinch, they can tide you over until you can get your own.

 

9. Mobile responsivity

Some platforms will automatically show an attractive version of your website no matter what sized screen it’s being viewed on (thank you Squarespace!). So far, not all Wordpress themes do and as yet, Showit doesn’t at all, so do check this out before committing to a platform and remember that mobile-friendly isn’t the same as mobile-responsive!).

Mobile-responsivity means that the content automatically adjusts to the size of the screen it’s being displayed on. This can mean that content isn’t always shown in the order we expect on a mobile, so do check that the layout is still accurate on a small screen, the links aren’t too close together and that images are displaying as you’d want (always select the focal point when uploading images).

Also bear in mind that sites load slower on a mobile.

CSS (custom-code) can help you make sure everything displays as you want it to, no matter what the screen size.

 

10. Loading speed

Hands up who gives up if a website is taking too long to load? Your browsers will do the same.

We saw above that that high-quality imagery is essential for a great looking website, but too many large images and your site will be slower than a hibernating sloth (not that they hibernate, but you get my drift!). The trick? Reduce those file sizes before you upload them! I always send my branding photography clients web-sized files as well as high-res, but even the web-sized ones can be compressed to make them even smaller. Do it, you’ll be glad you did!

 

I hope that was helpful and if you have any questions, please get in touch, I’m happy to help.

Warmest wishes,

Kirsty


If you’d like help creating (or re-designing an existing) Squarespace website your clients won’t be able to resist, get the ball rolling by scheduling a free 20-minute enquiry call!


 
Previous
Previous

DIY Personal Branding Imagery

Next
Next

How to choose the right personal branding photographer for you