The other day one of our account managers made the remark that one of the social media banners we have created were so empty. “it’s got so much white space, it feels so empty.”
One of the principles you learn in design school is positive/negative space, its composition, and it’s use. There are seven principles in total, for a quick lesson check out this link: (http://artblog.emilygonsalves.com/2009/03/seven-principles-of-design.html)
First you need to understand what positive/negative space is:
In 1915 Danish psychologist Edgar Rubin developed a theory about a black and white picture that is know today as Rubens Vase.
“One can then state as a fundamental principle: When two fields have a common border, and one is seen as figure and the other as ground, the immediate perceptual experience is characterized by a shaping effect which emerges from the common border of the fields and which operates only on one field or operates more strongly on one than on the other.” Edgar Rubin, Synsoplevede Figurer, 1915 (https://en.wikipedia.org/wiki/Rubin_vase)
In a nutshell, your eyes can only see either the positive/negative space at one time. Your brain either registers the white or the black. Some of you will see the vase (white) at first glance and some the faces (black). Only after you have seen the one dominant to you and you are made aware of the other, your eyes will look for and find what your brain will register the other. (I always see the faces first, I need to force by brain to register the vase)
Now to me this principle taught me three things when I design:
- there should always be balance between positive/negative space, because there’s a 50% change that the person viewing your artwork sees it the way you do.
- this balance needs to be comfortable to the eye
- too much filled space can confuse the viewer and too much empty space can make the artwork look incomplete
Now how does this relate to digital design?
I have two examples using typography to explain what could happen when you design with negative space in mind.
The first (image 1) is a paragraph that could be used in the content area of a website or blog. They all contain the same words.
Fig1, I tend to see as one big piece of information, and my first reaction is not to read it because it’s going to take too much effort and time. Fig2, is better spaced. I will perhaps read the heading, the first summary paragraph and then leave the remainder if the content did not grab my attention. Fig 3, I see the heading and I immediately jump to the bolded sections. I now read snippets and summaries of the article and get a better overview of something interesting that was perhaps hidden further below.
The second example is for social media posts and display banners:
Now social media has its own restrictions when it comes to layout (like Facebook with it’s 20% copy on image rule) but on display banners you have only a few seconds to get your message across.
You get so much clutter online, if your banner looks like fig 1, you are trying to hard to give the user a lot of information at one time. By spacing the copy out and changing the weight of the typography (fig2) you already get a sense of hierarchy. On fig 3, by adding even more white on the margin and rather using a smaller font size the message becomes clearer. Remember a simple rule for font size on digital is not to go below 14pt.
Also if you have too much content for that 250×250 display banner, rather consider doing an animated GIF banner where you break up your content into benefit statement, product description and call to action. Just remember to keep your logo as a constant on all the frames.
So next time the client comment is “it feels so empty, fill it up with something pretty” *eek*, explain to them the value of white space and how making the choice to keep it empty would benefit them.
