White space is a very useful technique when you’re creating design layouts. When putting together a design layout, it is important that the elements on the page can breathe.
It is a good practice to remember that negative space in web design does not have to be only white — you can use any colour, texture, pattern, or background image.
Two types of space
Macro space
This is the space between bigger elements like text columns and graphics. The best example of a website that implements macro white space is the homepage of Google.
Micro space
It is the space between the small elements like letters, lines, icons, forms, paragraphs, buttons, and graphical elements.
White space is to be regarded as an active element, not a passive background
Jan Tschichold
Why whitespace is a good thing?
Customers and managers may want to place many elements and functions on the screen, they think that it will be useful for consumers. Too many elements on the screen without enough whitespace can make user distracted:
A screen overloaded with information and interactive elements makes users difficult to find what they need.
Advantages of using whitespace
- Reading
They become difficult to read and require additional effort to distinguish if there is not enough space between elements. Balancing negative space, micro-space, in particular, solves this issue and makes the reading process more intuitive.
- Visual hierarchy
The empty space lets the user separate the material into easy-to-read sections and concentrate on the details.
- Visual communication
Whitespace not only creates harmony, balance, and helps to brand design, it can also be used to lead a reader from one element to another.
- Design composition
Elements without adequate air raise the distraction level dramatically. The trick is to balance your designs and let whitespace act as a great tool for easy accessibility and better user experience to separate chunks of content.
Great examples of websites with white space
apple.com/
squarespace.com
shopify.com
invisionapp.com
dropbox.com
