Design the Home Page and Site Identity in Flash 5
This chapter is from the book
This chapter is from the book
This chapter is from the book
What to Expect from This Sample Chapter
Your home page is the first significant encounter your users will have with your site. The home page serves as a springboard for the additional movies that you will present to your viewers along the way. It's important to immediately convey that your site is worth visiting. The home page is also where you will establish your visual and functional footholds. Your choice of navigation should be intuitive and unobtrusive for the user, but always consistent.
The movies in the Flash Site Workshop have been constructed with usability and consistency issues in mind. You'll notice that each section is similar in color and the style of the graphics. Because the movies provided are prefabricated, one of the key issues you need to address is consistency of brand identity. The modifications that you make to the provided movies should be in line with the current look and feel of the printed material and other media of the company. It's likely that your company has a logo, letterhead, and brochures or catalogs—take these into consideration when you build your Flash site. If the client receives brochures, mailings, invoices, and even product packaging that are completely different than what they've seen on the Web site, their confidence in the product could diminish.
Whether your company has an established brand presence or not, the design choices that you make should be evident in each of the movies you modify. The colors, fonts, style of photography, and illustration should all be related to each other. The user shouldn't feel like they've jumped to another site each time they view a new category.
Flash offers a great deal in the way of sound and animation capabilities. It's up to you to make wise use of these tools. It's best to use the high impact elements only when they are necessary and improve the user experience. The introduction to your site is a good place to exhibit your skill as an animator; however, it's probably not wise to have a gratuitous spinning vortex of color right next to the animation of your product demo. Your mission is to create a site that will inform and help the visitor use the products and services offered by the company—entertainment is a sideline.
Probably the best advice is to assemble a design plan before you attack the modifications. Know what you want out the site, decide on the message that you intend to convey to your viewers, and keep that concept ever-present. Have a clear picture of the experience you want to create, and the end product will be effective. You will also save a lot of aggravation and wasted time in revisions later on.
In this chapter we'll explore your options for customization of the look, feel, and function of the navigation bar and the three key segments of the home page movie provided—the preloader, introduction, and the actual home page.
I've chosen to customize the site for a fictitious robot manufacturing company. My audience includes consumers who are looking for help around the house as well as current and potential suppliers and vendors who provide the company with parts, research and development consultants, and so on. One of the potential issues that the company identified early on was the customer's initial fear that the achines would be too complicated and time-consuming to learn to operate. In response to this, the robots themselves are marketed as a cross between an upscale household appliance and a toy-like a Tomagochi pet. The product should be as easy to program as a VCR and as entertaining as a video game. To foster this image, the site contains demonstration videos, tips, and tricks for programming the robots as well an online community message board for owners to chat and share ideas and experiences they've had with their robots. To convey the fun and ease of use of the product, the look and feel of the site is graphic and high-energy.
Navigation Bar Movie
The navigation bar provided should be used as a structure for your own navigation bar. You can modify the overall look of the bar to match your own design concept. The name and number of menu items will be changed to conform to your needs. Additionally, you have the option to change the animation of the sub-menu from a pop-up to a drop-down action.
I've chosen to present the Navigation Bar movie and the Home Page movie in the same chapter for more than convenience sake. They are two separate movies that act together. When the Home Page movie is played, a script in that movie will automatically load the floating navigation bar into the top level of the Home Page movie. A little later in this chapter, we'll explore how this happens and how to maintain the proper naming conventions to ensure the movies will work properly.
Home Page Movie
The Home Page movie is broken up into three segments—The Preloader, which loads in all the elements before the viewer can see the movie; The Introduction, which gives the viewer an artistic entry into your site; and The Home Page, which is the gateway to the rest of your site.
Preloader
You can customize the supplied code to ensure that all of your elements are loaded and ready to view before your viewer reaches the main body of your movie. The graphics and animations provided can be used as model for your own design.
Introduction
You can customize the sounds, animations, graphic elements, and a random quote generator provided to create a high-impact cinemagraphic entrance to the main content of your site.
Home Page
You can modify the graphics, color scheme, animations, logo, banner ads, and text to conform to your own company identity.