|
White Space
The use of negative space in webpage design
White space and webpage design
White space refers to the blank areas around your text and graphics. It is not the color white. White space, in graphic layout, refers to the neutral areas that surround the objects on a page. Also, it is a way of providing space around your webpage layout elements and promoting controlled eye movement. In other words, it controls the aesthetic composition of a webpage and how it is perceived by your visitors.
As I mentioned in webpage design white space is important in your webpage layout. It provides a way to group text and graphics into segments that the eye can follow around your webpage. It is a technique used by all visual media to influence eye movement and foster the understanding of the information being viewed.
White space example
In the graphic below the main elements of the webpage are arranged in such a way that the eye moves in a counterclockwise direction around the page. Moving from the top to the left to the bottom of the page, following the white space, a visitors gaze is directed in a predetermined path. You may not realize that this occurs, it happens on a subconscious level. Therefore, mastering webpage balance through the use of white space is imperative if you want to communicate effectively with your visitors.
Example of white space and its directional effect
|
White space and screen size
When you decide on the size of your website pages keep in mind that if the whole page does not show on the screen your white space effects will be ruined. You must carefully plan your content and webpage design in such a way as to display the effects and/or message you wish to promote.
In order to produce the effect you are after the entire page must be framed on your visitors screen. Most webmasters focus on the most common screen size (i.e. 640 - 800 pixels wide which is also a good ratio to use for cellphones) however this is changing rapidly on the internet due to the influx of new technology. Check your visitor stats to find out what screen sizes they are using and design your webpages to accommodate them.
Never underestimate the power of white space. By the application of negative space you provide a structure for your webpage content. It is a means of showcasing important areas of the page and producing a classic, elegant and uncluttered appearance.
|
|
