White space well executed in projects is not something that gets enough attention. Cramming items together on a page limit what you want users to look at. The definition of white space is the area between design elements. It is also the space within individual design elements. Including the space between typography.
In spite of its name, white space does not need to be white. It can be any color, texture, pattern, or even a background image. Proper spacing improves the use and comprehension of your interface. By paying attention to add white space it helps users create a mental map of what they are doing or looking for. Not to mention Google grades sites on mobile usability. So there is a search optimization benefit to white space being properly used.
White space can be broken down into four arenas
First is visual space surrounding graphics, icons, and images. This is wise because all these are actionable items. Thus your users are paying attention to this and may assume they are clickable.
Then second is layout that includes margins, padding, and gutters. Without proper spacing copy becomes difficult to read and interaction will fall off.
Third is text white space. That is spacing between lines and spacing between letters. This keeps copy within a paragraph and letters easily seen and read.
And finally, content white space separating columns of text in rows. So, not all copy needs to be right next to the next paragraph. By adding more white space you can emphasize one paragraph over another. Pull quotes in online articles are one example.
Active and Passive
White space is active and passive. Active white space is intentional to provide page structure. And guide the user through the pages content. Passive white space is space that is used for aesthetics. It’s made that way to make the design great vs the design looking sloppy.
White space can also exist on a macro and micro level. Sometimes a lot of information has to be used. Thus more space is required to be taken up in the design. But at the end of the project the design has to feel right, and create a sense of where to look.
If you have an interest in UX Design and what else we can offer in resources, let us know in the comments below.
