Creating compelling layouts that users love is the responsibility of the designer. White space helps make the interface more beautiful and easier to read.
We live in an era of continuous distraction. From print to digital media, outdoor advertising, online advertising, all this information is surrounded by us. Websites, e-commerce, mobile apps, they are all content.
We want to create websites that users like to visit. All layouts need to be easy to understand and have readable and scannable content.
Crowded websites are hard to read. Complexity often makes users uncomfortable. If we use a lot of different information to oppress them, and all the information competes to attract users' attention, users will leave or not do what we want them to do. May be buying something on an e-commerce site or reading an article on a blog.
However, there is a concept that helps graphic designers create a good experience, making capacity more attractive and easier to follow. That's white space-a way to give you white space to avoid unnecessary clutter, and use white space between elements to highlight their advantages.
What is blank
The best description of blank space should be a simple thing, which itself indicates simplicity.
White space or negative space is the blank space on the website. It's a space sign that not only makes the layout more readable; it also strengthens the content itself. Users may focus on fewer, better displayed elements. COS online store is a high-end clothing brand that uses blank space to enhance its high-quality impression.
Development of white space
We can go back to the "new text" movement, which was initiated by Jan Tschichold in the 1920s. The movement proclaimed these ideas:
Asymmetrical balance of elements;
Rely on levels to design content;
Conscious use of white space;
Sans serif font.
Beatrice Warde's Goblet
Another example of early white space is the thesis "The Crystal Goblet" published by Beatrice Warde in the 1930s.
Warde describes two goblets: the first is made of pure gold, made with the most delicate craftsmanship, and the second is made of crystal glass, thin and transparent like bubbles. Choosing one of them will show if you are a real wine connoisseur.
The crystal goblets show this person's appreciation of wine. "Because everything about it is meant to show the good things that should be included, not hidden."
Warde likens this to opening a door to print and typography. She understands that rational use of space can enrich content.
What can be achieved through negative space
Tschichold and Warde use it in their work, and we can explain it negatively today.
White space, or negative space, is the space between your constituent elements. There is no need to understand from the letter is white or blank. It is a background that is not burdensome for the user, so that the user can focus on the main content.
Speaking of graphic design, it is important to establish a visual hierarchy among different UI elements. This helps guide users to interactive decision points.
Moreover, white space can reduce the clutter of page information and make the content more breathable.
With this in mind, let's review what can be achieved using white space in web design:
1. Websites are easier to browse
The use of white balance improves the comfort of browsing the website. Users can easily see the content, so it's easier for them to find the information they are searching for.
2.Improved the readability of the content
Keeping the proper distance between elements makes the content easier to read. Help users read web page information faster.
3. Improved aesthetics
Using more white space and reducing unnecessary elements can greatly improve the visual appeal of your website.
Ask yourself a question: Do you want to browse a cluttered page full of pop-ups, banners, and unnecessary visual effects, or a simpler, easier to navigate and read website, which one can achieve the point?
4. High-quality impression
The use of a large number of visual elements can degrade quality. Using blank space, on the other hand, will improve the sense of quality.
White space makes the site look lighter and more elegant. The lack of elements competes to attract the user's attention and improves the user experience.
Blank form you can use
Now that you understand the advantages of white space, let's do some practice. There are several types of white space you can use.
Large area blank
This is the white space between different elements. It helps to establish the hierarchy and ensure that the website is suitable for the process.
Tiny margins are small spaces between elements. We can use it to improve the clarity and transparency of the layout.
The white space surrounding objects will guide users to notice them, improving their visibility and user attention.
4. Inactive blank
This refers to the minimum white space between elements. It is necessary to maintain proper navigation, highlight active elements in the interface, and ensure the readability of the content.
Blank use case
In order to better use white space in your design, let's look at some examples of clever use of white space.
Oculus' landing page is a good example of how to use consulting information to sell products. All the information is an attractive photo, clear copy, blank space between the booking button and the elements.
The clothing sales brand ETQ proves that succinct sales reduce clutter and avoid unnecessary information that drives users to pay attention to the product.
At the same time, through design, the quality of the product has been interpreted.
Invision's blog is also a good example of a good mix of copywriting, images, and call buttons to encourage visitors to read blog posts.
It doesn't look like these designs are revolutionary. But at the same time, you can feel the difference between them and those websites with a lot of information.
It is necessary to gather as much information as possible, and sometimes your customers want you to do that. Either way, what the designer needs to do is display the most important information and create a website with clear information and reasonable processes.
Use white space to build the visual hierarchy of UI elements, and your website will convey a better user experience.