Al Gomez
Anyone who has tried interior decorating will attest to how challenging it is to utilize space. The feeling is mutual in web design. White space in particular, is one aspect that’s either OVERUSED or UNDERUTILIZED. One of the reasons why newbie and pro web designers make white space mistakes is because they don’t acknowledge its importance.
Just like your choice of font style and color scheme, how you use white space will have a significant impact not only on aesthetics, but also on user experience. Understanding how this element works will benefit your website in a myriad of ways – especially your mobile site.
What White Space Is For
Study how one popular site makes smart use of white space. The best example would be search engine giant Google. It wasn’t always this way (for proof, see their 1998 look courtesy of the Wayback Machine). But thanks to numerous experiments, they finally found a design that reflects their goal and their mission as a company. The white space around the entire page is supposed to draw the user’s focus into the search field. This eliminates guess work and makes it easy for anyone of any age to instantly use their services.
The same can be done for important text or links. Say you want people to subscribe to your newsletter. You can create white space around your Call to Action to grab attention to that element, making it more prominent for your onsite visitors. This is particularly important for mobile. If your page is too cluttered, users may miss vital links or CTA buttons. White space also keeps them apart from each other – making it easy to tap and click.
Another significant role of white space is to give direction or hierarchy to onsite elements. Combining this with color and size, you can direct users’ eyes to things you want them to notice. The right balance of white space will give your website a seamless and consistent feel. If people feel comfortable while visiting your page, they are likely to stay. According to one study by the Nielsen Norman Group, users are likely to stay if a certain website was able to impress them within 10 seconds.
That’s not a lot of time. So make sure that each second counts.
Make White Space Mobile-Friendly
Since Google’s mobile-friendly update, there’s been a lot of hype about making your website mobile. But not a lot of it talks about white space. Although desktop and mobile sites look different, the importance of white space remains the same. In general, there are three onsite factors that you should consider when implementing smart white space techniques:
- Text
- Images
- Links/CTA
Ample spacing on texts gives them more emphasis. This is vital for header titles, sub-headings, and content copy. Make sure your chosen font size and style is readable! Don’t forget: mobile interface makes this feature look different. If not optimized, text can appear skewed or cut. This would ruin the overall user experience and can prompt users to leave.
For images, you can choose to let it take the entire window space OR have padding around it. If you opt for the former, that is called visual white space. Good examples would be photos used as background images. White space used to add padding between pictures on the other hand, is called compositional white space. This is necessary to tie the entire work together into one seamless visual delight.
As mentioned earlier, links or CTAs need sufficient white space for easy clickability. Don’t make it difficult for your users to navigate or utilize your website. The smoother the experience, the higher the chances that they’ll convert into paying customers (or at the very least, visit your site again).
Word of warning: although white space plays an important role in web design, it’s not a miracle cure. You need other online strategies, such as SEO and content marketing, in order to push your website to success. But by properly implementing white space, you unlock beautiful opportunities for your site.
(240)
