Design Principles

Even though there are no hard and fast rules of design for web pages, there are some principles that if followed will result in interfaces that are easier to read and easier to use. Before you actually sketch out your page design, consider these guidelines, which are based on traditional design principles and on the realities of publishing for the computer screen

Aspect Ratio and Display Size

Not all computer screens are created equal, yet they all share some common characteristics that the Web site designer must take into consideration. The first is aspect ratio, the relationship between the height and width of the computer screen. The vast majority of computer screens have an aspect ratio of 4:3. That means they are four units wide and three units high. So a screen that is 12 inches wide is 9 inches high; a screen that is 600 pixels high is 800 pixels wide. This means that virtually all of your audience will see your Web pages through a window with the same rectangular shape that is wider than it is tall. So your design must focus on this window shape. Even though the users can click the arrows to scroll down the page to see the things that don’t fit “above the scroll,” it’s not a good idea to make users do this. If you want them to see it, include it within the screen with the 4:3 aspect ratio.

Most of your audience today will use a computer monitor with a display size of 800 pixels across and 600 pixels down. A few old-timers maintain monitors of 640 by 480 pixels, and many of the newest and most expensive computers can show 1024 by 768 pixels. An ultra-conservative designer, who wanted absolutely everyone to be able to view the page without scrolling, would design a page to fit on a 640 by 480-pixel monitor. A Web site designed for wealthy computer aficionados, who can be expected to own the largest monitors, might safely design for a 1024 by 768-pixel monitor. But most designers will assume that most of the audience will view the site on a monitor that displays 800 pixels across and 600 pixels down.

This does not mean that the web page can be 800 by 600 pixels. The page must fit within the browser window that the viewer is using. The borders and title bars of the browser window take up space, leaving a smaller rectangle for your web page. The typical Web viewer sees your Web page in this context:


What’s really left for most users is a page size of 760 pixels wide and 420 pixels high. At 75 pixels per inch, the resolution of a typical computer monitor, that’s 10.1 inches wide and 5.6 inches high, a few inches smaller than a standard piece of paper held sideways. A good designer will make the display of the Web page fit into this rectangle.

The Roving Eye: Locating Functions

Are all parts of the Web page rectangle created equal? Or are some areas of the page better than others? When you glance at a web page (or a book page or a newspaper page) what part do you see first? Over the years, publishers have learned that the items that appear on the upper right corner of the right-hand page of a magazine or newspaper are seen first – the eye of the reader tends to rest there as soon as the page is turned. So many advertisers choose to place their messages at that location. With web pages, we don’t know yet which are the most looked-at parts of the pages, except to know that the top of the page is more likely to be seen than the bottom, and that items placed “below the scroll” are hardly viewed at all. And we know that dynamic items on a page – things that move – seem to capture the eye, at least for a moment.

In addition to location, the reader’s attention is also influenced by the number of items on the visible page. Your key message is less likely to be noticed on a Web page with a dozen visible items, than on a page with only four things to look at. In fact, a cluttered page is disturbing to the eye, often causing the user to look away, ignore the page altogether, or go back where he came from.

If you want a certain item or message to be noticed by the casual reader, put it near the top of a page, on a page with only a few other items competing for attention, and include a large title or photo that makes it clear what the item is about.

Certain items work best in natural locations. Titles belong at or near the top of the page, because we are so used to this placement in newspapers, books, and magazines. Buttons that navigate to the next page work best near the right side, because that’s where we are used to going to turn to the next page in a book or magazine. Buttons or menu items that take the user up the hierarchy of the site belong at the top, because that’s the way people think about the organization of a site – up is more general, down is more specific.

More design issues

As you consider the design of a web page, and as you implement the design in building the site, you should be aware of some additional principles. Following a few simple guidelines on color, balance, contrast, alignment, and scrolling can make your pages easy to read and pleasing to look at. Using frames and consistent menus may help your users navigate more easily through the site. Keeping in mind the importance of user control is essential to your planning. And throughout the planning process you should err on the side of simple design and kindness to the people who will use the site. Here are some suggestions for each of these topics.

Tip: Frames

A web page built with frames includes two or more separate rectangles, each of which contains its own content, and can change while another frame remains the same. A common example is a menu frame on the left of the page that never changes, while the frame on the right displays new content each time a menu item is clicked. You will learn how to build frames later in this book. At this point you should consider whether a set of frames will help your users find their way through your site and facilitate the easy and quick display of information. Using frames has a downside as well: frames can complicate your programming, and cause some users problems with navigation. But used carefully, frames can help organize a site.

Color, Contrast, and Balance

We learned earlier about the importance of color in establishing and maintaining the organization’s identity through the web site. There is another consideration in the use of color on a web site, which is how the color fits with the other elements of the site. Bold, bright colors in menu areas and mastheads distract the user’s eyes from other elements on the page such as text and photographs. It is oftentimes better to use subtle or pastel colors for these purposes.

Warning: Contrasting backgrounds

Avoid bold colors or patterns as backgrounds on a web page. Text that is displayed over such a background will be very difficult to read. Photographs will compete for attention with the background and lose their visual appeal.

No matter how you use color, the colors you choose should fit the purpose of your site, and colors used in combination should complement each other. Some colors lend a cool feeling to the page, while others warm it up. Some colors just don’t go together. A bright blue logo on a dark orange background, for instance, will cause most viewers to cringe. While we cannot in this book develop the entire theory of color, we can introduce the color wheel, which will help you avoid the most glaring combinations.


Chapter 3, figure 5. The color wheel.

The wheel is built around the primary colors of red, yellow, and blue. These are called primary because all of the other colors can be built by combining them. The secondary colors are the combinations of the primaries: orange, green, and violet. You can use the color wheel to help you select colors that fit your purpose and combine well with each other.

