Organizing the Elements of Your Web Page

by Janette B. Bradley
axsWave Software, Inc.™

Organizing Your Elements

There aren't many hard and fast rules for designing your document.

In fact, understanding the fundamentals of page design gives you the basis from which to break the rules. The important thing to remember is that tools and techniques that are effective in one situation might not necessarily apply to another-what works great for one page layout may be inappropriate for the next. For example, it's not appropriate to use a striking layout with "in-your-face" graphics for a web site promoting life insurance, but it may be very appropriate to use that style for a web site promoting 3-D games.

These general concepts will help you make better design choices:

Target your elements and content. Position your content and design elements to reflect the importance of key points. Guide your users through each page using layout and graphics to provide direction. Reassure your users with consistent formats and graphics, which help users keep track of where they are and how to navigate. Enliven your site with contrast and color between graphics and text. Always keeping in mind that any "embellishment" should also help readers follow and absorb your content. Focus on your purpose. Cool graphics or large dense blocks of text may interfere with the communication of your message. Every single item on your page should have a strong reason for being there. Test your links and tags and check your spelling. Nothing ruins a good impression faster than a lack of attention to detail.

Target Your Elements & Content

A successful site is the result of design choices that are targeted to your site's purpose and audience.

Choose design elements that help your users understand your message. A site of serious subject matter, such as one for a cancer support group, requires different design choices than a site for a school. When choosing a layout or specific graphic elements, such as logos or photographs, pick those that supplement your message instead of those that merely decorate the page. (For Example)

Position Your Elements & Content

The location and size of type and graphics provide visual clues to the user about your message.

Determine the positions and size of your type and graphics by their importance and their relationship to the site's purpose and audience. When you ignore this rule, you create an imbalance which distracts the reader and interferes with your message. In this example, the graphic's position and size interfere with the message.

Guide Your Users

Western cultures read from top-left to lower right.	By using tables you can create Web pages more than one column wide, creating a reading rhythm pattern that takes on a wave like motion-the eye moves down from the upper left, and then back up again.
Web pages with columns require different techniques.	On paper, Western readers are comfortable with a column format and find it easy to read, but it doesn't necessarily work for the Web. Instead of long "newspaper-like" columns, divide text and graphics into "chunks". This tip sheet uses tables to create a column organization, with each concept "chunked" so that scrolling up and down a page is minimized.
Graphic elements can help divide a page and guide a users attention.	In this example the Thinker graphic acts to guide the organization of the page in two ways: It divides the navigation area from the text or informational area of the screen. By orienting the Thinker pose to look off to the right, users also focus on that area of the screen.
Use dramatic organization carefully.	Dramatic organization can add a lot to your design and make your site stand out. However, it is important to test your idea with a sample of readers. This example did not pass the test. Several users were confused by the layout and were unsure about what they should do.

Reassure Your Users

Repeating graphics and consistent organization helps users stay oriented.	The very nature of the web means that users can quickly become disoriented by following a chain of links through various pages. Consistent graphic elements such as borders, rules, column size and backgrounds help give a multi-page site a uniform look and feel.
Consistent navigation is the most important thing you can provide your users.	Keep the placement and style of your navigational elements consistent. It's almost always a good idea to include navigational options at the bottom of a long document. No one likes to read through a document and have to scroll all the way to the top to move on.

Enliven Your Site

Lively use of graphics and format can capture and hold a user's interest.

One way to enliven a site is to use contrast. Contrast is the positioning of dissimilar visual elements on a page. However, if you plan to go beyond a simple effect, consult a designer. The correct use of graphics and format is both a talent and a skill that requires training. If you aren't able to use a designer, test your graphics and layout with a representative sample of your audience. Find out if the graphics and layout contribute to the communication of your message.

Clear and interesting writing is the most important aspect of an effective site.

If you have only enough resources to hire either a writer or graphics designer, choose the writer. While "cool" graphics are important, effective and interesting writing is the most important communication tool you have. Users will forgive a "plain" site if the information is useful, clear and easy to find. Cool graphics might create an initial WOW effect, but to keep users interested the writing is more important.

Focus on Your Message

Remember: Usable & Effective is more important than Cool.

Clarity, organization, and simplicity are critical to your web page design. Don't get so carried away with graphics and animation that you lose the focus of your message.

Test & Check Your Site

Find someone to test your site.	Ask someone to use your site and make comments while they work through it. Take note of any problems they have with navigation. When they are finished, interview them on the site's content. Did they "get it"? If not, you'll need to make adjustments and test again.
Is it loose or lose.	Check for spelling errors that your computer's spell check program might miss. Remember, your document is going out to the world, proofread carefully.

Feel free to contact me with questions or to talk about how the axsWave Software team can help you with your Web site:

Janette B. Bradley (janette@metronet.com)