In the previous article, we learned about how sizing and scaling can be used to make your designs harmonious and clear. In this, our final article on invisible forces in design, we’ll learn about how subtle use of spacing–often called “white space” or “negative space”–can be used to make your designs communicate efficiently.
Your “Data/Ink” Ratio
The more mindfully you use white space, the higher your “data/ink ratio”. This is a concept introduced by the information design guru Edward Tufte. It’s a function of how much information is being conveyed by every drop of ink–or, in the case of mobile and web design–by every pixel.
The graph on the left has a much higher data/ink ratio than the graph on the right. Does the graph really need to be filled in with “ink”? No, it communicates just fine with dots and lines.
What if you took it a step further, and removed the lines, leaving only the dots?
Now, the communication has fallen apart. Yes, you can see all of the data points, but now you’ve lost the “story” about how the data changed over time. Plus, it has become difficult to distinguish from a simple scatter plot graph, wherein “time” is not one of the variables, and the data doesn’t go in a linear fashion.
Closer Items Are Perecived as Being Related
In the first article of this series, we learned about how the alignment of elements implies relationships amongst those elements. What’s also important, is how close those elements are to one another.
This is just a simple grid of squares, like tiles on a floor.
But if you create wider horizontal spacing between vertical rows of squares, now you have a series of columns.
So, when there are drastic changes in data in the above graph, the mind may want to connect the dots in the wrong sequence, just because one dot is closer to another.
Using White Space for Clean Layouts
These principles extend way beyond line graphs. They’re present in everything you design. Especially when you’re designing for small screens, you don’t want pixels to go to waste–you want to design with a high data/ink ratio.
Designers tend to use grids to help organize information in a layout. Grids help align elements–such as lines of text–which then creates regions of information that are related to each other.
Here’s a basic layout, designed on a grid. The left-hand side is your navigation, and the larger area holds the main content.
This layout is fine, but notice that the white space between the navigation and the white space between columns of text within the main content area are the same.
It would make sense to slightly widen the gutter between the navigation and the main content area.
Now there’s a more crisp delineation between the navigation and the main content, and all we had to do was add a little white space.
Using White Space for Clean Typography
In the previous article, we learned about how sizing is one of the many factors that can be used to create typographic hierarchy. White space can help organize your typography, too.
For example, look at this header, meta data, and body copy.
They have harmonious size relationships with one another, thanks to the fact that their sizes are chosen from a varied scale, but, they look pretty sloppy!
The problem is that the negative spaces between these elements haven’t been considered.
The meta data line is already nicely differentiated from the header: it’s a different size, it’s in all caps, and it’s even nicely spaced out a little.
One great trick is to use the height of the meta data type to determine how much space there should be between it and the header. Like this:
Generally, you’ll be using your eyeballs to figure out this spacing. There’s no mathematical way to tell you exactly how much spacing there would be. It’s a function of the line-height, the amount of margin or padding you’re using, and the characteristics of the particular font.
Now, What About That Body Copy?
It makes sense for the metadata to be really close to the header, but the header doesn’t need to be so close to the body copy. In fact, the header and the metadata can be their own unit.
You can use the distance from the top of the header to the bottom of the metadata as a guide, and place half that distance between the metadata and the body copy.
Conclusion
By thinking about the how you shape your layout and communicate with white space, your designs will look cleaner and clearer, and while being more usable, and converting better.
That wraps things up for now–if you haven’t already, be sure to check out the first and second article of the series!