Illustration by Bettina Reinemann
Every design begins with a blank canvas. Whether you design a website or a mobile app, you start with a blank page or screen and then add elements like text, photos, buttons, menus, and more. It might be tempting to fill the entire space with content, but doing so could make the user interface (UI) look cluttered and unappealing.
Clarity is an integral property of good design, as a UI should be clear so that all users can interact with a product effectively. This happens when designers incorporate ample white space into all page elements from top to bottom.
This article will discuss the concept of white space and share five practical examples of how to use it to create an uncluttered look.
What is white space in design?
White space, also known as “negative space,” is empty space around the content and functional elements of a page. The basic role of white space is to let your design breathe by reducing the amount of text and functional elements that users see at once.
Despite being called “white,” this space doesn’t literally need to be white. Any type of space that serves as a background for the content or functional elements can be considered white space.
ToyFight uses a bright color for the background to act as white space. Image credit ToyFight.Elements of white space in user interface are:
- Line spacing and letter spacing for text.
- Margins and paddings around functional elements such as buttons.
White space design: 5 practical examples
Now that you know what white space is and how to identify it in your design, here are some practical tips on how to apply white space:
1. Make text more readable
The majority of information we have on the web and in mobile apps is in written form. So, it’s essential to design in a way that makes it easier for users to read your content. White space can enhance readability by making it easier to follow content and see elements on the page.
If you want to use white space to make written content more readable, you need to adjust line-height (the vertical distance between lines of text). When line-height is too tight, it becomes harder for users to read the text, as the copy won’t have enough breathing room. At the same time, too much white space between lines can break the reading flow, as lines in a text become disconnected.
So, how do you find the ideal line spacing? It’s recommended to select a line-height in proportion to font size. The optimal line-height for body text is between 120% and 145% of the font size.
Proper line height helps make text more readable. Image credit Nick Babich.2. Create connections between individual elements
White space has a tremendous impact on how people comprehend information because content relationships are defined by surrounding negative space. The Law of Proximity, one of the basic Gestalt laws, states that objects located near each other appear similar. It’s possible to say that white space acts as a visual cue to give our brains a signal that the image below is not a collection of individual objects, but rather a single unit.
In this image, a square is created from circles, rather than a collection of circles. Image credit Nick Babich.You can rely on this rule when you design web forms. It’s recommended to place labels closer to the relevant fields to create a single unit.
A form field featuring name, address, email, and phone number to represent use of white space. Image credit Nick Babich.
3. Drive user’s attention to particular objects
Good design guides users through the interactions on a page, and white space plays a major role in this process. It’s possible to define a relationship between an amount of white space and user attention—the more we add white space near a particular object, the more attention it receives from users. This occurs when the area that the object is near has nothing distracting away from it.
The technique of using white space to drive user attention works well for promo landing pages. It’s possible to direct user attention towards specific content or functional elements (such as call-to-action buttons) using white space.
Large font size and a generous amount of white space near the slogan “Save Anything. Read Anywhere” puts it in the spotlight. Image credit instapaper.Designers can use a simple five-second test to measure which elements receive more user attention on a page. To do this, view your page for five seconds, close your eyes, and say what you remember. If you name the right elements (the ones you want your users to see), you’ve used white space properly.
4. Create visual hierarchy on a page
Visual hierarchy is about organizing content to help users easily process the information on the page. When visitors open a new page, they scan it rather than read it. Good visual hierarchy significantly improves the scannability of a website.
White space allows designers to create a general flow that the user’s eye will follow when they scan a page. There are two basic approaches to placing elements on a web design grid: symmetrical and asymmetrical.
Symmetrical layouts can be easier on the eyes. Since symmetrical design has built-in order and stability, it becomes easier for the brain to comprehend information.
Asymmetrical, on the other hand, is the absence of symmetry. In design, asymmetry is often used to create visual tension. Designers typically create asymmetrical layouts to bring attention to a particular area or elements on the page.
An asymmetrical layout with white text on the left and an image on the right with a gray background. Image credit Neuralink.It’s important to remember that both symmetrical and asymmetrical layouts should be balanced. To master balance, you need to measure the visual weight of each individual element in your composition. Visual weight depends on the size of an element (smaller objects weigh less than larger objects) and visual attributes, such as contrast (contrasting elements attract more attention than neutral elements).
5. Convey a feeling of elegance
White space has a significant impact on how your design is perceived—it plays a vital role in brand positioning. Paired with crisp typography and powerful photography, generous white space can easily make your design look luxurious. It puts a product you want to promote in the spotlight and gives users a clear signal that the product is the most critical part of the page.
Tom Ford eyewear page uses a primarily black background to make their products feel more exclusive. Image credit Tom Ford.White space is never wasted space
White space is a powerful tool in the designer’s toolbox. Applied properly, it becomes an integral part of visual design that acts as the glue that holds the different elements on a page together while improving the interface’s usability. Remember to consider UI white space right from the beginning of a project and create a spacing system that specifies the set of possible spacing values. As a white spacing system becomes a part of your user experience (UX) design systems, it forces you to choose from the list of predefined values, which allows you to produce a more consistent design.