Designing they layout.

White Space

White space is about the most important design tool that you have at your disposal. White space isn't necessarily white of course, if you have a blue background, then it would be blue. It simply means unused portions of the screen. The more white space around something, then the more compelling it is to the eye. Think of a business card, it just has a very small address to the side and then a slightly flush left name in the middle, and it's far more noticeable that way. Also, very small ads in magazines often have little text in them to make the most of what space is available. Imagine the classified page of a magazine crammed full of small tightly packed text advertisements, set in small type all close together. If there was one with just a couple of words in the middle and the rest was surrounded by space, then your eyes would be drawn to that space in the sea of dark text.

      When planning your page, it's a good idea to divide the screen into zones. If you write your own HTML you'll already know that tables are used to line up the various elements of the page, so this planning will help you write the tags for the table. If you write the tags first, then you can save them in a separate file and use it as a template so that each page looks consistent. Each time you have a new page to add, just paste the information in the predefined tags. As an aside (so it should really be in a sidebar!) if you write the HTML tags of any table before you start putting in the information, then there's less chance that you'll forget to include any closing tags. Of course not all the cells of the table will have information in; some will be left blank for white space.

     To understand the concept of zones, think of your favourite magazine and consider its zones. Every issue looks different but there's a consistency because the title, leading visuals and blurb, go in the same zone each week/month, so you can visualise the way it's invisible table looks, which lends it its consistency. You already have memorised its zones without knowing, that's why you can recognise it at a distance without reading the title.

     Consider the way white space can be used in print, ads, brochures, magazines etc. and on the web.

White space in print.

• Margins - The white space around them decides how friendly a publication looks.
• Leading - the space in between each line. This can be changed together with letter spacing i.e. the space between each letter, which can be adjusted in most word processors. Controlling these two aspects affects the texture of your output. When lines and letters are closer together, then text appears darker overall. Also affecting this 'overall darkness' (texture) is the space between paragraphs. Most word processors allow too much space between paragraphs as a default, and text appears to have 'holes' in it. This can be adjusted in the paragraph dialogue box. The goal of adjusting the above three aspects of space is that when you look at the page from a few feet away, the texture of the body text is as uniform as possible, and not too dark.
• Gutters - The space between each column.
• Visuals - The space that surrounds text and visuals.
• Subheads - always put more space above them than below them to link them more closely to the text that they are introducing.

White space on a web page.

• Margins.
• Surrounding text and visuals.
• Paragraphs.
• Subheads.
• Visuals.

A good tip is to have a large margin, possible of a different colour, and then out the subheads in that margin, level with the 1st line of body text they introduce. This surrounds them above and below with white space and they become much more striking.