White space when it comes to web design is a great tool to use. It can be used to draw the eye to specific areas of your site, especially for conversion. It does not have to be specifically “white” to be white space. It can be color. However, it can also harm your site if you are using too much or too little.
Remember, a lot of people are wanting to know what your site is about when they first visit the site. They DO read it much like a book or newspaper.
Here are 3 examples of too much white space in web design. I will also explain why it is too much and what could be done better with that space. Please do note that I have marked out the site name and any author’s to allow some anonymity. I have marked some of the spaces that have too much space.
3 Examples of Too Much Whitespace in Web Design
Note: You will need to click the thumbnails for each case. They will open in a new window for you to view the whole site.
The top of the site is spaced out and needs an image to the right of the introductory paragraph that fills the space better and is more eye catching.
The majority of the whitespacing issues are within the content areas and the footer. While the asymmetry of the content area and the navigation areas are great, there is too much space between the ending of the content’s text and the bottom content where the design slants. The sidebar area also has a lot of spacing.
This same issue occurs throughout the website.
The first is too much space between the heading title in the cute ribbon and also the same under that ribbon, right before the huge image. I would recommend a bigger ribbon and title text or cut down on the spacing.
However, the biggest problem with the spacing in this theme is between the posts! It is WAY too much! In fact a screenshot of this makes the default 8 posts in the demo of this theme span over 5500 pixels in length! The spacing needs to totally be tightened up.
Truthfully, my suggestion for this, especially for a front page is to either allow the big image and widgetize a couple spots underneath for posts. This would cut down on load time, and scrolling. This is just a bit too much content for even a simplistic theme.
This example is not that bad, but could use some tightening up on specific areas. For starters, the call to action image is big, uninteresting, and of low quality. It could use a change to something more attractive to fill that area.
The spacing between content and posts are a bit too much. Eliminating half of the space between each would be recommended. The footer widgets just need some tweaking. I either recommend keeping them at similar lengths to keep it balanced. It might mean adjusting the one widget for commentators on the bottom right or adding a little more to the other widgets.
Solutions to Correcting White Space
Some of the solutions to correcting white space may be:
- Adjusting the style element (CSS) in height or width
- Adjusting the image to be smaller or larger
- Adding texture, color, or removing texture or color to specific areas
- Adjusting font size to be smaller or larger
Never feel that you are stuck with your website’s design. It can always be adjusted and tweaked until you have an agreeable balance of white space and design.
Have you heard of white space? If you have, how have you applied it to your website?