Create and Use Custom Shapes in Photoshop CS5
How to Wrap Text Using AdobeCS5 Illustrator
How to Use Frame Labels in Adobe Flash CS6

Trekking through Web Design Tips

The majority of Flash movies end up on Web sites. To help ensure that your Web site is as attractive and useful as possible, consider these pearls of wisdom, some of which apply to all Web sites and others are specific to those sites using Flash movies.

Set your goal

A general principle of Web design is to know why you have a Web site. Write out one main goal and perhaps one or two secondary goals. For example, the main goal of your site may be to sell used music CDs. A secondary goal may be to provide viewers with music reviews so that they can decide which CDs they want to buy. Avoid putting material on your site that doesn't help you reach your goal.

How does your Flash movie help you attain your Web site's goal? Perhaps your movie displays the covers of your most widely sold CDs and plays some of the music, giving viewers an instant understanding of your site's purpose. On the other hand, if your Flash movie just displays an animated logo, it may even distract viewers from the important features of your home page.

Keep pages clean and clear

Unlike television, the Web is an interactive medium. Viewers need to understand the purpose of your site and how to navigate it. Clutter and complex structures are counterproductive. You can use Flash to create a simple, compelling navigational system. But you must be careful when mixing and matching HTML and Flash elements in order to avoid confusion. Let all your buttons look similar — don't create five different shapes and colors of Flash buttons just because you can.

By default, the Flash HTML file loops your files. Looped short animations tend to look like the animated GIFs we all know and hate . . . and ignore. Avoid looped animation unless you have a good reason for it, especially if it moves across the Web page in a banner. Viewers may assume it's advertising.

Don't overwhelm viewers with color

Too many colors create a chaotic impression. While your Web site doesn't have to be dull, you don't want it to be overwhelming either. Of course, there's nothing wrong with full-color photographs or graphics, but use a maximum of three colors for the background, text, and navigational aids. Most of your Web content is probably text, which viewers expect to be mostly in one font and one color. Navigational aids, such as buttons and links, should be the same color throughout your site.

Use fewer than four fonts

To create a Web page design with maximum coherence and impact, you should probably restrict your page design to two or three fonts at most. It makes visual sense to use one font for the body of your text and one font for the headlines. You could perhaps use a third font for a logo or for some other special item, but this may look best if it has some kind of strong visual harmony with the other fonts you are using.

Use four fonts and people may start to think that you're designing a ransom note, not a Web page.

Be consistent

Each page on your site should have the same logo. Certain links should go on each page (such as a link to your home page) and be in the same place on each page. If you have other links, such as Search, E-mail, and so on, these should also be consistent throughout your site.

Text color, fonts, hyperlinks, backgrounds, buttons, and so on should all be consistent to avoid confusion and error.

If you're combining HTML and Flash content, use consistent fonts and colors for both.

KISS

As you may know, KISS stands for Keep It Simple, Stupid. Sketch out the map of your site and make sure the lines of navigation are short and simple. Don't use long explanations when a short one will do. Don't use lots of images when one will suffice.

Your Flash movies should also be as simple as possible. Animation goes by fast. If too many objects are moving at once, viewers don't know where to focus their attention.

Know who's watching and how

Many Web site hosts provide you with information on the browsers (including which version) and the resolutions used by your viewers. You may not be able to cater to everything out there, but you should try to create a Web site that the vast majority of people can see.

Many sites that use Flash offer a non-Flash alternative rather than force viewers without the Flash Player to download it. The non-Flash alternative has non-animated graphics in place of the Flash movie.

Remember that viewers on a screen with 640 x 480 resolution can see a lot less than viewers on screens with a higher resolution. Those with lower resolution may miss important parts of your Web page and Flash animation.

Support the Flash Player

You can choose to publish an HTML file that detects whether the Flash Player is installed on the viewer's computer. If not, it displays an image file. (You need to publish to one of the image formats at the same time for this to work.)

The default HTML text doesn't check for the Flash player, but it includes the location to download the player. In some situations, the Flash Player will download automatically when not available or a window will pop up offering the viewer the chance to download it. Many sites include a button that says, Can't see the animation? Download the Flash Player here, or something to that effect. The button links to Macromedia's download center.

Many Web surfers have no idea how Web sites are created and have never heard of Flash. Therefore, giving viewers a choice of Flash and non-Flash sites may not be meaningful. (Of course, if you're a Web site designer and you think potential clients viewing your site may be savvier than most viewers, you may have no problem in this regard.) In most situations, it may be better to use the words animated and non-animated. Of course, feel free to use the word Flash along with some explanation.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Create Gradients in Fireworks CS5 Graphics
Convert Web Pages to PDF Files
Restrict Who Can Edit or Print PDF Documents
Export PDF Documents from InDesign Creative Suite 5
Create a PDF Hyperlink Using InDesign CS5
Advertisement

Inside Dummies.com