Negative space in web design

　　Objective

Because the screen is limited, web design is also limited. So to speak, in the small box on the screen, each pixel is a piece of real estate.

Even the rookie, also know that a page can not load too much content, but it involves how much should be planning to stay white, including experienced designers may be very confused.

Leave White, another say "negative space", these two words are often used interchangeably. They all refer to a relationship between the elements that appear in the screen. The so-called white is not necessarily white, or black. Even a pattern, color, or texture background can be called white leave. Negative space is to create a blank environment outside the content, so that the viewer will focus more on the content.

In this article, we'll discuss how to use the Super winning tool in the designer's tips: Stay white.

　　Reasons for leaving the white

As has been discussed, negative space begins as an integral part of aesthetics.

In the web design, where to stay white is more important. It can be said that it is not only in the visual aesthetic needs, it has to shoulder a more important role, that is, the visual aesthetic and guide users to achieve a perfect balance. Moreover, if there is a paragraph of text, White still need on this basis to make the text clear, create a readable environment.

In general, the direct effect of white leaves is as follows.

1. Eyeball Scan

In a Web page, the space between two larger content elements (in this called Space), which attracts and guides the way the user's eyeballs scan the page. When used properly, you can guide the user's attention to the elements you want to highlight. This is most effective when branding shows or increases user interaction behavior.

2, Clarity

The space between two smaller content elements (called small spaces), such as a text, or a line of text, lists, icons, and so on, makes these elements easier to identify.

3. Visual Aesthetics

When you see a big picture, leaving White plays a very important role in the visual aesthetics. For example, if the content is messy, it will never be a nice picture.

4. High Grade

Rich white leaves will infuse a delicate and elegant atmosphere into your page.

To better understand and use it, we will comb through different types of white space (large space and small spaces) and use them in different ways (passive and active).

　　Large space and small space

In web design, where to use and how to use negative space will depend on their role. In short, we divide these roles roughly into large elements and small elements.

1, large elements of the left white

The large element of white leaves is involved in two large elements between the white. Mainly used in:

Overall content

independent of different elements

Text breakdown

Margin

Padding

The distance between pictures

Translator Note: Margin and padding here refer to the area of the outer range of the element tags in the web design. Refer to the figure below to help you understand.

This type of white space largely affects the visual flow of the user, whether it's a potential guide or a strong push that directs attention to where you want them to stay. But one of the rules to be emphasized here is that the greater the distance the stronger the power . To break the balance, however, because too much white is violating the Gestalt principle, the result is to weaken the relationship between the objects.

Let's take a look at the website below, as an example of how leaving white can induce user interaction behavior.

Tomasz Wysocki ' s

Most users will first notice the title of the page, which is "Digital art&experiments", while the outside is a large area of white space, which allows the user to focus entirely on this.

Although the top and bottom sides of the page are only white on one side, they can also attract attention. All in all, the white area is a good magnet for attention, and the design seems incredibly concise.

The designer actually uses the white area as a blank screen to give the audience a surprise so we can see the rich details of his work. Once the mouse is moved to any of the bottom navigation columns, a picture of the artwork appears as a full-screen display of the background. This effect creates an exploration and discovery that resembles a young age: inadvertently breaking into a blank space and discovering that every drawer has a colorful visual feast.

You can try the dramatic effect of the mouse-slipping screen.

By using the white area as a tool to induce the user to notice his work, the designer created a new and peculiar experience. After the first work, we want to see what else he has. This feels appealing because you will be tempted to find the most important content. But it's all based on a perfect set of points to ignite your curiosity.

2, small elements of the white leaves

On the other hand, when designers talk about small elements leaving white, they usually refer to smaller elements or the retention of the secondary elements in larger elements. They include:

Font

Spaced

Paragraph

List

Button

Icon

Small elements of the white is used to emphasize the overall clarity of the site, especially in the definition of typesetting. When you try to break the balance with the white text, keep it clear and easy to read while not too far away from the important content. I'm here, just a proposition, it is recommended that the English line spacing be set to 1.5px most perfect. (Translator: The author here does not consider the line spacing of the Chinese font)

As the Gestalt law says, the nearer elements are visually closer to each other, implying that they have the same functionality. A small element of white leaves will let the user know the relationship between the button and the link, and the same white will strengthen the mechanism, which in the user's use process to further enhance the cognitive level.

Although the white is divided into large elements and small elements of two types, each type also has the active and passive use of two.

　　Passive stay white and active white

In fact, the application of white leaves depends on the content.

As mentioned earlier, the more white, the more attractive the content. But you don't want every element of the page to be the most compelling, let alone a limited screen space.

Let's take a look at how passive and active white space helps to achieve a visual balance in negative spaces.

1. Passive space

We treat passive white as the minimization of emptiness.

Without enough white, a website will become unreadable and disoriented, with all the energy being used to combat visual clutter. Passive white space is to use a blank area to try to make the site easy to understand.

