techLEARNING.com | Technology & Learning - The Resource for Education Technology Leaders

Building Web pages has forced us to gain a range of new skills, not the least of which is information design. Regardless of bandwidth, server speed, or Web editing technology, the most challenging part of communicating over the miles of wires that constitute the Internet is spanning the last 18 inches-the distance between the computer screen and the reader's understanding.

There are lots of tips for designing effective Web pages, and many will be shared here. But the most important guiding principle for all decisions regarding your Web strategy are your goals. If a design decision helps you accomplish your goal, then it is good Web design. Even if you are using flashing red text on a black background, if it helps you do your job, then it is effective design.

Use Images Deliberately. When considering whether or not to post those pictures of your school or classroom on your Web page, remember that images can effectively communicate ideas, feelings, beliefs, and facts very quickly. So the old adage applies: online, pictures really are worth a thousand words. On the other hand, downloading an image-rich page can be time consuming. Decide if it's worth the wait.

White Space. One of the most common mistakes made by educators and even professional Web designers is to completely fill a Web page with text and other items. This can be overwhelming to the Web surfer, who will often choose to go someplace else instead. We need to avoid thinking of white space as a lack of content and think of it more as a design element. Surrounding an image or piece of text with white space will draw attention to it.

Byte-Size Text. Parents and others may also be discouraged from participating in a school project with their students if they are confronted with a classroom Web page chock full of text. It will be more inviting and easier to read-or perhaps more importantly appear to be easier to read-if information is dished out in short paragraphs with lots of white space between them. Indenting paragraphs, creating white space to the left of them, and decreasing the length of the lines will also make the page more "friendly" to visitors.

Design for Scanning. People do not come to the Internet for a leisurely read. They come to solve a problem, to answer a question, to learn. Most frequently they scan Web pages, so design your page for easy scanning. Identify important terms or phrases in the text through bolding that text, coloring it red, or presenting it in a larger font.

It is also important not to center text. Centered text is more difficult to scan. All headings and subheadings should be flush to the left of the page or text section. Content between the headings should be indented with white space, which will make the headings easier to scan. For additional tips, see "Design Scannable Pages."

Menu Items. In 1956, an article in Psychological Review reported that people can only handle seven items of information at a time, plus or minus two. This rule serves Web designers well. If you want people to be able to remember menu items as they scan them, do not present too many.

At the same time, recent research has pointed to the even more important issue of breadth versus depth. The fewer the menu items, the deeper the Web site goes-the more people will have to click. People seem to prefer and more effectively use sites that offer a broader array of menu items with only two or three levels of depth.

These two seemingly conflicting points of view can be reconciled by having more than one menu on your page. Identify those options that are most important both in terms of your goals and the needs of your information customers, and use those items in the main menu. Then set up smaller, less conspicuous menus in other parts of the page.

Take It from the Top. People usually need a reason to scroll down a Web page, and the first six inches of a page are your opportunity to convince the visitor that there is value in scrolling. In other words, the top of your page is perhaps the most important part for delivering a clear image of what your page or site is about and the content and services that are available there. This tip does not advocate having very short pages. Again, think of your goal and the way that your audience will use the page when determining the length of your pages.

Designing for Clarity and Impact

This re-design sequence illustrates how Web elements can be edited and diplayed for a more visitor-friendly page.


In the initial layout, the designer of this page has entered and edited the content of the page and inserted pictures in their original size.	The designer has decided that all the pictures are essential to the objectives of the site. The images, however, are cropped down to include only the important items and decreased in size to save load time. The pictures are also set for text to wrap around them.


In this next redesign, the author is using white space to draw attention to content. The text has been shortened and the headings and subheadings left as hanging indents for easy scanning. In addition, the menu has been converted from a table layout to a vertical list, also to facilitate scanning.	Rather than having a single long menu, the designer has selected the four most important options and placed them at the top left of the page as menu items. The remaining items have been moved to the right and formatted with smaller, less-accented text. Also, the designer is using the white space to the left of the page for posting temporary messages.

Plan It. Design It. Build It. Put Your Web Site To Work (cont'd)

Getting Your Message Across

Designing for Clarity and Impact