Web Design For Dummies

Basic Web Design Tips

In designing Web pages, you need to think visually. A Web site designed with a good balance of graphics and text is pleasing to the eye, attracts viewer attention, and holds it. Good Web design relies on the artist — in this case, you — following certain design principles:

• Design the Web page interface to fit within the first 800 x 600 pixels so that the important content is visible when the page first loads.

• Achieve a balanced layout by designing no more than three focal points: Use the "big, medium, small" strategy.

• Avoid using fonts smaller than 10 point (depending on the font).

• Use standard computer system fonts for all HTML text.

The following figure puts these principles to practice:

Web Design Tips for Graphics

Graphics are a huge part of Web design. Knowing and using the standards and formats for different types of Web graphics can mean the difference between a Web page that catches attention and one that browsers glance past. Use these tips to make sure your visual elements are visually arresting:

• Build all Web graphics in 72 dpi, the standard display resolution of the Web.

• Save graphics that have a mix of text, flat-colored graphics, and photos, such as the one shown here, as adaptive palette GIF files.

• Save all purely photographic images as JPEG files.

• Always display anti-aliased graphics on the correct background color; otherwise, you see an unsightly halo around them.

  

Web Design Tips for Presenting Information

As you design Web pages, think graphically even when all you're presenting is pure information. Good Web page design means you present information by organizing it logically and making it visually attractive. Use the following tips to keep browser eyes on your information pages:

• Prioritize and group navigation into a primary, secondary, and tertiary set, each containing no more than five to seven items.

• Build your site outline with no more than three levels: Main idea, topic, and subtopic.

• Choose a standard set of symbols for the site map. Use boxes to represent pages, cylinders to represent databases, and then connect everything together with lines and arrows.

• Build wireframes for each unique page layout in your site. Wireframes are a diagram view of your page layout and interaction, like the one shown here:

  

Web Design Tips for Navigation Tools

In Web design, consider the visuals when you include the navigation tools that take visitors from page to page. When designing Web page navigation tools, you need to make them attractive as well as functional. These tips can help you do that:

• Differentiate the visual design of non-clickable and clickable elements: Don’t use the same graphic as a button on one page and a headline on another.

• Use visual feedback — a color change is a good visual, as in the following image — to enhance interaction and usability.

• Always place navigation in the same location on the page and don’t change its appearance.

• Always label icons. Illustrations by themselves are not always clear as to their function.