Foreword
I have discovered that when I was helping out with reading paper during work. There was an issue with layout most of the time. The client often requests a revision to increase the size of elements because they don’t jump out enough. In fact, aside from the forced solution of increasing element size, you can also make use of the negative space. Well organize the elements to enhance the discernibility. It will clear up the items that the client’s complaint, “not big enough”. Thus, I’ve summarized the technique into this article, in the hopes of facilitating your work.
This article is for: Beginners or friends interested in design
Experts are welcome to comment below and share your pro-tips!
Why should you learn how to use negative space?
Because a good command of negative space will let your layout breathe better, and sort out the element issue.
The concept of negative space
In short, negative space is the spacing between elements. The Gestalt’s Theory’s Principle of Proximity can also be adopted in this case. Here is a simple overview of the Gestalt’s Theory’s Principle of Proximity: our eyes and brain easily bond nearby objects together. As illustrated below, take a look at Figure (A) first. It consists of an evenly distributed four squares, so it’s easy for our brains to consider them a group. Now take a look at Figure (B). If we pull them further apart, they magically appear to be four independent square sets. This is the Gestalt’s Theory’s Principle of Proximity.
Now let’s see another example. Take a look at Figure (C) first. It is a very basic image and text layout, with the large image on the left and the text on the right. We naturally consider the left and right blocks as a group due to the equal distance between the elements. Now let’s take a look at Figure (D). We have slightly shifted the distance between the large image on the left and the text on the right. We can see a subtle change to the the elements. Now let’s pull the left and the right sides further apart and make them into two separate
This means that we can adjust the negative space to change the elements.
Read More
If you are interested in Gestalt’s Theory, please take a look at this article. The author expalins in detail in this article.
“Gestalt Psychology” for Better Layout Designs!
Utilize Negative Space to Adjust Text Hierarchy
Even though we commonly call the space between texts word spacing and line spacing, they can be viewed as a type of negative space. In fact, we could directly apply the aforementioned principle. The legibility of the words can be improved by adjusting the spacing in between. There is a basic rule for text hierarchy that is to be followed in these adjustments. First, let’s take a look at Figure (E) to understand these units. The distance between the words is word spacing, the smallest unit in an article. The second level is the line spacing.
If we list out all the levels of their hierarchy, it would look like the following Figure (F). This order will guarantee that there are enough levels and suitable spacing for legibility.
Take a look at Figure (G) and you will find the hierarchical relationship (indicated here as px for comprehension.)
The greatest margins are on the top and the bottom. Remember we mentioned about Gestalt’s Theory before?
Just like Figure (A), our brains will consider the title and the content as a set, because we have left a greater top and bottom margin than the spacing between the elements. The second greatest spacing is between the title and the content, then the line spacing, and finally the word spacing. Level after level, they are ordered in a systematic way. You can see the relationships between the different texts and organize a system through this method.
The text element spacings ordered from the greatest to the smallest are: Top and bottom margins > title > line spacing > word spacing.
Use negative space to change your visual language
Different spacings inspires different emotions. For instance, the expression of strength, speed, and intensity would require a layout with smaller negative space. In the figure below, the negative space between elements are basically extremely small. There is no space to breathe, giving a sense of urgency and tension. However, if you look closely, you will discover that there is still some space between each block. This allows for the minimal discernibility requirement of the elements. Due to the larger fonts used, the text are still in the range of legibility.
▲ Source: Pinterest
▲ Source: Pinterest
If the goal is to express the sense of classic, then there must be greater spacing around the elements to demonstrate such sense. In the following figure’s example, the word and line spacing are set a bit wider to create a more comfortable reading experience, just like an luxury would offer, a sense of pleasure. If we attempt to personfy a luxury, we might imagine an elegant, steady, and organized gentleman. That is exactly like the feeling we get from the following figure, each element is given a lot of spaces. It is not crowded at all. Each element is in its corner and creates a comfortable, elegant and high-class style.
▲ Source: Pinterest
▲ Source: Pinterest
The adjustment of the spacing between the elements can create a different visual language.
Conclusion
Negative space is more than an empty block of space, but a powerful tool of your layout. It is difficult to command. If you want to apply it well, you must constantly observe different cases and learn about negative space.
Finally, I want to share a great website with you all: Grids
This website is outsiding because it uses grid lines to analyze these website layouts. You could learn how to use negative space to develop the website ambiance by learning from other designs using grid lines.
Thanks for reading till the end!
My name is Howard, and I hope you have enjoyed this article. Welcome to follow me, encourage me, or contact me if you have any further questions. My e-mail address is howard_chen76@hotmail.com. Thank you! See you next time!
“A good command of negative space brings layers to your design!” by Howard Chen. Reprinted with permission by the author.