Coded4 Home Icon
Coded4 Email Icon
Coded4 Phone Icon

White space

What does it mean and how can it help your customers focus?

Monday, March 22nd 2021

White Space is just that! Space around your graphical elements as well as the space between type and images. Even though its called ‘White Space’ it does not have to be white, this can be any colour, pattern or image

White space is usually put into two categories: Macro White space and Micro White space

Macro white space is the larger spaces between your graphical elements, this helps with the overall flow of your website whereas Micro White space is the smaller lesser noticed spaces between type and grid images. Micro White space plays more of a part in legibility. The white space around a paragraph can be seen as a margin, if margins are too small, too large, out of line or worse not there at all the reader will find the content illegible or harder to digest.

So why do we use it? White space creates a visual harmony between your website graphics and content such as images, videos etc. Without it your website becomes somewhat busy and hard to understand! With the use of White space the Designer can create a flow of information that is not only pleasing to the eye but also much easier to follow for your .

Heres the tricky part, a lot clients will see the white space as unused and wasted space! This couldn't be further from the truth and with some gentle explanation it can always be rectified. Try and show them good examples of white space use, explain the reasoning behind the use of white space and also compare the two designs to one another, the proof is in the pudding as they say! However if you are truly stuck for white space due to the design brief, try and add some in where you can to keep it as clean as possible without ignoring the brief however cluttered the website might become!

Here is an example of where it's gone wrong. We’ve mocked-up these designs to demonstrate poor use of white space and are not actual websites:

The first image mostly centres around the misuse of Micro White space, as you can see the text has a very tight line height, meaning that the spaces between the lines of the text are much smaller. This makes the text harder to read and understand.

You will also notice the lack of space between the images, header and the text. This is a misuse of Macro White space. It's important to give both your images and your text room to breathe.

As well as Macro White Space, margins are hugely important as you will see in the next example. Images must have there own space in order to shine! Give them the room to be seen.

There are certain examples of margins not being used that actually work but Make sure its consistent and necessary, the margins can be ignored! In most cases the margins will be ignored when it comes to header images, as you can see in the image used above the header image is full width. This is your hero image! The one that describes your product or company the best. The first thing you want your to see and be impacted by.

Here’s an example of margins not being used in regards to images. You can see that it works! If you use it in conjunction with good white space techniques it doesn't look too busy.

Here is an example of where it went right. We’ve mocked-up these designs to demonstrate good use of white space and are not actual websites:

The image above shows the correct use of both Micro and Macro White Space. The red lines signify the white space used. Every image its own chance to shine, each piece of text has breathing space and helps the overall flow and balance of the website. This proves that design is fundamental to keeping the content and structure of your website clean and easy to digest by your audience.

Here are some fantastic examples of good white space use from the pro’s:

Apple:

Apple has consistently use modern and minimalist design techniques. The products are allowed to speak for themselves throughout the website.

https://www.apple.com/uk/

Quip:

Quip keeps their website clean and simple. Their brand is streamlined and sleek toothbrushes and it's reflected throughout their design.

https://www.getquip.com/

Pocket Penguin:

As well as a great brand identity, Pocket Penguin has perfect white space usage. With the use of clever animations and colour transitions, the white space creates a good flow throughout the website and allows the books to speak for themselves.

https://www.pocketpenguins.com/

To summarise

White space is not only hugely important but massively beneficial. It helps your audience flow naturally through your website with a clear, uncrowded and smooth layout. The content is allowed the space it needs for your audience to interact with and understand the information you are giving them. All of this allows for superior website design that will not only reflect your service or product but make for an enjoyable experience.

The next time your client says “white space is just unused space” refer them to some websites that use it well, explain the uses and reasoning behind them and why they’re necessary. Hopefully this will allow you to come to an understanding with your client and you can work together to create an amazing website.

Here at Coded4 we are dedicated to bringing you the most up to date and useful information that will help you through your website design journey. We are always available so don’t hesitate to get in touch if you need help with your website!

Thanks for reading and we’ll see you on the next one! - Laura 

 

Project Image

We met Marie-Therese from Artists' Cottages at a BNI Networking event we attended, and after a brief...

Project Image

Our long-time friends at Shoo Social Media approached us to ask if we could host and look after thei...

Coded4 quote mark icon

Coded4 were very good at getting us to where we need to be and it basically allows us to stay in business.

Coded4 quote mark icon

Robin Jessop Ltd

Contact us
Scroll-to-top button