Is there anything better than a beautifully designed website?
Actually yes, there is.
A beautifully designed website that converts.
Chances are, you might be using a website or landing page that just plain sucks at converting visitors into completed goal actions, or in simpler terms – conversions. As the old saying goes, “you can have all the traffic in the world, but if your website can’t convert that traffic, then you have a crap website.”
I’m not actually sure who coined that saying, and I might have just made that up. But, it’s true nonetheless.
If you’ve been wrestling with your website, trying to improve it’s conversions and you’ve found yourself hitting a brick wall then I want to help you fix it.
Today, I’m going to reveal my all-time top 5 design ‘hacks’ that are guaranteed to boost sales and conversions, and make your business look amazing in the process. And best of all, you’re going to love them.
But first, who am I and why listen to me?
I’m not here to talk about me, so I’ll keep it short. I’ve been designing high converting websites and landing pages and everything in between since 2005. I own and operateBoost Design, a successful design studio that focuses only on high-converting design.You can see my AwesomeWeb portfolio by clicking here.
Over the years I’ve learned and experimented with tonnes of design tricks and ‘hacks’ that can seriously bolster up conversions and help improve a business’ bottom line.
Before we dive into the meat of this post, let me ask you a few quick questions.
What would a 20% increase in email list subscribers mean to your business? What about an extra 1% on top of your salespage conversions, or a 150% increase in lead inquiries?
I’m not sure about you, but I know these figures can be business changing.
And, of course, I’m not guaranteeing you’ll see the same results, but if you follow along and implement these design features into your website and business then you’ll be well on your way.
Before we move forward, I just want to say that you don’t need to be a design pro to implement these features into your websites and landing pages. The design customisation level in many WordPress themes and page builders is at an all-time high and you should be able to do a great job with those alone.
However, I am biased and I do totally recommend hiring a pro designer to do this once your business has reached a certain level.
Now with that said, let’s dive into my five top design hacks and features:
1. High-Converting Typography
Typography and the fonts you choose to use on your website can have a huge impact on readability, which directly ties in to your conversion rates.
We’re at a time now when choosing fonts has never been easier and the volume of good, clean fonts – both free and premium – at our disposal has never been higher.
Free fonts sites like Google Fonts and Font Squirrel and premium font marketplaces likeTypeKit and MyFonts means you’ll never be stuck finding the perfect font for your brand and website.
But when it comes down to it. Selecting typography for your website can be a fine art in itself.
You need to consider font families, sizes, weights and whether or not to use a serif or a sans-serif font.
It can all be a bit daunting, but luckily I have a few pointers for you.
Typography Do’s and Don’ts
- Don’t use anymore than 3 font families on your website. Choose one for your headlines and subheadlines and one for your body text and paragraphs. You might also wish to use another font family sparingly, such as a script font for use in promos and secondary graphics.
- I recommend using a clean sans-serif font as they’re optimal for screens and hand held devices like phones and tablets. Serif fonts, the fonts with ‘hands’ and ‘feet’ extruding from their characters are better suited for long-form reading, that’s why you’ll only ever see serif fonts being used in print books and e-readers.
- For screens, a good font size for body and paragraph text is between 15 – 18px. At this size it’s not too small to be uncomfortable and not too big to have your users scroll or swipe unneccesarily.
- Visit your favourite blogs and websites and take note of the font families they use. A good tool to find out what font a website is using is a plugin called Fount.
Body and paragraph fonts I recommend
Proxima Nova
A common reasonably priced premium font, but absolutely perfect for body text. If you want something slightly different and less common, I’d suggest the Proxima Nova Soft alternative.
Calibre
An exquisite font and one that will set you back $50 per font style (eg. Regular, Bold). Calibre embodies professionalism, modernism and if you’re business is brand-savvy, it’s a great option to consider for both body and headline typography.
Roboto
The ‘official’ Google font and one that’s similar to well known Helvetica, Roboto is a good standard font, although there’s nothing particularly special that I like about it, it just does it’s job.
Droid Serif
Sometimes you can get away with using a serif font on screen, and very rarely can you do that. But the free Google font Droid Serif does just this. If you must use a serif font on screen, this is the one.
Circular
If you have a spare $1,000 lying around to spend on one font family, then you can’t go past Circular by Lineto. Outrageously expensive, but all the more beautiful, Circular is gaining traction as a popular font with it’s use in the Air BnB logo.
Body and paragraph fonts I recommend
Oswald
Another free font and one that’s as common as a rainy day in London, Oswald is thin, stylish and allows you to squeeze a lot of characters on one line making it great for long sales page headlines.
Gibson Bold
A premium font that you can buy or sync from TypeKit, Gibson Bold is fantastic for big, bold, in-your-face headlines. However I wouldn’t recommend the other weights in this family, they just don’t look that great.
Sofia Pro
Another premium font, this is one of my favs. It’s clean, modern and perfectly balanced for headlines. I’d go with the Black weight for headlines.
Montserrat
Another free, and as such, over-used font, Montserrat is another one of those Google fonts that does it’s job, however I’m put off by how common it’s used.
You now have an education on typography and some options to consider when it comes down to font selection. Implement the advice and the fonts discussed here and I’m sure you’ll see some nice lifts in conversion and readability which will reduce your bounce rates too.
2. Killer Color Combinations
Ahhh colour. Who doesn’t appreciate colour, apart from goths?
When it comes to choosing what colours to use in your websites and landing pages, there really are no hard and fast rules. Choosing your colour palette is completely up to you, your brand and your target audience.
But there are a few do’s and don’ts to keep in mind.
Color Do’s and Don’ts
- Never use more than 5 brand colours, unless your branding is rainbow-centric, which it probably isn’t. A good number of colours to use is four, with a shade and highlight for each colour. Your brand colours should be made up of a primary colour, a secondary colour, background colour and an accent colour.
- Consider your target audience. If they’re predominantly male, you should probably steer clear of pinks and purples. Health industries work better with calming colours and smart use of whitespace, whereas fitness is can be quite open ended depending on demographics. I could talk about colour psychology until I’m blue in my face, but the rule of thumb is this, common sense prevails. You wouldn’t use a pink colour palette on your male body building website would you?
- Always take note of the colour codes you use. At a bare minimum, you should have your HEX code recorded, and if you plan on using your colours off-screen you should note your Pantone and CYMK codes too. Failure to do so leads to an inconsistent brand over time. A big no, no.
Creating a Killer Color Combination
If you don’t have a creative bone in your body and couldn’t coordinate a colour palette to save your life then don’t stress. There are tools and apps out there to help you.
Here are a few of my favourite places to find inspiration when I’m designing a new brand for a client:
Adobe Color
Previously known as Kulur, you can explore a library of cool user submitted colour combinations. Be warned, this can be a massive time suck because it’s just so much fun to browse.
Color Hunt
Similar to Adobe Color, but easier to use, color hunt features beautiful colour combinations each day and allows you to even submit your own.
Coolors
A super cool app for any budding colour enthusiast. Just hit the space bar to load up a new palette until you’ve found “the one”.
Colors by HailPixel
This simple app is like an oversized colour picker that let’s you move your cursor across the screen to change the colour. Simple, beautiful and great for inspiration.
3. High-Converting Photography
We’ve come a long way since the days of cheesy, over-used, cringe-worthy stock photography.
You know the ones I’m talking about, a corporate team sitting around a boardroom table with big, perfect, teethy grins and picture-perfect formal business attire.
Thank the stars we’ve moved on.
Nonetheless, the right photography can be a powerful weapon for increasing conversions in just about any medium. Your Facebook ads, websites and landing pages can all benefit from a strategically placed photograph.
When choosing your photography you need to consider where you’re using it. If it’s for your main website ask yourself, does it support your brand or does it cause disparity?
If you’re choosing photos for Facebook ads or landing pages, try and use one where the subject faces towards your headlines or prominent copy. This has the ingrained pyschological effect of forcing your users’ eyes to where the subject is facing or looking and has been proven to increase conversions and engagement.
0 comments:
Post a Comment