WHITE SPACE
"When was the last time you actively considered the role of nothingness in your life? We generally focus on the tangible–however, a strong design requires careful attention to both what’s there and what isn’t there. White space (sometimes spelled “whitespace”) is integral because it tells our brains which elements in the design are the most important–it helps us process these elements, both on their own and as part of the overall image."
White space is related to positive vs. negative space or figure vs. ground. In class, I also continually remind you about awareness of space vs. shape!
White space is related to positive vs. negative space or figure vs. ground. In class, I also continually remind you about awareness of space vs. shape!
"Active and Passive White Space
White space refers to the canvas space left in between different elements of your design. You may have also heard it referred to as negative space. It’s important because it keeps your design from being too cluttered or too confusing. There are two major types of white space in graphic design:
Active White Space – This is the space that you make a conscious effort to add to your design for emphasis and structure. Active white space is often asymmetrical, which makes the design look more dynamic and active.
Passive White Space – This is the white space that occurs naturally, such as the area between words on a line or the space surrounding a logo or graphic element.
When dealing with white space, you will mostly be concerned with the active white space—-however, you still have to pay attention to your passive white space and how it works with your overall design."
White space refers to the canvas space left in between different elements of your design. You may have also heard it referred to as negative space. It’s important because it keeps your design from being too cluttered or too confusing. There are two major types of white space in graphic design:
Active White Space – This is the space that you make a conscious effort to add to your design for emphasis and structure. Active white space is often asymmetrical, which makes the design look more dynamic and active.
Passive White Space – This is the white space that occurs naturally, such as the area between words on a line or the space surrounding a logo or graphic element.
When dealing with white space, you will mostly be concerned with the active white space—-however, you still have to pay attention to your passive white space and how it works with your overall design."
The image below on the left has horrible command of white space, both active and passive. The image on the right gives much better awareness of white space, both active and passive.
The image below concentrates on passive white space. See how the left seems uncomfortably crowded and isn't welcoming to the reader. The image on the right is much better and this is achieved simply by adding more leading.
Consider the passive and active white space in the layout below.
"It’s not always white. Don’t let the name fool you; white space can be any color or pattern you like.
The term “white space” is actually a bit of a misnomer because it implies that the space has to be white in color. White space can actually be any color that represents the negative space in your design. For example, a presentation folder might use a bright hue like yellow in place of white to bring energy and color to the design. White space can even have a repeating pattern (like a subtle texture) to make it more visually appealing. Colored whitespace is more interesting to look at than plain white, but the principles are still the same—it’s an area that you don’t want the eye to focus on."
In the following examples, the (active) white space is actually green in the Apple ad, blue-gray texture in The Pianist poster, and bright cyan for the last poster about a book festival.
The term “white space” is actually a bit of a misnomer because it implies that the space has to be white in color. White space can actually be any color that represents the negative space in your design. For example, a presentation folder might use a bright hue like yellow in place of white to bring energy and color to the design. White space can even have a repeating pattern (like a subtle texture) to make it more visually appealing. Colored whitespace is more interesting to look at than plain white, but the principles are still the same—it’s an area that you don’t want the eye to focus on."
In the following examples, the (active) white space is actually green in the Apple ad, blue-gray texture in The Pianist poster, and bright cyan for the last poster about a book festival.
"Conclusion
Whatever you do, don’t fall into the trap of thinking of white space as “empty space.” It may look empty, but that’s because you designed the space to give viewers a better look at your design, not because you didn’t have anything better to put there. When it comes to graphic design, the elements you leave out are just as important as the ones you create."
Whatever you do, don’t fall into the trap of thinking of white space as “empty space.” It may look empty, but that’s because you designed the space to give viewers a better look at your design, not because you didn’t have anything better to put there. When it comes to graphic design, the elements you leave out are just as important as the ones you create."
- All text from http://www.printwand.com/blog/white-space-in-graphic-design-and-why-its-important
Images from:
https://5thcolor.files.wordpress.com/2011/09/white-space.jpg
http://static1.squarespace.com/static/54ff45f0e4b0b7c9466ccf64/550766dde4b0ba69bba7d554/55076753e4b0761a0eead3e3/1426548566189/female_spread.jpg?format=1000w
http://milq.github.io/white-space/white-space.png
https://assets.econsultancy.com/public/imgur/C27rBY1.jpg
http://opusdesign.us/wp-content/uploads/2012/10/apple-ad.jpg
https://s-media-cache-ak0.pinimg.com/236x/27/43/a6/2743a605621730f3e2705133a8ca9bd1.jpg
http://wix-wpblog1-wix-com.s3.amazonaws.com/blog/wp-content/uploads/2014/02/07112213/vectors-01.jpg
http://static1.squarespace.com/static/54ff45f0e4b0b7c9466ccf64/550766dde4b0ba69bba7d554/55076753e4b0761a0eead3e3/1426548566189/female_spread.jpg?format=1000w
Images from:
https://5thcolor.files.wordpress.com/2011/09/white-space.jpg
http://static1.squarespace.com/static/54ff45f0e4b0b7c9466ccf64/550766dde4b0ba69bba7d554/55076753e4b0761a0eead3e3/1426548566189/female_spread.jpg?format=1000w
http://milq.github.io/white-space/white-space.png
https://assets.econsultancy.com/public/imgur/C27rBY1.jpg
http://opusdesign.us/wp-content/uploads/2012/10/apple-ad.jpg
https://s-media-cache-ak0.pinimg.com/236x/27/43/a6/2743a605621730f3e2705133a8ca9bd1.jpg
http://wix-wpblog1-wix-com.s3.amazonaws.com/blog/wp-content/uploads/2014/02/07112213/vectors-01.jpg
http://static1.squarespace.com/static/54ff45f0e4b0b7c9466ccf64/550766dde4b0ba69bba7d554/55076753e4b0761a0eead3e3/1426548566189/female_spread.jpg?format=1000w