CUCS Web Training, Principles of Design: Top Ten Rules

Principles of Design
Top Ten Rules



Rule 1		Use Images Sparingly While it's okay to put a few images on a page to make it visually appealing, it's not a good idea to stick on every button, icon, sidebar, titlebar, divider, bullet, logo and photo you can find. (People actually do this.) Unless you are a graphic designer, people are coming to your site for information, not pretty pictures. Web surfers don't have a lot of patience, and if they have to wait for a bunch of irrelevant images to download, those who don't move on to another site right away will be plenty peeved by the time they finally see your page. Even more importantly, resist the urge to add spinning bullets, flashing lights, flying mailboxes, and other moving stuff on your page. While these "Animated GIFs" draw attention, using more than one will make your page look too busy--and draw attention away from whatever you're trying to communicate. Why focus your visitor's attention on flying mailboxes rather than your message?
		Finally, never use "under construction" images. That is, unless you're making a statement about how bad they are. The web is a dynamic thing--good pages change frequently, so they are always "under construction". Announcing that fact is the mark of an amateur. If you don't have anything on your site, or it's not ready, wait until it is ready before you make it available to the world.



Rule 2		Don't Steal Graphics There are still many, many sites out there that give away free graphics for use on a web page. Some designers ask that you put a link back to their page if you use their graphics, while others make their art available with no strings attached. If you want personalized graphics, learn to use an image-editing program (or find someone who can make them for you). Go to Yahoo! under Arts: Design Arts: Graphic Design: Web Page Design and Layout: Graphics to find a huge index of pages that offer free web graphics. One of my favorite sources for page design graphics is Jelene's Free Web Graphics. Instead of putting up a bunch of unrelated buttons and icons, Jelene has coordinated sets of backgrounds, buttons, bullets, and other art that you can use throughout your site to create a theme. Using related elements throughout your site gives it a much more professional, pulled-together look than what results after sticking in a bunch of mismatched graphics, no matter how attractive they are individually. Another source of amazing digital images is NASA's Multimedia Gallery. They're not copyrighted, so you can use them however you wish. Hey, we taxpayers paid for them, didn't we? The caveat here is that you cannot use the actual NASA logo and insignia unless you are an employee of NASA. See their Guidelines for more information on proper use of NASA images.



