Flash Reference Guide

There is such a thing as being too creative. A site design that's too creative, or haphazard, can confuse your customers. When creating a site, you want to employ a design strategy where elements on the screen, such as content and navigation, are logically collected together. This process is called "blocking."

How Does Blocking Work?

Blocking—a concept you can use for almost any Web site or application— involves breaking down design into specific, easily recognizable blocks of organized content, such as navigation, advertising, and branding. Amazon.com, for example, does a great job of blocking:

Figure 1

Amazon packs a lot of content on the screen, but the site is still easy to use. This is because the design is divided into easily recognizable sections. You can better visualize this by replacing the text and graphics on the screen with blocks. Here is Amazon.com blocked out:

Figure 2

You can see the areas of content in red. Across the top, you have the site's navigation; below the navigation is the search tool followed by personalization; and the site's main content is broken into three main columns: category navigation, content, and advertising. I was unable to capture the site's footer content in this screen shot, but that exists as well as a block of content at the bottom of the site.

Rule of thumb: when blocking out a site, keep the blocked design simple. This allows your customers to find what they're looking for as quickly as possible.

Fortunately, blocking a Web site design is nothing new. There are plenty of books on this subject. In fact, a good book for new designers is "Web Graphics for Non-Designers" by Nick Boyce, Isaac Forman, Dave Gibbons, and Adrian Roselli.

Deconstructing a Design

You've seen the Amazon.com Web site blocked; let's take the same premise and apply it to a Flash design. The following figure is the Flash design you're going to deconstruct.

Figure 3

Now, let's take the design and break it into blocks as shown here:

Figure 4

When you look at a design, your eye travels the same path whether you're looking at a poster, book cover, or Web site. Almost always, you start by looking at the top left corner of a design and move in an "S" shape down to the bottom right. In our new design, a "burst," or attention grabber, has been placed in the center of the screen. This forces our eye to start at this point before beginning its curvy "S" movement. The blocks of content are focused along this "S" movement. The following illustration shows how the eye may likely move through our new design:

Figure 5

Now you need to place content into the blocks on the screen. Key design elements you want to use are: navigation, branding, utilities, content sections, and page footer. These sections form the fundamental construction of most designs. Here is our design blocked and labeled:

Figure 6

The design has been developed to illustrate the main fundamentals of Flash design. Most of the sections, such as navigation, content, and footer, should be familiar to you. Some of the names, such as "Utilities" and "Call Out Section," are names I use to group non-traditional design elements together. "Utilities," for example, groups together a "Home" section while the "Call Out Section" highlights a specific piece of content.

Layering Design in Flash

At some point, you need to gather up the nerve to take your design into Flash. HTML Web site designers who conceive their site designs in Photoshop often have big problems migrating them to the Web. They need to slice their images and layer them in complex tables or use CSS (Cascading Style Sheets) to take the design to the Internet.

Flash is much friendlier, largely because its history is based within illustration. To this end, many of the tools illustrators would use are available to Flash designers as well. You can create an illustration for a site in Macromedia Fireworks or Adobe Illustrator, for example, and import the art directly into Flash, which inherits the design's layers and groupings.

Let me show you. We're going to take the design for the site, which was created in Fireworks, and import it into Flash.

1. Open Flash. Create a new design and set the stage settings to 766 x 746.
2. Choose File >; Import >; Import to Stage...
3. A window opens. Navigate to the PNG file called "Outline.png."
   

   Figure 7

4. The "Fireworks PNG Import Settings" window appears. Select "OK" to import.
   

   Figure 8

5. The image is imported into Flash and you can see in the Timeline panel all of the layers of the image inserted into a new layer.
   

   Figure 9

6. Save your work.

What you now have is the basic layout for your design.

Next Steps

These are the fundamental building blocks needed for your design. But this is Flash, which means you can add animation and interactivity to your design as well. In the next section, I'll discuss branding and show you how to use animation to focus users on specific brands you want to highlight.