How to Balance White Space in Responsive Design?
Saurabh Tiwary | 6th June 2017
One of the most intuitive things to do in the web or mobile app UI is to play well with the white space. A number of designers keep on adjusting the page elements unless they look appealing or at least satisfying. Usually, this involves creating a balance between white spaces among different section of the site.
There are so many techniques to achieve this and here, I’d walk you through some of the best ones. As a well-known fact, responsive design is incorporated in almost every business site for adapting into a number of screen types. So, to impart a better usability, we shall take into account the balance in white space.
Rearranging the Navigation
The first thing that every designer need to look for is the ways to handle the navigation menu. If a site contains too many links, the options are less. Either you could use an option to select an input field or a hidden menu using three-bar hamburger icon. Most of the sites thoroughly work on the navigations before finally settling on the listing icon.
Horizontal to Vertical Shifting
White space moves across and down the page in a layout. However, while dealing with smaller devices, you need to work on the vertical space. This will help you in defining the pace of content and it’s usual “flow” for mobile phones and tablets providing resolutions that are longer than wider.
Negative space is a powerful component in the web design. The best way to manage space is to break up sections and provide ample amount of breathing space to the text as nobody would love to read a wall of text.
Font Size and Spacing
While some of the design forms can work well with the usual font sizes, but if you have enhanced the header size or small paragraph texts then, you also need to make a proper balance among sizes at different breakpoints.
A lot can be done using responsive typography going next level of the usual approaches. Some of the adjustments you can do is
Line Height
Letter Spacing
Color Balancing
Margins Between the blocks of text.
Restyling of Images
Widescreen images are great assets while dealing with the white space. In modern design applications. The majority of the monitors that we come across today are widescreen. From the desktop to the flat TVs, they posses widescreen aspect ratios. The Web and even mobile UI has gradually started to use wide images in the design applications.
