I was building a super sales page for one of my clients this week. I had a list of her brand colours, pictures and logos to fit around her carefully crafted sales copy. I just needed to figure out how best to present the information to make it easy to read and easy to buy.
Now, as you probably know by now, I love to use colour in my designs to separate out information and to guide the eye as we read, especially if the copy is really long as it often is on sales pages. I’ll break the sections down into bite sized chunks with lovely blocks of colour.
This time, the problem was I got a little carried away with the overall colour scheme.
I forgot that my lovingly crafted text boxed also needed to be easy to read – resulting in the pink writing on a blue background disaster. The wonderful pink headline was less than fantastic inside the blue box. Yuck!
So … as I was giving myself a good talking to I thought I would put together a list of no nos for making your web copy readable. And before you exclaim – I would NEVER even think of doing this – I’ve seen many a website that does.
Dark backgrounds may look good but be careful not to use too much contrasting colour as it will make reader’s eyes weep after a while (and it can look very 80s as the old computer screens used these colour combinations)
Ow! There are, of course, loads of colour combinations that just don’t work. Just take care to have a good look at your website to check that you haven’t used them, regardless if they are part of your brand!!!
Need I say more? These colours actually trick your eyes to produce a 3D effect.
The most common background to use is a plain white (#fff) with a black contrasting text (#000) BUT it can tire eyes out if you have reams of copy to get through. Try taking your black text down a couple of notches into a dark grey (80%). High contrast may stand out, but with small text and lots of copy readability is Queen.
Using a mono palette can look very calm and comforting, but can easily lose impact
The moral of this story?
ALWAYS read every word of what you write on your website. If you struggle, your customers will too.
This may seem strange coming from me, and those of you that have known me for a while may raise an eyebrow at this, but good design doesn’t have to be original.
I know, I know, I try to rewrite the rule book every time I design a new website, and we’ve all come across a new whizzy website at some point and thought, wow! But the thing is that that whizzy website design probably took a designer months to get right, the team probably took many long nights to discuss and write what was needed and the idea was probably swimming around in their head for much longer than that.
And the truth is that a well-designed site is not necessarily the site with all the bells and whistles, but the site that is the most user friendly.
There are LOADS of well-designed WordPress themes
I am always being asked what theme do I recommend and for somebody who is really interested in design without the coding I would go for Udesign on Themeforest or ithemes Builder every time. But for the beginner website builder and the entrepreneur that just wants a website without the fuss and on a little budget then an out of the box theme is worth its weight in gold.
The trick is to find a theme that matches your website plans as closely as possible. And I don’t just mean the colour or the subject matter, but how the theme is structured and how visitors are guided through the pages.
So instead of an easy answer, I’m afraid I have to bat the question back to my curious client – what do you need your website to do?
How to choose a WordPress theme for your website
1. It’s all in the planning.
Jot down everything your website needs to achieve.
Do you need visitors to be able to register on a programme you are selling? Does this need to be front of the site or tucked away after visitors have been guided through the sales process?
Will visitors to the site be looking for different information or will they all have the same question that needs answering? Will their paths through your website be the same?
Will you need to sell physical products, downloadable products or membership?
Do you need to explain to visitors what you and your business is about and what benefits you can achieve for them, up front?
Will your blog be central to the website?
Will it be a very social site?
2. Sketch it out.
Just on an envelope, with a crayon, stick men and plenty of scribbles if you must, but this will really help you to visualise what you are looking for before you spend hours of your precious time cruising through reams and reams of themes. Where are your calls to action going to be and where is all that precious information going to go?
3. Who is your website for?
Visit your competitors websites and visit the websites that your ideal customer shops from. You’ll start to see similarities in colours, patterns, spacing, fonts, images they use. Steal these ideas (not the pictures), they work!
4. Don’t get hung up on colour or fonts
Keep your colour selection simple. You may not be able to find exactly the right sort of green as in your logo in a theme selection, but going with the original design of a theme will probably be better than trying to colour match yourself. A premium theme is professionally designed and will look great if you don’t fiddle around too much.
5. Be honest with yourself.
If you don’t have a lot of images or time to trawl through stock photos, don’t choose a theme that is heavy on imagery. If you don’t know how to create whizzy animated slider images for your site, don’t go for one. If you know that you won’t be blogging a great deal, don’t go for one that relies on up to date information and graphics on the home page.
6. Do a bit of research
When you find a theme you like have a look for reviews and find out if the designer offers support. Having an expert in your chosen theme makes sorting any problems out a lot easier.
And before you throw your mac out of the window in disgust because it is not quite as polished as you imagined, take a step back and see it from the users point of view.
If it is neat, organised and visitors find it easy to find the answer to their question, it’s a good design and well done you.
It’s really easy to fall into this trap. You know your business inside out and love your products. You have lovingly added to and developed your website alongside your business and it has grown and grown and grown.
But with that growth can come confusion
Maybe your website has grown into a bit of a different beast than the one you originally designed. Maybe you’ve added new product lines, new blog topics, membership content and downloadables. And they’ve fitted in and around your content.
Great – an evolving business needs an evolving website
The only thing is, all these changes can amount to a confusing structure that will confuse your customers and ultimately prevent them from buying.
I recently completed a website for my business coach
I love her products, her blogs and I loved her website when she released it six months ago. I am definitely her ideal customer. The thing was that her business had moved on so much in that time and she had had to tag on so many changes, new products, new software solutions and even a new approach to her ideal customer that it came to a point where she was getting loads of through traffic but people just weren’t buying anymore.
As her business had developed, it had outgrown the original structure and needed a rethink. By thinking about the core products she offered her ideal customer, and really honing in on what questions her ideal customer needed answering when they landed on her site we managed to design a website that was much simpler to navigate, much more focused on the benefits of her clubs and packages for her ideal customer and LOADS easier to buy from.
We’d simplified the route to buy
Her customers now have a maximum of 3 clicks to find out that the website really appeals to them as an ideal customer, get to the page that answers their questions, shows them the benefits and gives them the option to buy. They still have loads of options, but they are directed through the site to what is right for them.
A new look
I designed the new look of her website with her ideal customer in mind and we came up with the idea of a little story for her ladies, moving from broke, busy and stuck in their business to successful, wealthy and free to enjoy the business they have created. Bright highlight colours and fun cartoons reflected Claire’s fun and approachable attitude to business so she can instantly appeal to ideal customers that will really ‘get’ the way she works.
The website has over 100 pages behind the scenes and a blog packed full of information, but as the website has a choice of only 11 pages on the main navigation and funnels visitors down to the good stuff right away it is much easier to find what you want.
So, step back and have a look at your website
• What questions do your ideal customers have when they land on your website. What answers are they looking for? • How will they find this information? How many clicks do they need to do before they find the right answers? • Then – are they told to buy or sign up?
And as your business grows, ask these questions again. As you add new pages or new blog topics ask yourself how your ideal customer will navigate through the site. And, most importantly, how will they buy?
Ask any business owner what their brand colours are and they will probably answer with the colours in their logo. Ask any business owner what colours to use on their website and they would probably answer the same.
But as we all know, the internet is a colourful place and very rarely does a website designer choose to use only the basic logo colours in their design. Your business’s brand is more than your logo and by using a greater colour palette you can create connections with other market brands and develop a character for your business.
Don’t be a Tiger
Just like the tiger in the grass, whose fur is cleverly marked to blend in to the landscape it hunts in. If you were to plaster your logo colours all over your website, your logo starts to blend in to the background.
Be a Poisonous Frog
There is a good reason that these little frogs are painted neon rainbow colours. They have something to say. They communicate loudly and clearly against their green and brown rainforest background that they are well ‘ard, ‘DON’T EAT ME, YOU’LL REGRET IT’
OK, so how do you go about choosing a colour palette for my brand?
Type your hex code into the little box and press the various combination suggestions, monochromatic, triadic etc. Find a combination you like and hey presto you have a gorgeous palette of colours that will compliment, not hide, your logo.
How does it make you feel?
I suspect your gut reaction to a colour scheme will be correct but here is a bit of help as to how different combinations can create an impression of your brand.
[spoiler title=”Monocromatic” icon=”plus-circle”]Simplistic, soothing and elegant. Be careful to use size and space to highlight important information[/spoiler]
[spoiler title=”Analogous” icon=”plus-circle”]Found in nature, harmonious, serene. Use one as a dominant colour, one as a supporting and one as a highlight.[/spoiler]
[spoiler title=”Complimentary” icon=”plus-circle”]High contrast colours, good for making a bold statement. Vibrant, fast paced[/spoiler]
[spoiler title=”Triad” icon=”plus-circle”]Vibrant and unusual. Use one colour to dominate and the other too for accents[/spoiler]
[spoiler title=”Split complimentary” icon=”plus-circle”]Contrasting colours, vibrant and good for making a bold statement. Easier to get right than complimentary colours[/spoiler]
[spoiler title=”Tetriadic” icon=”plus-circle”]Rich colour choices. Really good if you want to use a great range of colours across your website to separate information.[/spoiler]
Those of you who regularly read my blog will know that I love WordPress, I love the fact that it is so simple to use and that anybody can create an online brand without a bucket full of techy knowledge. And we can add whizzy plugins that look the bees knees and catapult our humble online shop or blog into the big league. With a bit of time and ingenuity and a good idea your ‘little business’ can compete with the big boys and nobody will ever guess that you do all your admin in a corner of your bedroom.
But (and I bet you knew that there would be a but), with all these wonderful plugins we can download, sliders, sign up forms, pop ups, video, moving this and that, it is very easy to lose the key messages we built the site for in the first place.
Don’t make your lovely products look like cheap tat
There two toy shops on the high street where I live. Both are quite small but pack in a lot of toys. Both are an Aladdin’s cave of treasures for my children. But I only ever shop in one of them, even though I could probably get better value for my £5 children’s birthday party present at the other shop, and even though the other shop has a far wider range to offer.
The reason is simple. I find the other shop stressful. I walk in to a mess of crafts, branded toys, cheap plastic, high price books, beautifully made wooden toys and, most bizarrely, wigs. I don’t know where to look and there is no guide to direct me to make a decision. And even though it does stock some lovely toys, it all looks like tat.
So I just don’t go in. I want to be guided towards my purchase and assured that I am picking out the perfect toy to be dropped into the swag bag at the soft play party. So I always shop in the same place. All the toys are shown to be top quality and divided into sections for age, toy type and perfect presents for school birthday parties. Great – decision made in 5 minutes (and it only takes that long because I like being in the shop).
And it is exactly the same with websites. Visitors need to be guided through from the front page to the buy now or sign up button. So every part of each page needs to help them make the right decision to move through the site to find what they need. Don’t clutter your pages up and keep to your key messages.
How to use plugins to guide your visitors, not distract them
Here are a few ways that you can improve your plugin placement to help visitors find the information they need:
1. Sign up boxes are great, they capture details of visitors to your site and help build your list. Visitors to your site will be used to seeing a sign up box at the top right of your page and this is a key area that draws visitor’s attention. Use it! Create an irresistible downloadable freebie that is in tune with your key message and use your highlight colours to draw attention to it.
2. Social media plugins that stream messages and posts from Twitter and Facebook are great for building our tribe but can be a little distracting for visitors to our websites. If your business has a very active social media presence, great, but be sure to tuck these busy looking plugins out of the way of the main content of your pages. A different coloured bottom area can be a perfect place to put them so they don’t interfere with your main message.
3. Testimonials can be a valuable bonus to your website, but before you upload a plugin to constantly rotate all the fab things your customers say about your business on the front page, consider if it is clouding the purpose of your landing page. Could your site be better served with a testimonial widget placed on a sidebar next to a product or service page? Do your visitors need that reassurance of your business up front, or could good design guide them to answer their question and point them to buy with a well-placed product review. Where ever you do decide to place your testimonials, try blocking the section off with a different font (italic, bold or in quotation marks) or even a different background colour to make the information easier to scan.