Every element that you use in your UI needs special attention. You carefully pick out the colors, graphics, photos and fonts. Each item is chosen for how it fits into the design. You create a design that carefully balances all of these elements. Have you considered how you use white space?

What is white space?

White space is the space between elements. It is intentionally left blank or empty. White space or negative space is the space between columns, graphics, text and other elements. You leave these areas untouched to help make your design easy to read and use.

Where can you use white space?

• Photos, graphics or any visual element: By adding white space around your visual elements, you can make them stand out. Too little space around them and your design may look cluttered. Too much and it may look empty. You need to play with the space to see what works.
• Navigation menus: Your visitors use the navigation menu to move through your design. Tinker with changing the spacing between menu items and text.
• Headlines: They help guide people through your design. Increase the space around each headline. More space around your headlines makes them stand out and help people to understand how to use your design.
• Content or copy: Not enough space between paragraphs or lists can make them difficult to read. Increasing the space around paragraphs or between characters can help to make it easier to scan and read.
• Columns: Margins or spacing defines the borders of a column. Use margins and padding to give your columns more definition and breathing room.

As a design element, white space doesn’t have specific rules about when and where you should use it. You have to experiment with spacing to learn what works best. White space is a tool that you use to help make your designs more readable and easy to use. Isabella Morris on Usablity Geek talks about how to use white space to increase usability.