Take a look at the above example, the distance between each link in the navigation, and then look at the following lines of text, line spacing, word spacing, and so on. Can you see anything unusual?...... The answer is that you must not find out. That's right! These spaces and distances are so insignificant that they do not attract your attention at all. This is called passive leaving white.

For large elements of white, passive space means enough border and margin space to emphasize the differences between elements, avoid confusion. For example, navigation and registration are all at the top of the page, but they are spaced a certain distance from each other.

For small elements of white space, passive spaces include the maximum readability of characters, text, paragraphs, and the independence of each line of text or each option when a list or Drop-down box menu appears.

The application of passive space should be natural. In fact, the main purpose of passive white keeping is even to be unnoticed . When you try to create a passive space, you want to make it look less noticeable, simply view it as normal for the best.

When all the passive space is placed, then the active part is involved.

2. Active space

Werkstatt

In the above page there are several elements in the page: Menu bar buttons, drop-down arrows, Drop-down prompts, and so on, however, the screen is dominated by the middle of the black text, which allows the other elements are placed around, the designer magnified the middle of the white space, and then put the most important information here, Let the user's attention focus entirely on this.

At the same time, the process of reducing the distance between two lines of elements may be described as a "hidden" way. Just like the legal statements and copyright information you often see on the website. See the example below, "Fibersensing is a HBM Brand" is easy to overlook.

A large element of white is usually used to create a primary focus or to spread a bunch of important information.

However, sometimes small elements of the white can also take the initiative, and some designers use the active space to the important introduction or paragraph to form a piece of text independent and attract attention. This is indeed a good way to emphasize the focus of the content.

　　Minimalism

More white, you can also say that the more your page tends to minimalist style, you cut a lot of elements to avoid clutter.

Minimalist style is a philosophy of design that can be said to be bad but not bad. It removes all the scraps that can give the user visual interference, and lets the user focus on the important content that you show. Without the noise, the rest of the essence of the content is presented in a graceful white.

Minimalist style affects your site in two ways: the number of existing elements, the high taste of the atmosphere.

1, the number of elements

The less elements you have on your page, the more important the elements that are left on the page become.

If the page has only one element, even if it's curled up in the corner, it's still the focus of your users ' attention. If your page has thousands of small elements, your users may randomly look for their points of interest, or give up because of too much choice.

Such a correlation, let us know, in your design to increase the white, the simplest way is to reduce the number of page elements. But we know it's easier said than done. Minimalism can be said to apply to any Web site, and you never want to populate a Web page with what users don't need. However, as a visual aesthetic, the minimalist wind may not be suitable for all sites, especially for content-rich sites, would not like such a bare glance of the screen.

When it comes to minimalism, please remember that we are not just talking about aesthetics, it is not our goal. The level at which the minimalist style is appropriate is to streamline the page elements until they are not available. This requires a lot of testing in the user and then stopping when you have the most reduction.

Voghi

As in the example above, the entire page has only two clickable elements: the menu bar icon and the drop-down arrow. Information has been placed on the right side of the screen by extremely simplified processing. Elements are few and far between, so the user's attention is placed in the middle of the highly contagious picture, while the line of sight will lead to the Drop-down arrow.

The importance of how you balance the elements is entirely up to your own discretion. Some pages just set up a clickable link, which ensures that the user goes where the designer wants them to go. And some of the pages give a number of drop-down options for users to choose from. You can consider removing banners, highlighting content, and simplifying navigation, depending on your brand and product, of course.

　　2. High-grade atmosphere

The minimalist style is now synonymous with high taste, which magically creates a fine, stylish and elegant atmosphere. Fashion-industry websites tend to be minimalist in digital design, but for some retail businesses, it's rare to see a similar design.

High-quality atmosphere is directly related to the white leaves:

Heavy white: You can see some luxury, high-end brands to use.

Moderate stay white: more balanced but still have quality.

Low-grade white: visible in some inexpensive, low quality, messy display effect

Amazon

You can compare Amazon's Web site to the one above, and Amazon's web site is cluttered and has a wide selection of navigation options. Two sites are selling high-end fashion products, but which are typical fashion customers prefer? What kind of a reasonable shopper likes to chase cheap shoppers?

These are applied in large elements and small elements of the white space, but equally important is the use of the site images. Look at the pictures that are used by the fashion websites and you will find that the pictures are more artistic than those used by other ordinary websites.

In short, you still need to start by understanding your customer needs. Study your users, their characteristics, and then consider how much white to show their information, so that the user experience optimization.

　　Summarize

As a visual art, design cannot ignore the most important basic principles of visual arts. It needs to satisfy the aesthetic, but also to create a more long-term practical value, such as more interaction, more human interaction.

For entry-level designers, doing web design is just adding an operational element to a page. But for senior designers, how to do web design is clever to use white to guide the user to interact.