What are sonic logos and why are they important?
Ask someone to recall an ad from their childhood, or even their teenage years and they will probably sing you a jingle, or parrot a catchphrase - Think Disney’s whimsical...
This blog was updated on 22 December 2020 with even more design inspiration, given that some updated reports now argue that we have as little as 2.7 seconds to capture our reader’s attention. It’s time to get aesthetic.
As a graphic designer, a lot of people ask me to ‘make it look pretty’, or ‘jazz things up a little’, but actually there’s a myriad of hidden psychology behind attention driven design. So, I’m going to share with you a few essential snippets which will help you up your landing-page-layout-game and increase your conversion rate when your designer is out of office…
Ready, set, logos
As the centre point of your branding, choosing the right logo is a vital element of a strong landing page, and will help drive the design for the rest of the page. Companies often own many types of logos; an abstract mark, mascot, combination mark, lettermark, pictorial mark, and wordmark. These should also come in colour, and monotone and monochrome versions, but often people repeatedly use the same one.
Unless your brand is extremely well known (think Coca-Cola), then you’ll probably want to use the lettermark version. If you’ve applied a white background then you can use the standard colour version of your logo but if you’re using a picture or coloured background, you will be best choosing either the black or white version (dependant on which is better for contrast).
If the landing page is going to be hosted on your own website then there’s no need to make your logo colossal, the user should already know where they are after all, and doing so will only distract them from your header and CTA.
Colours that capture
To create a cohesive page you’ll need your brand colours to hand, and not just a ‘close-enough red’ but the exact hex code (the 6 digit HTML code that represents a colour). If this isn’t in your brand guide, or you don’t have it to hand then this website is useful for detecting the exact colour using an image.
If in doubt, pick two contrasting colours (plus black and white) and stick to them. Determine which one will be your accent colour and apply this only to the things you need to draw attention to, i.e. your CTA and any hyperlinks.
Colour is a fundamental part of separating groups of text, but don’t emphasise narrow elements, like subheaders, which will make your page look clunky. Instead, use your accent colour to draw attention to an entire block, and let your fonts and text do the talking.
Text that says something
Colour isn’t the only way to highlight important information; utilising a hierarchy of different fonts and sizes can help the user distinguish the what-they-need-to-know from the what’s-nice-to-know. Akero has a number of built-in fonts but you can also add your brand’s fonts. To keep things simple, pick a maximum of two fonts; one for the header and subheader, and one for body copy. Body copy should always be easy to read; Georgia and Work Sans are both good options and should be no less than 16px for a web page. If you need help, book an Akero demo today.
When it comes to choosing the size of your headers, an easy rule to stick to is the 4:2:1 ratio, meaning that your subheader should be double your body copy and your header should be double that.
As a general rule, text should be snappy and never longer lengthways than width, however, if it’s necessary to include lengthier paragraphs, align these to the left, rather than centre or right, making it easier for the reader to digest.
Text accents are brilliant ways to capture attention but italics and bold copy should be used sparingly across content (no more than 10%) otherwise the whole point is diminished.
Visually stimulating
Whether you photograph your own, use quality stock photos or creative illustrations, images will always play a starring role in capturing and retaining the attention of your reader. Although they should always support the text rather than distract from it.
If you are using an image as a background, consider adding an overlay which will increase the contrast between the foreground and image. Alternatively, choose an image that has breathing space so that your copy sits nicely in the free space.
If you are adding a gallery to support a section of text, add padding to include it in the block. This is better than taking up the entire width of the page as it will be clear which piece of text the pictures are referring to.
Don’t sit a large image too close to the header. Random images do not make sense unless there is context given to them. Instead, unfold the contents of the page, and include a subheader to place the right emphasis where it’s needed.
I’ve got a white space baby…
White space, also known as breathing space, is space on a page that has been deliberately left empty, and au contraire to popular belief is not always white. Sometimes it can be difficult explaining why you didn’t fill the page with more information. After all, we’ve only got 8 seconds to capture someone’s attention(*), so surely we want them to absorb as much information as possible in that time, right? Wrong. Let your headlines capture, let your text do the talking, and make it easy for the reader to find what they are looking for.
The importance of white space cannot be underestimated.
Break your content down into logical blocks to make the information easier to digest and separate blocks by using coloured backgrounds. Keep the padding (the space between content) the same to prevent your page looking messy. Padding should always be at least 120px to avoid your content getting lost.
*Based on a 2015 report by the Consumer Insights team of Microsoft Canada.
Push the button
On your landing page, your call-to-action should be the star of the show; featured above the fold and with an actionable request. But that’s not all that’s important: The design of your button also plays a part in increasing leads…
There isn’t any need to make your button monstrous, which can be distracting and have the opposite effect of what you intended, but it should be highlighted in your accent colour or outlined in it (when transparent). Keep the font simple and monochrome; there is no need to add multiple colours to a button, which will overload it and make it difficult to read.
By spending some time getting these tips and tricks right, you will be able to create attractive and functional landing pages without the help of your designer in no time. And these rules don’t just apply to landing pages; you can utilise them for anything you create. So what are you waiting for?