Rule 3		Put ALT & Size Tags on All Images If a browser can't show images (or the user has turned image loading off), the text in the ALT tags appears (the Alternative Representations: Text field in FrontPage). Using ALT tags is particularly important to keep your site accessible to visually impaired users, and to people who are still using older or text-based browsers which simply can't render graphics. For simple graphics (like bullets or things which you don't really want to name), just put a single space in the ALT tag so it won't appear at all. By default, FrontPage puts the image name and file size in the ALT tag, which is fine for pages with one or two graphics, but hideous in a text browser on a page with many images. You should also include the width and height of all image in their tags. Browsers load the HTML text first, then load the images referenced in it. If the HTML text doesn't include the image sizes, the browser has to wait until it's loaded all of the images to know how to lay out the page. If you include image sizes in the tags, the browser can go ahead and display the text while it is collecting the images, allowing the visitor to the page to start reading instead of staring at a blank page. Many HTML editors, including FrontPage, will automatically put in the image size information for you.



Rule 4		Leave a Trail of Breadcrumbs Many visitors will arrive at your site, not through the first page, but through some lower-level page that happened to turn up when they did a web search on Cheezy Puffs (or some other text contained in that particular page). Give these users a path back to the top of your site, either by placing a Home button on every single page, or by linking to another major subpage. Basically, people should be able to get to the "starting gate" of your web site (usually called the home page) in under three clicks. Sometimes, especially with frames, it isn't practical to put Home links on every page. If you are in that situation, make sure there is a default page in every directory that links to the top. This enables someone who links to "http://nowhere.com/cheezy/puffs.htm" to backspace over the "puffs.htm" and get a higher-level page with the URL "http://nowhere.com/cheezy/". In this case, you'll want to make absolutely sure that your default pages in all your directories link to your home page. I've been at many pages where I thought, "Wow, this is great information...I wonder if there's more," and then not been able to find an entry into the site.



Rule 5		Use a Validator There are many HTML validators available on the web for free. These validators can check your pages for proper HTML, ALT tags on images, compatibility with older browsers, download time, dead links, and other important characteristics. They're a useful resource, especially as you're just getting started with web page design. One validator to try is the Web Site Garage. You can find others on Yahoo! under Computers and Internet: Information and Documentation: Data Formats: HTML: Validation and Checkers. While HTML validators can be a useful resource, remember that they provide merely an analysis of your HTML and file sizes, not of how well-organized or visually appealing your site is. Take an "Excellent" rating with a grain of salt.



Rule 6		Avoid Using Frames if Possible While frames can be a useful tool for organizing very large sites with a complex hierarchy of pages, in most cases they are unnecessary and inconvenient. Frames are often unnecessary because, with good planning, you can organize your site in a way that will be easy to maintain without frames. Frames are incredibly inconvenient to users because they are only supported by the latest browsers (and even these sometimes crash when exposed to frames), and because navigation can be confusing, since the "Back" button doesn't always perform as expected. And since a site that uses frames neglects a large part of the potential audience, it's often necessary to maintain a second "shadow" site which doesn't use frames, increasing the work for whoever maintains the site. If you are required to work with frames pages, learn about how they work and test your links thoroughly. It's very easy to get confused by targeting, causing big pages full of information to show up in an inch-wide frame by mistake.



Rule 7		Check Your HTML in Multiple Browsers Try out your pages in different browsers. Because Netscape and Internet Explorer often interpret the same HTML in very different ways, what looks great in your favorite browser may look like a jumbled mess in mine. Over time, you'll learn enough about the differences between browsers to anticipate what might cause problems, and so you won't have to check every page in multiple browsers, but it's something you should do when you are getting started. You may also want to check your pages in some fairly old browsers (like old versions of Netscape or Mosaic) and Lynx (a text-based browser), particularly if your audience is likely to include people in foreign countries or people who aren't likely to have the latest computers. If you can design pages that work well in these lowest-common-denominator browsers, you've got a much bigger potential audience than if you limit your pages' usefulness to users of the latest version of Netscape.



Rule 8		Use Graphics Correctly Buttons, bullets, and other web graphics are frequently created with a process known as anti-aliasing. This process allows curves or angled edges to blend into the background. However, if you use a graphic that was created for a light background over a dark-colored background (or vice-versa), you'll end up with "fringies". This halo-effect diminishes any visual appeal the graphics might have added to the page in the first place. To avoid fringies, use graphics only on the appropriate background color, or limit yourself to rectangular-shaped graphics, which don't use anti-aliasing.



Rule 9		Avoid Creating Long Pages & Text Blocks Again, web surfers have notoriously short attention spans. Try to keep your pages under 2-3 pages vertically, so users won't have to scroll through screen after screen. Try to keep text blocks in manageable sizes; don't use very long paragraphs with no breaks. Also, if possible, limit the column width of longer paragraphs by using tables. Otherwise, people with wide browsers have a very long line of text to read, and it's easier to get lost.



Rule 10		Keep Your Pages & Images Small Most of the world is still surfing on relatively slow modems (28.8 Kbps or less). Very few pages are worth waiting more than a few seconds for, in the impatient web surfer's mind. In the FrontPage Editor, the estimated download time over a 28.8 modem for the page you are editing shows up in the lower right hand corner. Keep this under 30 seconds whenever possible. Remember this is an estimate, and the actual time may well be longer during busy times on the Internet or over a noisy phone line. Images are the biggest culprit in causing long download times. If you simply must include a big picture, make a thumbnail (smaller version) of it in an image-editing program and allow people to choose whether or not they'll see the large version. File sizes aren't much of a concern on an Intranet (within the CS Department's network, for example), but it's good to get in the habit of designing small, fast-loading pages.



Tutorial Navigation