Coming from a print background has helped my web design greatly. Some of these helpful hints come directly from print design, while others were simply learned through experience. They are not in order of importance.

 1. Use typography to grab attention instead of a graphic. - You’ve heard to saying, “less is more.” It is most effective in web design because you have a very small window of time to get the reader’s attention. A big heading using only text will be more effective than a large graphic. Think about newspapers. In the same way a reader scans the newspaper they will scan a website looking for a heading to tell them what to read or what to do.

2. The grid is by far the best framework. - After you’ve gathered information about the site, start sketching a grid. Figure out how many columns are appropriate. Try to stay under 16 columns. Any higher and might find it hard to stay consistent. At the same time, a one or two column grid will probably be too restrictive. Do not simply guess the width of an element. Readers will positively respond to a mathematical layout.

 3. Don’t be afraid of white space. - This might be the most difficult concept to sell to a client. Break away from the old conventions of web design where you need a left and right border. While borders are purely preference, white space should not be. White space does not just mean the color white. It simply means to leave a little extra “air” in between your elements. Too tight and your elements will visually appear as one confusing mess.

4. The fold is very important. - Keep in mind most screens are still around 1280×760, so the fold will most likely under 760px. Try to keep your most important elements, like call to actions, above the fold.

5.Follow common typography rules.

- Hang your first quotation mark outside the body of text.

- Line height for body text should be at least 4px above the font size. For example: 12px Helvetica should have at least a 16px line height. Lines of text that are too close will be harder to read.

- Your main body of text should be around 10-16 words per line. Too long and the reader will struggle to find the next line down.

- Use no more than 2 font-families. I generally try to use just one. There are times, however, where you might want to use a different font for headings.

- Keep it simple. If you want a heading to stand out from the body, use no more than two differences. A good example: bigger type size and bold. A bad example: bigger type size, bold and italic. Sometimes just making the type size bigger is the perfect solution.

6. Reset your CSS browser defaults. - When it comes time to code your design remember to reset browser defaults in your css document. Different browsers like to add their own padding and margins to elements on the page. This will save time and major frustration.

Tags: CSS browser, Graphic Design, internet marketing, typography, web design, web development

This entry was posted on Thursday, January 7th, 2010 at 1:43 pm and is filed under Website Marketing Strategy. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.