Herself’s Webtools

Webpage layout tips

-Group related objects
-Limit use of fonts and colors, try to keep it under 7 per page
-Use common words, not lingo
-Avoid extraneous pictures and information
-Do not require users to type in remembered information; use menu’s rather than type-in’s where possible
-Be consistent
-A route home, search,and help all should be available on each page
-Use white space, not horizontal lines to break up areas.
-The top left corner is where people focus first, put your important information there.

Here are a few more layout tips to aid you in overall design.

Remember the “Golden Triangle” from math or art class, 1:1.61803398? This is the ratio used in ancient Greek architecture, in art, and where ever possible. It is considered to have a restful effect on people. Tables can be tightly controlled in size (width=100 height=162 OR height=100 width=162) or break up a page horizontally or vertically into sections alternating the two numbers.

Another method I find helpful is to draw several 3×3 squares and try different layouts with pen and paper. I use a 2×2 section for the main content and put the rest of the page content in after that. Try moving things around and see what looks best. Working with pencil and paper first is easier than starting on the computer.

Use ‘white space’ blank areas to partition off areas of your page do not fill up the whole page if you can. Let white space rather than horizontal rules break up your subject matter. Like margins in a book use white space to frame your page. Think the white space through. Do not just randomly apply it, use it to frame and balance out your page.

When people read a page or look at a picture or printed matter they first focus on an area slightly left and above center. This should be your focal point, or a place to put important information. Then they look up to the left top corner over to the right top corner, then bottom left, then bottom right. Use this visual flow when you lay out your page, putting the most important images and information in the areas that are first looked at.

Try to have one dominant element in your page to focus information. Preferably in one of the first areas people view. Also make this the largest area of the page. Then plan the rhythm, to follow the Z that the eyes will follow. If you have pictures of people have them looking at the next area you want people to focus on. If it is a body image have them lean that way.

Fonts, colors, types of images should all lend unity to the page. Use line drawings with other line drawings, photos with other photos. Break the page into either two Golden Ratio sections or three sections, large, medium, and small. Use a different background color with tables to separate the sections visually. All items in the same section should work the same way, and be like items. This reduces clutter and makes the page look cleaner and makes it easier for the user to navigate.

Go easy on the images, both in volume and size. Most users will not wait beyond 8 to 10 seconds for your page to load. Be sure it can load in less time than that. Take the size of your html document, add in the size of the background image and the size of any images for that page and sum them all up.

Approximate Download Times

Eyetrack III - What you most need to know tracks users eyes across webpages.