ico_gvoice

A good command of negative space brings layers to your design!

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.  

Read more
April 1, 2020

Q Brick X Nic Hsu “A little surreal, a bit out of the daily life” of Retired Nutcracker Soldier

▲ Nic Hsu on the London's streets  Article | Mei-Ling Liu Photo | Nic Hsu

2020 Design
April 1, 2020

A Manual for Workplace Relationships and Communication, Maybe “You Should be More Calculating in Your Communication”

▲ Ashley Chen - You Should be More Calculating in Your Communication The word "calculating"

Columns Recommendation
April 16, 2020

After a Transition, Who is Gamania at 25 Years Old? Exclusive Interview with Iona, Director of the Corporate Marketing Office

5 years ago, at the age 20, Gamania Digital Entertainment established its goal to developed

Feature VOL. 89
April 1, 2020

“Tonight, I’ll be eating…” Internet slams Uber Eats spokesperson campaign ads. Is a plus or minus for the brand profile?

"Tonight, I'll be eating...Kebuke bubble milk tea without ice." "Tonight, I'll be eating...Jin Feng braised

Columns On Branding
April 1, 2020

Gamania First Mild Builder Mobile Game “Komori Life” World Debut on Mar 25!

Pre-registration for dual platform and exclusive release of limited edition browser game "Komori Life Cat"

Events TW
April 1, 2020

The Impact of smartphone Holding Methods on UI Design, Let’s Talk about Thumb Rules

Thumb Zone Interaction Design - Mobile UX ▲Photo by Andrea Natali on Unsplash When Saha

Columns On UX