For instance, colors on the left -- blues, greens, and violets -- are cooler in tone than reds, yellows and oranges. The warm colors clearly get their influence from their connection with fire, while the cooler colors remind us of the sea and the sky. Cool colors may seem to some people more businesslike and detached, while the warmer colors may seem more fiery and provocative. This information may help you decide what kinds of colors are best suited to your site’s purposes.

Colors that sit directly across the color wheel from each other are called complementary colors. Combining two complementary colors makes both seem more intense and brighter, creating a great deal of contrast. That’s why the blue on orange web page seems so jarring. Colors adjacent to each other on the wheel create less contrast. Contrast can also be created with shades and tints of a single color – adding some black to the color is called a shade; adding white is called a tint. The site pictured in figure 32 uses various shades and tints of red as its color scheme.


There is no right and wrong in color schemes, simply a realization that some combinations can create visual contrast and discord, while others may induce comfort and harmony. What kinds of colors will you use in your sample site? How does your selection of colors fit with the purposes of your site, and with the experience of the intended audience? How would you explain your choices based on the color wheel described above? These are the key questions for the web designer at this stage.

Tip: Color on the computer

On the computer display, and in the computer’s memory, each pixel on a web page is represented by a number. This number signifies the color and the brightness of the pixel. A dark red pixel is #CC0000 (that’s a hexadecimal number – base 16), while light blue pixel is #6699FF. All computers use this same system, and all of the web browsers recognize this universal numbering scheme, which allows thousands of different colors. You can play with the colors and numbers at . A few years ago, most computers could only display 256 of these thousands of colors, and so web designers, to be safe, could only choose from a limited palette of colors. Today, most computers can display the full range of colors, and even though no two computer monitors will produce exactly the same hue and brightness from the same number, the web designer can confidently employ the entire palette of colors.

Alignment

The human eye likes it when things line up. It wants to see the left edge of a picture line up exactly with the left edge of the column of text in which it is embedded. The eye would prefer each of our web pages to form its elements so that they follow a single axis, an invisible line, usually vertical, against or around which the columns of text and edges of graphics line up. Figure 7 shows three web pages, one with an axis on the right margin, the second with an axis about an inch and a half from the from the left margin, the third with an axis right down the middle. Which seems easier to look at?


Chapter 3, figure 7A. Right axis.


Chapter 3, figure 4A. Left axis.


The scheme of alignment for a web site should be consistent from page to page, for ease of use and consistency. So at this point in the process, the designer must define the nature of the alignment that will be followed on the site. A very simple web page, consisting of a single column text and a few images, will form a natural axis along the left margin, where each line of text begins. Because we read text from left to right in English, and because web browsers cannot justify text against both left and right margins, we end up with “flush left, ragged right” columns of text in web pages. The designer in most cases must use this left edge of the column as the core of the alignment scheme. In a book, newspaper, or magazine, where typesetters can align text along both sides of a column, the designer has more freedom in laying out the page.

The sketch of your web page design, which you will develop in the next section of this chapter, will begin with your choice of alignment schemes. A visit to your favorite web sites, with an eye to how the elements are aligned, will at this point help you think about your own design.

Frames, menus, and scrolling

Most web pages consist of a single frame, but many divide the browser window into two or three separate areas that can change independently. The page in figure 34 uses three frames, one for the title along the top, another for the list of menu items down the left side, and a third for the content of the page. The top and left frames hardly every change as the user navigates the site, but the content frame changes at every click. When the user scrolls down through a long document in the content frame, the title and the menus do not scroll up and out of the way, but remain where they were, always available.


By using frames, the designer ensures that:

  • the main menu items are always available to the user.
  • the menu items always appear in the exact same place in the browser window.
  • the title is always present to answer the navigational question, “What site is this?”
  • the red graphics do not reload and flash onto the screen every time a new content page is called up by the user.

Menus

Earlier in this book, in the section on navigation, we leaned of the importance of providing the user with information to answer the questions,

  • Where am I in the site?
  • What else is available at this site?
  • Where should I go next?

In most web sites, these questions are answered through a menu that lists the navigational choices that the user can make. As in a restaurant, the menu lists the items that are available, and lets the customer choose which to enjoy next. Not all menu items will be clicked by the user, and not all users will visit the various sections in the same order. A good web designer will make it easy for the user to view the menu, perhaps by keeping it always visible as in figure 34 above, or by making it just a click away. A menu can be displayed across the top, at the bottom, or down the sides, but it’s best if it shows up in the same place on all pages within a site.

The menu in most cases cannot list every page on the site, so it usually lists the main sections of the site. Each section may then display a submenu of its individual pages. The nature of the menu scheme depends on the extent and organizational pattern of the site, and on the needs of the typical user. As you considered the concept of navigation earlier in this book, you used your site’s flow chart to plan a menu scheme; the task now is to place those menu items onto the page in a consistent way.

Scrolling

As you read a book, you turn the pages one to the next. This is a familiar and comfortable way to read. The text stays still, and it’s easy to keep track of where you are. But on a web page, we are often expected to scroll down through the text to follow the story. In order to continue our reading, we must

  1. grab the mouse,
  2. find the little scroll arrow (thus taking our eyes off the text),
  3. click the mouse down,
  4. scroll down (causing the text to move quickly and impossible to follow with our eyes),
  5. click the mouse up and hope we did not go too far,
  6. bring our eyes back to the column of text,
  7. search for where we stopped reading,
  8. resume our story.

A most unnatural and inefficient process. You can see why so few users ever get to the materials that lie “below the scroll” on a web page.