How to Use White Space in Your Web Design
Web pages that have tons of stuff packed into every nook and cranny make the page difficult to read and don’t give the eye a chance to rest. When building a web-page layout, always plan for some open space around your design elements. The open spaces not only create a more inviting atmosphere that doesn’t feel cramped but also allow the eye to identify all areas of the page quickly — making it more legible.
Here are a few design techniques to open up your layout and create more breathing room for the viewer:
Use white space wisely. White space refers to the collective of open clear area around your design elements (not necessarily using the color white). The physiological effect is an open-air, comfortable feeling. A good tip is to leave larger chunks of white space around the most important area of the page, making it stand out like an island. Apple’s website is famous for its extensive use of white space.
Of course, the same principles apply when designing websites on a black or dark-colored background, but the feeling that a dark background conveys is somewhat different. A lot of space around objects on a dark background creates a sense of drama and excitement, as in the following example.Credit: © Abstraktion
Let some elements float. Web page layouts are, by nature, fairly geometric and boxy. Although it’s normally a good idea to align all your elements to a grid, your page can look too rigid if you follow this rule to the letter. To add visual interest, have some fun with one of the more important elements on the page. Allow an important element to break the rules a little by falling outside of the grid. This also helps it stand out from the rest.
Remember that less is more. Of course, the less you have going on in the page, the easier it is to include white space and floating elements that break out of the rigid grid structure. Limit the amount of detail you include about the less important things on the page — save the detail for another page that focuses on that element.