One problem that comes up quite often in user interfaces is that they often can have too much whitespace. As much as whitespace can make a design look more modern and minimalistic, sites can also look plain and lacking in content because of whitespace. I’ve shared some tips below to work around this problem.
1. Increase whitespace around your current content
Tables and list items can generally have a large padding. Try to give your text more breathing room by increasing the margin and padding around it. Note how the dummies website uses cards to add spacing in between content, which in turn decreases the amount of whitespace in the surrounding areas. Using cards basically doubles the amount of spacing between content, helping you take up more room on the page.
2. Increase the font size
If there is lots of extra space, try increasing the font size. This serves to increase the readability of the text, The font size of the site section heading on the PC Optimum points site is 48px. The whole background is white, but this section has a clean feel to it rather than feeling empty – the user’s focus is directed to the title.
3. Add more content
This is usually the easiest solution and doesn’t require any work if you are a developer. Evaluate your design and determine if there is enough content on the page. If there isn’t, think about what might be relevant to the user, involve your client, or find out the answer via user testing.
Pay attention to if you have a lot of headings without any supporting text. You can usually add a short description to describe what the heading is about and that will fill in the spacing very nicely.
If you are designing blog posts or anything that can be categorized, then adding a category will also help users understand what the content is about. On the CBC Radio site, they use the “ON OUR PLATFORMS” category to tell the user that their content is available across their platforms.
Happy designing! 🎨