White Space, Visual Hierarchy & The Prototypical Landing Page

Space is something some of us crave, some more than others. In an office, I need some space to effectively work, think and sometimes withdraw to lick my wounds.

At home, a place to do my own thing is great, I have a basement – which is essentially my man-cave. But I’m not writing this to talk space I need at work or at home.

White space (sometimes known as negative space) in the context of a website or landing page is the part of a page that is left unmarked: space between words, white space between images (videos etc) and space between borders or margins.

Judicious use of white space on a landing page offers a rich, pleasant viewing experience. Too much or too little white space gives the impression that the web page is either stuffed with content/keywords or incomplete.

Finding a happy medium of content versus white space is difficult to do for first timers. Not everyone is well versed with design themes or principles. According to an eye-tracking study conducted by renowned usability expert, Jakob Nielsen –

1. Presenting text in an easy to read manner
2. Using a simple navigational structure
3. Replacing useless graphics with useful ones or with white space will lead to a higher impact page.

With white space comes the thought of what the content on your page is really trying to convey; If you’re filling up a page with seemingly ineffectual content. Your visitors will not engage with your page as expected.

Be deliberate with every part of your page. Inject a photo that has to do with your product or try different images or photos to appeal to your visitor’s emotional heart strings.

Use short copy but don’t make the copy devoid of usable content. Provide your prospects with information about what you are asking them to sign up/buy.

When using white space effectively, something magical happens. The spacing induces visitors to move their eyes to a part of the page where there isn’t white space. This is where the visual hierarchy comes into play. Visual hierarchy and white space go hand-in-hand.

Visual hierarchy is useful in defining, for your visitors, which information is more important. Use relevant icons, pictures, text that convey what is important for your visitor.

When people skim through your landing page, your design should help lead the conversation in their mind.

8 Principles of Design You Can use to Direct Your Site’s Visitors:

1. Size: The bigger you make something, the more important it seems

2. Contrast: The color of your CTA button doesn’t matter – whether or not it stands out from the background will increase your conversions

3. Symmetry

• Symmetry helps visitors remember
• Asymmetry grabs the visitor’s interest
• Stick to the basics, create a clutter-free page

4. Similarity: Things that are similar are viewed as more related rather than those that are dissimilar. An example would be to use similar design philosophies for each section of within your landing page.

5. Unity: Visually and conceptually your page needs to reinforce the ideology that you’re trying to impart.

6. Grouping: Place similar information closely together on a page. This reduces the visitor’s search fatigue and helps them get to a quicker answer. From a design perspective, a form that has an outline versus one that doesn’t will draw the user’s eyes to that form.

7. Style: Change the design style to emphasize a piece of information to stand out from the rest.

8. Color: Choose colors that are readable and don’t clash. Ex: Making sure that your text and background complement one another and are contrasting.