Free space in web design. What is it and why use it?
In the current, extremely intensive century, we are surrounded by an incredible flow of information, in terms of which it is very important for designers to decide on the patterns used in their projects. We are simply obliged to make sure that the pages we create attract the attention of visitors, regardless of whether they are shopping on a commercial website, reading an article on a blog, or just browsing the news. The design must be legible, easily perceived and to attract users. We need to understand that the choice in favor of a simple design solution instead of a more complex alternative is the key to attracting and motivating readers. The variety of elements, images, various color contrasts and forms on the page can create the illusion of informativeness of your site, but just as well cause a feeling of discomfort among users, as a result of which they leave it. A great way to awaken pleasant emotions from users from interacting with web space is a closer acquaintance with such a concept as free space and how to use it properly in order to create a thin, simple and elegant design. Empty, untouched areas are actually very important in the field of web design, because with their help you can improve the readability and performance of the resource. Not to mention the fact that this technique is an integral part of such dogmas as “better is less, but better” and “strive for simplicity”, which have proven their effectiveness in the Web segment of design.There are some simplest definitions of the concept of free space, but the most accurate and comprehensive from my point of view is given by Mark Bolton in the article Whitespace: “free space is just emptiness”. (* A decent translation of the above article can be read here.) What is free space? Sometimes free space means a contrasting space, that is, a certain unpartitioned part of a page, or in other words its part unused by the elements or, as Mark Bolton would say, “empty” page space. In terms of web design, these are the intervals between graphic elements, columns, images, text snippets — margins and similar elements. That is, these are unaffected places or voids, the direct purpose of which is to make the design more subtle, smoothing out its rough forms and turn the page into something elegant. In addition, the free space reminds us that the simplified design options look great, and for a clear and direct presentation of the necessary information to the user, it is not necessary to use templates overflowing with textual and graphical information. Despite the fact that the term “white space” is used to designate free space in the English segment of web development, which literally means “white space”, this does not mean that the implied space must be white. Empty, untouched areas of the page can be filled with any color, because they lack text, graphic and any other elements. Free space is also associated with elegance and sophistication, as it is a tool for organizing and organizing text and other elements, which allows you to control the visitor’s attention, focusing it on certain elements of the site.
The most successful example of the use of free space is well known to all of us Google. On the main page of this search engine, empty, unpartitioned space is used to the maximum extent, which allows us to focus on the most important thing that this search service provides us with. If you want to increase the presence of free space on your resource in order to achieve the best results, start by carefully analyzing every detail of your page. Again, pay attention to the fields used on the page, its header and footer, menu and navigation elements, images and titles, lists and their elements and, finally, words and letters. When working with all these components of the page, leave as much space as possible between them, while constantly thinking that as a result you should get something elegant and spacious, greatly improving the user’s perception of the information presented on the page. Improved perception means that, thanks to the increased spacing between the components of the page, you allow the user to view it without much stress, relaxing. Believe that by using the eleven-pixel font to represent the text and using all possible areas of the page to place it, you will in no way meet the expectations of your readers.
How to use free space. Below is an example from the article by Mark Bolton mentioned above, showing how much the perception of the information provided changes when using voids in the design of advertising messages for direct mail. The result is a sleek and elegant high quality ad unit. Another good example of the use of free space is implemented on the website Made by Sofa. Due to the simplicity and clarity of the design of this site allows you to control the attention of its visitors. The template used here allows us to visually see that by creatively positioning elements using unmarked, free areas between them, you can achieve an excellent result.