Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Flash

Flash Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Fundamental Design Concepts

Last updated Aug 22, 2003.

Why is good design key to success? The answer is simple: competition. Your Flash Web site or application is, I am sad to say, only one of millions on the Internet. If you want your site to stand out, it had better look good and work flawlessly. This section covers the four basic tenets of good design: simplicity, usability, flexibility, and consistency.

Believe it or not, it's far easier to create a complex and confusing design than it is to create a simple, usable one that makes fast sense to your customer and is flexible enough to grow with your client's needs. Consistency of design is also key to making your customers feel comfortable as they work through the site. Master these four design principles and you'll be well on your way to creating a site or application that people not only visit, but come back to again and again.

Simplicity

You've heard the acronym before: Keep It Simple, Stupid. Why? Because a complex design can confuse your message. Flash frees you from the design limitations typically associated with HTML and CSS, which means that by using Flash you have more power over your site and application design than ever before.

Unlike with HTML, when using Flash you aren't limited to using a handful of fonts or working with tables to create a design. You can use any font you like by embedding it directly in the Flash movie. You also don't have to struggle with object placement or worry that your site is going to look different from browser to browser. Thanks to the Flash Player you only need to create one design and it will work well everywhere.

With great power, however, comes great responsibility. You'll need to practice responsible design to create good-looking Flash sites and the best way to do this is to keep your design simple. Less is more.

Usability

At last count, there were over 8 billion Web pages and as many as 20 million new pages being created each and every day. That's a lot of content. So why do we find ourselves going back to the same sites time and time again? You know what I'm talking about—you might check Yahoo!, CNN.com, or InformIT.com every day, maybe even several times a day. Of all the millions of pages out there, you decide to come back to your favorite sites because they're usable and you know where to get the stuff you need.

To create a usable design, you need to pay special attention to general screen layout, navigation, and branding.

When you look at a Flash movie, your first impression is based on its overall design, or general screen layout. How do you create a general screen layout that appeals to your customer? Know thy audience! In the US and Western Europe, for example, we read from top right to bottom left. In Asian countries, the opposite is true. This is a cultural issue and one you need to negotiate with your client when you begin design work.

As you build your application, bear in mind how users will find content, or "navigate" your application. There are many ways to create navigation systems. In a Web browser, for example, you use "Forward" and "Backward" buttons to move through pages. A software application, however, might use menus along the top of the screen to take you to different parts of the application.

The following is a screen shot of Amazon.com. Here, the navigation is simple and clear with links at the top of the screen and a minimum of clutter.

In contrast, this personal Web site is cluttered and hard to navigate.

Clear branding is also important to building a well-designed, usable site. When customers visit the Target Web site, for example, they expect it to have the same look and feel of a brick and mortar Target store. They also expect to see the red Target logo that they've come to associate with the Target brand.

Building a solid brand and incorporating it into your applications are things you can easily do yourself, but I'll cover that in a future section of this guide.

Flexibility

Keep your design modular. Applications are constantly evolving so you'll want to be able to change elements, such as logos, quickly and easily. Web sites also need this type of flexibility. Hallmark.com, for example, used to dynamically change the layout of its site to reflect upcoming holidays.

Fortunately for you, tools, such as Flash Components, can be changed through ActionScript. You can also link elements of your Flash movies through "Linked Libraries." I will cover these two features in more detail in the next section of this guide.

Consistency

Mind the learning curve! As a customer works through your Flash application or Web site, you need to reduce the amount of learning required to use it by keeping the design similar from screen to screen. By keeping your design consistent throughout the site or application, your customer is then focused on working with the content rather than navigating it.

Good examples of inconsistently designed sites are company intranets. Large companies often find pockets of Web developers that want to place their own brand on the company intranet. This is great for personal expression, but lousy for employees trying to find the right information. If I have said it once, I have said it a hundred times: Keep it simple!

Flash Templates

Looking for a jumpstart into Flash design? A good way to start is by using a template. There are many commercial sites selling pre-packaged templates you can use for your Flash sites. Some are good, some are awful, and some are great. You need to dig around and get feedback from other users to find one that works well for you.

Good places to buy templates include:

The Bottom Line

When creating the overall design for your Flash movies, keep in mind that they need to be simple, usable, flexible, and consistently designed. The bottom line is that you're trying to gain new customers. Overly verbose design or poor layout will kill your project before you even get it out of the gate.