Something doesn't FEEL right with your landers and sites? It could be whitespace! (5)
Something doesn't FEEL right with your landers and sites? It could be whitespace!
You know the frustration when something FEELS wrong with your landers and sites, but you can’t explain WHY? Whitespace could be one of your problems!
The truth is that there are a million and one reasons as to why your landers and sites might perform poorly, but whitespace usually plays a huge role in this. Understanding how whitespace works can give you an edge over the competition…or at the very least you’ll be able to tell a good designer from a bad one when hiring!
What is whitespace?
To put it in simple words - whitespace (or “negative space”) is the space between elements on any webpage or composition. Simple as that! In web terms you can consider whitespace as the space between graphics, text, margins, images, buttons, columns and every other element. It’s a way to organize content and guide the visitor’s attention.
Some obvious examples of proper whitespace use are http://google.com and http://www.apple.com/mac/ - there’s plenty of it here and it instantly glues your eyes to the most important bits, without it all looking too barren nor boring.
For example instead of sometimes using super bright and in your face graphics, arrows and backgrounds to highlight a CTA you could try something simpler instead – leave tons of whitespace around the element where you want to catch a user’s attention.
So WHY do some landers and sites FEEL wrong?
Because you probably haven’t heard of Micro, Macro, Passive and Active whitespace. Not to worry though, it sounds like a lot, but these are all actually really simple terms that can help you understand the WHY portion of your whitespace problem.
Micro and Macro Whitespace
The space between major/big elements in a page is, you guessed it, macro whitespace. Should you leave these two sections close to each other, or should you add some breathing room? The space between the smaller ones - a caption and an image, between letters or words, a caption and a CTA, an icon and text is all micro whitespace.
Micro also applies to whitespace WITHIN an element, as well as the entire composition! So pay attention to how much whitespace your next CTA has around its text (refer to the example above), you don’t want these to be all cramped up. You don’t want anything to be too close to each other, unless we’re talking about tiny little banners – then you don’t really have much of a choice.
Active and Passive Whitespace
Active whitespace is when you’re using whitespace to specifically guide the visitor’s eyes from one important element to another. It’s a way to emphasize certain bits of content, for example, altering the structure so that your visitor’s attention is focused on that orange CTA.
Get them to look at your main headline on that pretty lander, then they go through the properly spaced out bullet points, which in terms leads them to the opt-in form. Active whitespace.
What about highlighting a certain paragraph? You can make it bold and leave more space above and below it to get somebody’s attention. Just like this one. Active whitespace, meant to get people’s eyes to take action.
Passive whitespace is when you just want to add some breathing room and balance in a composition. In other words, setting the foundations for active whitespace to take over and when you want to start attracting attention to specific areas. Both of them are equally important.
Adding margins (between images + text etc.), changing the font-family, setting proper line-heights and font-sizes – this is all passive whitespace.
Just like taking a shower so you can actually be clean (passive whitespace) before you put on that fancy suit or dress that grabs people’s attention (active whitespace).
I just couldn't think of a worse analogy!
Take a look at this example below. Same photos used for two very different banners. And yet we can still utilize vertical whitespace to attract attention to a nice, fancy, contrasting button without all the clutter.
While this is not the most perfect example of having good banners, as it may or may not work, but it’s a good start in sending the message across regarding our beloved whitespace. Or at least forcing you to perform more split tests now that you are more familiar with it.
Let’s have a look at yet another problem. Why does this quick mockup feel wrong? You’d probably say it needs more space, right? But where, and why?
Remember: Micro, Macro, Active and Passive whitespace. Let’s apply all of these and see what comes out. Starting with some passive whitespace and fixing the typography – font-sizes/families, line-height and adding some margins to the image.
Moving on to some active whitespace by adding emphasis on one of the paragraphs, main headline, and adding more white space for the main CTA. These are subtle differences but they do make an impact as you can see:
Now here’s your precious WHY after applying our freshly acquired whitespace knowledge, pretty as a princess! This applies to EVERY element in a given composition, even typography. It doesn’t matter if I’m showing you a mobile lander, an app, a banner, a site or a book cover.
Does this clear things up a bit, perhaps give you another perspective on whitespace? Understanding whitespace, combined with colour and typography, should set you on the right path of sniffing out WHAT and WHY may be wrong with your own sites/landers and creatives which would hopefully, in turn, improve your ROI.
I've said it once, and I will say it again.
Shishev is one amazing designer.
Awesome. I have really like it
God damn those are examples are sick. Your little tweaks made something average turn into something beautiful.
Your use of spacing around text makes the copy so much easier to read, no doubt it would have a positive effect on CR.
You had me at bacon.
Home > Technical & Creative Skills > Design - Imagery, Banners & Landers