Knowing how to use white space can be an effective tool in your design arsenal.
Let’s start by addressing the elephant in the room – white space (also known as negative space) isn’t actually white. Don’t be fooled, it’s a common misconception that prevents many people from utilizing this essential design principle. White space can be any area within a design that is free from text, images, or embellishments. Designers love it because it can help create grouping, add emphasis and improve legibility. Here’s why white space is a subtle principle and how it can help boost the impact of your designs.
Contrary to the name, white space doesn’t just apply to the color white. Rather it applies to any areas of a design not taken up by other elements, such as text, photos or illustrations. White space can be any color, as it refers to the background of the design.
While images and fonts communicate a message, white space can be used to enhance and clarify the important information. You’ve probably heard of the phrase ‘less is more’? Well, it’s almost always the case when applied to design.
As easy as it can be to over-design, it is important to avoid needless clutter. White space funnels your eye towards the content and allows your message to stand out. Clarity doesn’t mean boring design; rather a strong design will speak for itself rather grabbing for the audience’s attention. Consider Apple’s branding and advertising. It utilizes large areas of white space to communicate a sense of simplicity and to reflect the user-friendliness of its products.
Books and magazines are a great example of the importance of white space. The margin – the blank area between the text and the edge of the page – makes reading dense copy much easier.
You’ll also notice that Canva’s blog has a large margin area and the body text only consumes approximately half the screen. This is to ensure that your eye isn’t distracted by other elements and the information is delivered to you as efficiently as possible.
Embracing white space as an element in itself can create unity and impact within your designs. Here’s 8 ways to design with white space.
Deliberate white space can help you create a strong focus for your design, so don’t be afraid to leave large areas of your design empty as in this example where white space is above and below the ‘Origami’ title.
Achieve more white space by removing unnecessary elements such as a border to help open up the design. Remember that borders, shapes, icons and other elements should only be used if they add value to your design.
Use background images with ample copy space that for text to be overlaid. Or, enlarge the image to create more white space for text, as in the example below.
A solid colored background can be used to create lots of space around text while still adding an element that will garner attention.
Expanding or condensing the space between letters can align your text in blocks and help it appear as a single cohesive element, as in the image below. You’ll note that it’s also more readable.
Multiple elements within a design should all have their own padding or margins – or white space around them. Notice the even padding around the text, “Cooking: Back to Basics;” the space underneath the website URL; and the unused space between the text box and the handle in the background image.
The border between a painting and picture frame helps draw attention to the painting and while also giving the image room to breathe, so to speak. To apply this to graphic design, add a border around central elements like text and images. Tip: Make sure all of your elements are centered in order to map out white space evenly.
Avoid design clutter by increasing the size of one significant element within your layout, such as the word ‘Eat…’ in this example. Keeping other elements minimal to open up more white space.
Less is often more when it comes to graphic design because less clutter means it’s easier to convey your message. Think about how to balance content with white space in order to best express your brand or message. It all starts with a blank page, but it doesn’t always need to end with a full one.
See all