Flash-dominated Web sites

This post will focus on a Flash-intensive Web site and describe whether or not the site effectively blends Flash and traditional HTML without compromising the overall site design.

After browsing through several Flash sites, I found the http://lab.mathieu-badimon.com/ site most appealing. The site is an interesting example of mixing unique visual design with Flash animation and scripting.

Home Page
The site’s home page includes seven different Flash animations to choose from, as shown below:

The home page and the seven different animation boxes are an interesting study in the elements of visual design. The subsections below describe several of these elements as they relate to the site.

Color
The default color for all seven animation boxes on the home page is black on a gray background. On mouse-over, each box changes to a vibrant color (e.g. the Block Clock box changes to bright orange and the Liquid Form box changes to neon green). This color contrast adds an exciting layer of interactivity to the home page. See the screenshot below:

Figure and Ground
Each animation box on the home page also moves on mouse-over, which creates an eye-catching figure/ground dynamic. The user is given the impression that the animation boxes float above the ground.

Format and Orientation
The scroll bars that appear on the bottom, left side and right side of each window allow users to alter the format and orientation of each page. This gives users a sense of control over the orientation of the animation. Each page is transformed from a static vantage point into an animation that can be viewed from a myriad of angles. See screenshot below:

Unity and Typography
The color schemes, page layouts and consistent use of typography, give the site a sense of unity. This is not easy to accomplish on a site that includes seven different flash animation pages, but each animation seems to belong to a single set due to consistent use of visual design techniques.

Grid
Most designers rely on a grid system to establish consistency, unity and order. Each animation subpage employs a consistent grid layout; the links that jump back to the homepage are always in the same location (upper right hand corner). The site is not easy to navigate, but the adherence to a grid helps.

Accessibility and Navigation
The homepage along with the animation subpages load quickly, but not as fast as static HTML-only Web page. The designer compensated for the slower load times by distracting the eye as a page loads. While an animation page loads, a well-designed progress bar crawls across the animation box. This lends a sense of rhythm to page loadings and is certainly better than staring at the detested ‘hourglass’ pointer while a page loads.

Like many Flash-heavy sites, the http://lab.mathieu-badimon.com/ site is difficult to navigate. For example, after initially loading an animation page, it was not clear to me how I could return to the homepage. As mentioned earlier, once I understood the grid layout, I was able to find the return to homepage link on each animation page, but if the viewer orients the page at an odd angle, the return to homepage link may be obscured.