Key Elements of Design

What is good graphic design? This means different things to different audiences. Rock band aficionados will have different expectations than genealogy buffs or auction users. Design should be tailored to the expected audience and site use. All elements of design work together, creating a flow between colors, text, graphics and images. The color of your background affects the color of your text, the images affect the layout of the page and so on. There are many elements to a web page that you should keep in mind:

Background

Background images should be carefully selected. When choosing a background image you generally want to avoid dark colors and patterns, keeping it easy to place text that is easy to read. I do not recommend background images where text should be placed. Keep your background simple, easy to read, and professional, not distracting your users from your purpose.

Text

Text is often the most important and least noticed part of a website. In order to ensure that information is properly communicated, it is important that text be easy to recognize, read and understand. Here are some tips to follow concerning text:

  • Text should be big enough to read, but not too big. Keep the age of your target audience in mind. Those of us whose eyes are not as good as they used to be become frustrated with type that is too small or hard to read.
  • The number of characters per line and the number of lines of text per page should be limited. It is much easier to read large amounts of text when it is split into several pages.
  • Columns of text should be narrower than in a book to make reading easier on the screen and the hierarchy of information should be perfectly clear.
  • Check spelling and grammar. Typos cannot only be annoying; they may keep links from working properly.

Ask yourself if the text makes for easy and comfortable reading. The background should not interrupt the text. Make sure your background is kept a lighter color than your text. Black text on a white background may not be flashy, but it works. Again, I strongly suggest that you do not use a photograph for the background. Images will cause the web page to appear too "busy" and make the text hard to read.

Graphics/Images

What is the difference between graphics and images? Graphics include headings, navigational buttons, etc. Images are referred to as pictures.

Graphics

When considering your use of graphics, ask yourself these questions: What purpose do they serve? A graphic can communicate a lot of information. Is the graphic appropriate for the purpose? How large is the graphic file size. Are you creating the smallest possible graphics for your purposes?

Animated graphics were cool three to five years ago, but keep animation to a minimum. Graphics can also slow a page down so be cautious of over-designing your site. And if you do use them, make sure that Animated graphics turn off by themselves.

Images

Not only will images add pizzazz to your site, they may serve as vital pieces of information in their own right and draw attention to pages. But you should not include pictures without a clear intention.

Should I have pictures of my store, my products, and whatever else I can get? If you're setting up an e-commerce web site and you will be selling your products online, then yes, you should have an image of every single product you intend to sell to online customers. However, if you are not selling products, then too many pictures may not be such a great idea.

  • Image sizes exceeding 640 pixels wide by 480 pixels high are not recommended for two reasons:
  • They will be too large to fit on a standard 15" computer monitor.
  • This is larger than the NTSC standard (the USA's video standard), and so will not convert easily to film or videotape.
  • Consider how long it will take for an image to load over the Internet. If it will take a long time, consider linking from a "thumbnail" (1/4 size) image to the larger image.
  • Consider the number of images on a single "page". Even with image caching now available, too many images can quickly zap the memory on a standard computer.

What does this all mean? You need to keep all your target audience (potential clients) in mind. If you are servicing a more "Internet sauvy" group, then most of your clients will have high speed Internet, however, not all of them will. So we need to keep the web site, including all images, highly optimized, so that your dial up potential clients are able to view your web site, product images and graphics conveniently. This is what you should keep in mind when making decisions about what images and graphics should be placed on your web site.

Videos/Movies

Movies may be added to a website. They can be a link from your HTML document to the movie file in which the browser should automatically launch the correct player for you or the files can be embedded directly into the page.

Videos can be delivered in a number of formats: MPEG, Quicktime (AVI), RealVideo, Video for Windows (WMV or ASF) or Adobe Flash video (FLV). The decision of which format to use if based on several factors including file size, download speeds, delivery method and the availability of an appropriate third-party media player.

Audio/Sound files

Audio files may be added to a website in the same manner as video files. The only thing that changes is the file extension and delivery method.

Hyperlinks

A hyperlink (often referred to as simply a link), is a reference or navigation element in a document to another section of the same document, another document, or a specified section of another document, that automatically brings the referred information to the user when the navigation element is selected by the user.

There are a number of ways to format and present hyperlinks: embedded links, inline links, and hot areas. Your link colors should coordinate with page colors and links are always underlined so they are instantly clear to the visitor.

Interactive forms

Many websites include forms, they are the most common way for Web servers to interact dynamically with users. Another increasingly common way to provide dynamic feedback for Web users is to include scripts or programs that run on the user's machine rather than the Web server. These programs can be Java applets, Java scripts, or ActiveX controls. These technologies are known collectively as client side solutions, while the use of CGI is a server side solution because the processing occurs on the Web server.

Database connectivity

This particular feature is useful for companies who wish to give visitors to their website the ability to access information, which would necessitate the searching and sorting of a substantial amount of data. Two examples are stores and catalogue companies with a large quantity of stock, and organizations such as libraries that hold archival information.