We explain the importance of white spaces in an interface as well as its different usability. Although it may not seem like it, white spaces are one more component of the web page design.
White spaces are very important in the design of any graphic composition, especially in a web interface, white spaces being understood as all those areas of the interface in which there is no other graphic element.
White spaces fulfill different missions in an interface: they compensate the visual weight of the rest of the elements, they create margins or separations between them, framing them appropriately, and they mark the limits that structure the composition, making the interface more balanced, clean and beautiful. .
The blank spaces constitute by themselves one more element in the composition, therefore the concept of designing is wrong, leaving the areas in which we have not placed any other graphic element as blank spaces. The correct way is to design considering white spaces from the beginning as one more graphic element, conceiving their presence and location from the beginning.
Focusing on a web interface and its elements, the blank spaces will first establish the base grid of the composition, which delimits the areas in which we are going to place the rest of the elements and the margins and separations that will exist. between them.
If there is a side navigation menu, it is convenient to always leave a white or free space between it and the body of the page. At least the same space must be left between the lintel and the body of the page. If there is no lintel, the separation will be between the body and the upper edge of the useful browser window.
If we have designed a page with two side menus, one on each side, the separation between these and the body of the page will be the same in both cases, as well as the separation between the two menus and the borders of the window.
Likewise, there must be a blank margin space between the lintel or the top menu and the body of the page, as well as between it and the footer, which must tend to be of the same height, seeking symmetry in the composition.
Regardless of the content of the body of the page (text, form, file, etc.), if it is distributed in blocks, the white space (margin) between each of the blocks must be the same, thus achieving a balanced distribution , in which the weight of the blocks is offset and equalized.
Within the same block, the margins (after all, internal white spaces, which can have the background color of the block) between each of the elements or groupings of the same type that form it must be equal and symmetrical, because they create the necessary compositional cleanliness to correctly visualize the block and its constituent elements.
Facebook Comments
Disqus