Great Web Design - A Top 10 + 1 List

Mastering Great Web Design

A Top 10+1 List
contributed by Kevin Martonic

Kevin Martonick is a talented professional animator who has spent years creating artwork for online and digital media. Currently, Kevin is an animator at Cartoon Network, working his magic for the popular cartoon Foster's Home for Imaginary Friends. Before animating for television, Kevin created numerous online artwork and interactive pieces for online educational products and software. Based on his education and experience, Kevin has compiled some tips to pass along to you regarding what you can do to help create a visually effective and appealing Web site, especially in relation to effectively using graphics and buttons:
	Draw from content. Content has a powerful influence on the look of your overall design—graphics and buttons included. After you decide on your content, draw from it for design ideas.
	Organize by topic. Content decided on, pick an overall topic that everything else in your site relates to. Each page of the site should then hit on different aspects of the main topic. It might help to think of navigation buttons as a table of contents or an index that takes visitors to different pages of a book or more specific tables of contents.
	Research successful designs. Look at other Web sites that you like or Web sites that have been nominated for design awards. What is it that you like about their graphics and buttons? How are they placed? Do they relate to the content and serve a purpose? Also research other media, such as CDs and record albums, books, magazines, and so forth, to see how their designs work together as a cohesive whole.
	Choose an overall theme. Content helps you to come up with an overall theme. This theme should act as a guideline for designing site elements, including buttons and graphics.
	Design buttons and graphics wisely. Buttons and graphics contribute to the overall look of a site, so they must match the rest of the design. Decide on a color scheme, or palette, that can serve as the color for the buttons and their text as well as a background or border for pictures, drawings, and other graphics. If you decide on a duotone look for buttons, by using two shades of the same color, or a gradient look, by using two colors, make sure that the colors come from your color palette. Another good way to think about buttons and graphics is to imagine them as a frame around a painting. In the same way you don't want the frame to overpower the artwork, you don't want the buttons and graphics to overpower your information—unless, of course, the buttons and graphics are the main point of your Web site.
	Match design to function. Buttons and graphics should serve a purpose to the content. In most cases, a close-up picture of Saturn's rings wouldn't quite suit a site about trees. And a button labeled Video Clip should take the user to a movie file, not a still image or a page of text.
	Keep it simple. Keeping your site simple and avoiding clutter makes it easy to understand. Button titles should be short and descriptive. Display only the necessary information for each page that relates to its button's title. In the same way, keep graphics to a minimum; use only graphics that are necessary and serve the purpose of the content.
	Organize navigation from general to specific. Buttons that lead visitors from a big-picture view to a more specific view are very helpful and most common. A home page should have general buttons that send visitors to pages where they will find more specific links. For example, if you're creating a site to display your portfolio, you might start with a home page containing the buttons Résumé, Examples Of Work, Recommendations, Awards, and so forth. Each button might take then take visitors directly to page or subdirectory with content and links relevant to more specific information.
	Choose easy-to-read fonts. In most cases fonts on buttons and under pictures should be easily readable and easy on the eyes. If you choose to color fonts, make sure the color contrasts strongly with the background. Because of the many formatting options you have with fonts—such as boldface, italics, size, width, and color—you should keep fonts to a minimum of two or three font families throughout your site. This will make it easier to keep everything related to your content and keep the user from being overwhelmed. In addition, if more than one font is used, make sure the difference between the fonts is obvious to avoid confusion.
	Test your work. Always test your work, and if you have really patient friends, have them test it as well. The creation process in Web production (much like all creative processes) is a matter of trial and error. If one idea doesn't work, try another. Often the best answer is the simplest and most obvious answer.
	Plus 1: Be Patient. Every problem has a solution. Sometimes it just takes time to figure out the answer; it could just be a matter of going off and doing something else for awhile to clear your mind.