Principles of Web Design

Editor's Notes

• #4: As you become more versed in HTML and using the various Web page authoring tools, the possibilities for colors, fonts, layouts, graphics, and general “tricks” in your Web pages grows. In a short time, you can have quite an array of neat things you can do in a Web page or Web site. However, each of these tricks you learn has to be evaluated and used sparingly solely based on their usefulness to the goal of serving the selected information to your defined audience. In other words, just because you can do something in designing your Web page or Web site, doesn’t mean you should do it. In fact, many Web page authoring tricks may not even work on your audience’s computer or over their network connection. It is definitely fun to practice and play with the tricks you learn as you become a more seasoned Web page author, but truly experienced Web page authors learn when to use each trick based on the need to deliver information and the technical capabilities of the defined audience and their computers. Not to mention that five different fonts, in five different colors, all on the same page is just distracting and annoying to many Web users and will ultimately detract from the usefulness of the information… in most cases.
• #5: Know your audience and deliver information to meet their needs. If your audience is children, then perhaps five fonts and five colors on a single Web page is appropriate in order to keep their attention. If your audience is primarily business people that will access your site over high-speed networks, using high-end computers, you might be able to add more bells and whistles to your Web site to impress them. And while it is generally not a good idea to load up a Web site with lots of large, high-quality photographs that can take longer to download, if you are creating a real estate Web site, photos are extremely important to the business and the quality should not be compromised in the interest of speed. However, there may be specific layouts that lend themselves better to providing these high-quality photos. Ultimately, you have to define a primary audience for the information you are making available; and you have to understand the “culture” of that audience. This means understanding how they consume information; when and where they might access your site; why they will access it; how you will get them to your site; and what their general interests and tolerances are in the creativity and layout of the information you are providing.
• #6: When a new restaurant or store opens, they make a big deal in advertising in hopes of getting people to visit, but more importantly, have people return, and even more importantly, return with friends who tell friends, who tell friends, and so on. The initial visits by new customers are critical to the future of almost any store. If a new customer was invited to the grand opening of a restaurant that had a menu, but only a few things available on it, the customer would likely be gravely disappointed and is very likely not going to return later. Web sites are no different. If people’s information needs are not met, they will surf on to other Web sites. Keep in mind that people enjoy surfing the Web and are very willing to check out a new site, at least once. Many people will visit your Web site when you publish your URL and announce it as a brand new site that provides, “this” and “that” and etc. Don’t bring them there and just provide promises of things to come without providing some real substance; they won’t stay and they won’t return. And as a sub-note, you should be aware of the things that generally annoy or offend your defined audience. The BLINK tag is a just a popular example of something that generally annoys people, but again, evaluate your audience and decide what is appropriate.
• #14: USA Today’s opening Web page is full of graphics that can download slowly over a modem. The fundamental question that has to be asked is: Who is their audience? One could say that the entire country is their audience, but that wouldn’t exactly be true. If it were, they would fail to reach that audience with a page like this. I would argue that their true audience is made up of people with regular access to a medium to high-end computer, that is either directly connected to the Internet or is connected over a high-speed dynamic connection. This combination downloads this page quite quickly. This page is probably too graphic-intensive if the audience is truly the general public, as is the case for most k-12 schools, libraries or community networks.
• #15: Web pages with very few graphics are more accessible to everyone. Low-graphic Web pages load quicker and work on more computers than high-graphic Web pages. Unless great care is taken when writing a Web page, a low-graphic Web page will be more accessible to visually disabled individuals using “blind readers” than will be high-graphic Web pages. The reason is that “blind reader” software can read text, but can “read” or convey what is in a graphic or photo. The general rule of thumb is: Fewer graphics means more accessibility.
• #16: At least one individual must be given the responsibility of keeping a Web site current. And while that person should be an expert in Web page/site design and construction, and should keep up on the latest and greatest and periodically attempt to incorporate new technologies (if they will work for the defined audience), it is much more important that the facts and information stated in a Web page are correct and completely up to date. People do not, and generally should not, have to question the facts that an organization posts on their Web page regarding their services, prices, hours, staff, menus, movie listings, seasonal schedule, etc. Make sure this info is correct on your Web page is kept up to date. Make updating and checking the facts on your Web site someone’s job.
• #17: This person had every intention of keeping this Web page up to date, but unless he is only forgetting to update the date in the lower-left corner, he has not kept the document “living.”
• #20: The logical and necessary organization of information for the Academic Unit portion of the University of Michigan Web site is by department. It’s generally logical for most users of this site, and it’s necessary because each of these different departments independently manage their own portion of the U-M Web site. Community information networks often find the need to allow each organization to maintain their own portion of the bigger Web site. However, that doesn’t mean that a directory of organizations is the only way to organize information in a community network.
• #21: AT&T has a few different, distinct audiences. Therefore, their Web site is divided to specifically target each of these audiences. Th opening homepage directs visitors by using the menu on the far-left of the screen. While a single individual may be interested in AT&T as a telephone customer and as an investor, most likely when that person pays a visit to this site, they will only be wearing one of those two hats. Telephone customer information has a much different goal than investor information.
• #22: A virtual, online library is most logically organized by subject. This more closely resembles the organization by department seen on the U-M Web site. This, however, is very different than an organization by user type. Imagine the difficulty in trying to define every type of individual that might visit an online library, then trying to decide what each of those user types would be interested in. How would you organize a general population? By religion? Socioeconomic status? Career? Race? You can quickly see how impractical and inappropriate most “user types” would be when attempting to group a general population.
• #24: The Ohio State University Web site provides an easy-to-use navigation graphic and a search button at the top of their opening page, which does not span any further than one viewable screen. This makes initial navigation quick, easy and convenient for the Web user.
• #25: Similar to Ohio State University, the United States Postal Service provides a short, concise menu from which to navigate to subsequent Web pages. Further, take note of the static menu provided with a black background at the bottom of this Web page. As subsequent Web pages from the USPS Web site are accessed, the static menu at the bottom of the screen remains for quick and easy navigation back to any of the eight major areas of the USPS Web site.
• #26: Be aware of the type of network connection the defined audience for your Web site generally uses. For example, are they mostly home users? Or are they generally business users who will access your site over a high-speed network connection? If your audience consists mostly of home users, are they of the population that would most likely have high-speed ISDN, cable-modem or digital satellite connections? Or are they likely to be 33.6 or 28.8 Kbps modem users? Or is your audience slightly less sophisticated as far as their computer capabilities, and might be accessing over a 14.4 Kbps modem? Based on the answer to this question regarding your audience’s network speed, you can determine how long any given Web page will take to download. The first thing you have to do is total the number of bytes that need to be transferred to load a Web page. For example, the HTML file might be 2500 bytes, which pulls with it three different graphics. One graphic is 9500 bytes; the second is 5600 bytes; and the third is a large picture that is 32000 bytes. The grand total for this Web page is 49600 bytes. Assuming most users will access this Web page over a 28.8 Kbps, we have to convert this measurement into bytes, rather than what it is now—kilobits. To convert this number, we first multiply it by 1000, then we divide by 8; this produces 3600 bytes per second. Dividing 49600 by 3600 produces, 13.78 seconds. That is how long this fictitious Web page would download under ideal 28.8 Kbps modem conditions—this is generally too long.
• #27: This Web site had several glaring issues. First, it is loaded with graphics that take a considerable amount of time to download. Second, the user is required to scroll down through a number of meaningless graphics before getting any real information. Third, and most annoying, is the multi-colored border around the Web page that continues to change colors (like a neon sign) as you scroll through this page. In fairness, however, if this Web site directly meets the information needs of its primary audience and is appealing to that primary audience, then the site, even as annoying as it might be to people outside of the primary audience, has successfully met its goal.
• #28: The use of graphics and various types of text at the Toyota Web site makes for a balanced and attractive look. Although this Web page consists of eight individual graphics, each one is optimized for fast downloading and subtle enough to not jump off the page at you. Even with eight individual graphics on this Web page, it is only a total of 18500 bytes. Over a 28.8 Kbps modem, this page will generally download in 5.13 seconds. Every network connection type that is faster than a 28.8 Kbps modem will download this page in less than 5 seconds—this is acceptable for most Web users.
• #29: Background images can provide an attractive “texture” to your Web page, but be sure not wash out your text so that users can no longer read it. Strive for a contrast between your background coloring and your text coloring. The background on this Web page eliminates black text as a viable text color because while most of the background is white, which is the direct contrast to black, small portions of the background are black to round off the shape of the bubbles. While it may or may not be attractive, red text would probably in contrast enough to both the white and black in this background to return the text on the page to at least readable.
• #32: These are different Web page layout and design techniques that a Web page writer can choose from when creating a Web page or an entire Web site. Most of these have both plusses and minuses and should be considered carefully during the design process.
• #33: When employing this very logical organization, it is generally recognized that you should avoid making your Web site more than three levels deep. That is, you should try to avoid sending users through a long hierarchy of menus before they reach any information of substance. This does not mean that once a user has reached an “information page,” that you can’t provide more detailed or related information in what would be seen as a sub-page to that page. Generally if you keep the primary interest of your defined audience in mind, you can strive to avoid making them jump through too many hoops or menus to get to what they want.
• #34: An example of hierarchical organization of information. Within the Michigan Electronic Library, a user has “Michigan Local Government,” and now has the choice different county and municipality Michigan government organizations. Take note that the writer of this Web page could have created another level by making this page only links to each of the headings on this page, with a sub-page for each of the headings. The writer, however, avoided too many menus by collecting several major Michigan local government categories on one page.
• #35: Images are often used as hyperlinks, often without the user even realizing it. One of the major uses of images, whether they are used as hyperlinks or imagemaps or not, is to use a non-standard font for text. Many designers will use a standard graphics program to create an image simply of text. That is, starting a new image and using the text tool in the graphics program to type text in using any of the fonts loaded on the creator’s computer. Creating an imagemap is a little more involved. Using any image, whether it is an image just of text or picture taken with a digital camera, different areas of the image can be activated as independent hyperlinks to different Web pages or Web objects. Perhaps the biggest issue with using imagemaps is trying to make it obvious where it is the user should click on the image to go to the various URLs. When the image being used has been created by hand in a graphics program, it is often easier to graphically define each of the mapped areas; pictures generally don’t lend themselves to obvious mappings for the end user.
• #36: The boxed menu above is a single image that contains eight different mappings. This is an example of creating a graphic that mostly contains text. The reason for this is to ensure the exact font that will be displayed to the user, and to ensure that the text will remain in each of the rectangular menu bars, which is all part of the image. The divisions on this imagemap are obvious to most users.
• #37: There are very few downsides to using tables in Web pages, and very few Web designers get away without using them. Most uses of the <TABLE> tag in Web pages are to control layout, not to present information in a spreadsheet bordered table. Table borders can either be turned on or off. When the Web page creator needs to present data in a tabular format, she might decide to leave the table borders on so that a border is drawn around and through the entire table. But in most cases, tables are used to control layout of images or text; in this use, table borders are turned off and the table becomes invisible to the Web page user. An example of when an invisible (or borderless) table is necessary is when the Web page creator wants to place an image off-centered to the right, completely away from any text or other objects on the page. A common way of controlling this placement is by using an invisible table to create, if you will, an invisible scaffolding that provides structure in which objects such as images can be placed.
• #38: The newspaper-style layout achieved on this Web page comes from the use of tables. To create the various columns, one along the left side, down the middle and along the right, an invisible table is employed. If borders were turned on on this Web page, additional borders would appear around the whole table, between the columns and rows.
• #39: Tables can also be used as a low-tech graphical technique. The table above provides structure and allows the designer to control layout, but to avoid making things appear “in the middle of nowhere,” borders were turned on.
• #40: From the beginning, frames have been somewhat controversial. Right up there with animated gifs, frames should be used properly and only when they enhance the usefulness of the Web site. A general rule of thumb is that no more than three frames should appear at a single time in a Web site. Even three, for many people, are too much. The most common and most acceptable uses of frames is to define a static navigation menu. That is, a window within the Web site that remains constant or only changes to expand on a higher level menu. These static navigation frames will most often appear along the far left margin or lower margin of a Web site. A third frame is sometimes used for a static title. When designed and coded properly, frames can enhance the usefulness of a Web site immensely, but coded incorrectly, frames can become a mess. The mess often comes in the way of framed Web pages opening within an already framed Web page. This is not only very ugly, but can become quite confusing for the user. Another issue with frames is the amount of space each frame takes up within the Web browser. This, again, comes down to knowing a little about your audience. If most of your audience uses a low resolution, their browsers won’t have a lot of room for multiple frames. But if your users generally run at a higher display resolution, frames shouldn’t take up too much room.
• #41: This is an example of using two frames. A thin frame along the left margin that acts as a static navigation menu throughout the Web site. The second frame, which often isn’t even thought of as a frame because it takes the majority of the screen, is what some might call the “content window.” It is the frame in which all information in this Web site is displayed.
• #42: This is another example of a static navigation frame. Each cell in this frame is a hyperlink that will bring a Web page up in the larger frame above it.
• #43: If frames are used in a Web site that provides links to external Web pages, be sure to name each of your frames and target links to the appropriate frame. For example, for external links, you might consider spawning another browser window, or replacing the contents of the current browser window completely with the contents of the external Web page.
• #44: Don’t be concerned with stealing an idea for layout; Web site layouts are not protected by copyright and many Web page authors got started by copying or “being inspired” by a certain Web site. A note of warning, however, Web page contents (i.e., text, images, etc.) are protected under copyright and should not used without permission. To maintain a consistent look throughout a Web site, the page and text colors are defined on every Web page. It is in your best interest to test a color scheme thoroughly before coding too many pages within your Web site. If you find after coding 20 or more pages in your Web site that the chosen color scheme does not work on certain computers, or under certain display settings that your audience might use, you may have many Web pages to change. Keep things simple when designing your Web site. Only use bells and whistles that enhance the usefulness of your site or is necessary to attract and maintain the attention of your target audience. It is courteous to provide alternatives to a framed Web site, or graphic-intensive Web site for those in your target audience who might not be interested or able to work with such a site. If your Web site grows beyond quick and easy navigation, employ a search engine on your Web site to assist users in navigation.
• #45: A number of color-assistant sites exist and are freely available to use on the Internet. An excellent one can be found at the Project Cool web site: http://www.projectcool.com/ The color chart displayed above provides a few things. First, it lists the color names that are recognized by current Web browsers, as well as listing the hexadecimal number for each of those colors. Hexadecimal numbers were the only way to define colors in Web pages a few Web browser generations ago. Second, you can quickly see how any text color will work on a background color. To change the background color, click the color you are interested in. The background color immediately changes to that color and you are now free to view the color you were considering for text on that background. For example, you might have been considering a brown background with blue text. To see how this looks, you can click on the brown hyperlink, changing the background to brown, then scroll to the blue text listing. You might be a little disappointed to find a strange contrast between the two colors that renders the text as difficult to read. The direct URL to this color chart is: http://www.projectcool.com/developer/reference/color-chart.html
• #46: The last bullet on this slide relates to the rule of not putting “under construction” on your Web site. This rule is not to create a dead hyperlink or inactive text in a list of hyperlinks. When you complete a new portion of your Web site, add hyperlinks to it on the appropriate page. If you wish, you might notify your Web site users by placing a small “new” icon near the new hyperlink or announcing through a newsletter, email list or any other viable means.
• #49: This is a health science guide, but before you get any of the excellent information, you have to scroll through all of their awards. The first time a person visits this site, they might be impressed, but if users are truly pleased with the site and they continue to return and use the site a lot, these awards are only going to get more and more annoying.
• #50: If your Web site receives awards, be proud of them, but consider making a side Web page for all of your awards that people can choose to visit if they wish. Think of it as a trophy room. The Web page displayed above is a Web page that people can click into or not.
• #53: 8 14 12 People may be directed to your Web site via an external Web site, an external search engine or by a URL printed in a publication. But there is no guarantee that they will enter your site through the “front door.” That is, they may enter your Web site by accessing one of your Web pages within your Web site. For this reason, you want to clearly identify yourself and provide links to at least your home page, but perhaps other major areas of interest. And keep in mind that when a user enters your site through this “back” or “side door,” if your whole site is framed, they will not enter in a framed fashion. So do not always count on frames to provide static identification and navigation to users. Frames work well for this when people enter your site via your home page, but otherwise, they might not know who owns this information they have stumbled on or how they can find more.
• #54: 10 17
• #55: 11 18