27 Apr How to efficiently use empty space in the web site design?
Web Design, in the conventional sense of the word, is a series of graphic images, projected in the information plane. But the visual component does not always play a major role in the development of the site interface.
Equally important, an empty (white) space, which is also significant, as well as functional elements. In this article we analyze following questions: for what need to empty space, where to use the empty space and methods use empty space in the design.
Empty space has always worked as an accent, which helped to focus on the desired subject. And even with an increase in visual expression situation has not changed too. Banal, but a prime example – Google. Empty space, in contrast to that impressive inscription as a call to action, it is impossible to forget.
Why do you need empty space:
-Works as a “call to action”;
-Helps to understand the basic objectives of the site;
-“Hides” less important for the perception of information;
-Keeps focus on the key stages of work with site content;
-Enhances user interaction with the resource.
How to rationally use empty space in the interface:
- Empty Space as an accent core functions of the site.
Every web resource is directed to perform specific functions and purposes. The presence empty space immediately points to their essence. Bigcommerce is not trying to build a so-called “information wall”, and immediately helps visitors make the necessary steps and find out what the job site.
- Empty Space as a call to the user interaction
In the design environment, it is assumed that the behavior of people at work from the site interface – that’s a plus. They did not develop it, do not know how to operate, and the elderly and all experience fear, mastering digital environment.
That is why the empty space “takes the brunt,” directs users to the website and helps to accurately click on the items you want. That is the whole point is that almost a blank page automatically tells visitors to the desired action. Google has already been mentioned by us, as well as Crazy Egg site more than successfully using this method.
- Empty Space as a means of visual expression
Empty space is usually presented as white, but it is nothing more than a myth. It is more important to prevent oversaturation of the schedule, but the white space is not such a big deal. Variations on a theme of colors can be very diverse. How, for example, Marshall site.
Zapier used 2 reception: fuzzy background and distorted graphics.
Grammarly acted in the opposite way: the background emerges a clear picture that looks harmonious with the main inscription.
Methods use of empty space:
- Separated space on the content groups;
Lever website – a vivid example of how to successfully merge into one empty space and content group. Links arranged in vertical columns and are equidistant from each other.
It is worth paying attention to each column of the site. The first thing that catches the eye, the same spatial gap between the links and the white color, which contrasts successfully with a black background.
Empty space in this case, has a harmonious balance with the links. This interface does not look overloaded and does not need additional expressive elements, fully conforming to the principles of minimalism.
The site is quite malleable in terms of visualization: it is necessary to change the size of all the columns take the vertical position. In addition, manifested adaptability Lever in the presence of vertical blank periods. As a consequence, method separation of the space on the group helps user to quickly understand the functionality of the resource and understand, where one information block ends and another begins.
- Balance between empty space and contrast;
Similar to the previous method, the result can be seen on Geckoboard resource. It presents just 3 groups of links, but not titles, but only the most clickable areas chosen as a contrast.
White space at the bottom corresponds to two requirements: the composition and location of text. The gap is not small, but each of the links harmoniously divided vertically and horizontally. This condition creates this kind of effect: each partition appears as a separate text. Contrasting white text identifies key gaps are helping to establish a connection between the remaining links in the columns.
It is important to remember that the involvement of empty space in the interface – one of the classic methods, and it is suitable not only for identifying the required intervals. As titles and text / graphics must have gaps and contrast to the content did not seem “stuck together” and not suitable for perception.
- Availability empty space in the navigation menu
Modern websites can not be imagined without a well thought-out navigational structure, even if they are single page.
Empty space just in the navigation menu can be used in several combinations. Most often you need to take into account the placement of content and the number of links. Examples of these resources - are pages with a minimum of references. A small amount of content-content increases the chances to diversify the navigation of the site.
If the architectural structure of the site interface is more difficult, then consider it necessary to design more carefully. It is worth paying attention to the Microsoft website, where you have all of the reference product. Naturally, the interface design should present products from smartphones to Xbox. Developers submitted to navigate as the links in the group opens when you click the menu. In each of these groups is the subgroup with reference to the company’s regular products.
Visitors can simply click on any of the links to get the desired data. Regarding the gap, in this case, they improve the interaction with the content, so it is important to do sorting out the links and prevent a long list and one that is too cumbersome for most sites.
At the end of the page there are several rows of the additional menu. They are also presented in the form of links, but have a kind of plain text, thereby helping the user to quickly orientate themselves.
Examples of the use empty (white) space