Review Plus #1: Flash XML CSS Website Template

Review Plus is a new blog feature where FlashDen files get put under the microscope in order to help authors improve the quality of their work. Files will be reviewed for design, usability, functionality and features, and feedback will always be honest yet encouraging. We will always seek an author’s permission before publishing a review of the file, but the benefit to the author is free, constructive feedback with the added bonus of free file promotion!

We also invite other authors and blog readers to post constructive comments about their personal thoughts on the featured file, but please ensure your feedback is helpful to either the author or other authors reading. Offensive, unhelpful or irrelevant comments will not be tolerated, as the objective here is help all authors find new ways to improve their work. We hope that the entire FlashDen community will benefit from Review Plus and provide an insight into how the quality of your work could be increased.

First up is brave FlashDen author egobuilders who has kindly allowed us to examine one of his recent uploads to FlashDen.

Author: egobuilders
File: Flash XML CSS Website Template

Overview

This Flash Web site template is packed with features. It includes scrollable content maintainable via XML, an image gallery, an mp3 audio player, fullscreen mode, a PHP contact form, and draggable content.

First Thoughts

The first thing a user will see when they first view the site are the colors used in the design. The colors are very bright and the interface has a glossy “Web 2.0″ feel to it. The positive thing about using bright colors is that it will of course catch a user’s attention. However, the downside to this is that having colors so intense may also put some people off quite quickly. It’s a double-edged sword.

Color

Color is very important in design. Having the right number of colors is important and choosing the right colors is also important. One recommendation for the appearance of this file, or a future file, would be to consider using colors that not only compliment one another, but work well with the background color. Consistent use of color is also important. Note how there are different hues of blue in the audio equalizer, the navigation buttons, and the text. By perhaps using the same hue of blue, a more consistent and pleasing design may have evolved.

There are various color tools available online for free that are perfect for finding and creating color palettes that work well together and compliment one another. Here are some examples:

• Color Scheme Designer
• Color Schemer
• Color Blender
• Adobe Kuler
• Color Palette Generator
• Color Lovers

It’s important to point out however that egobuilders has clearly stated in his file description that the appearance of this file is totally skinnable. So sometimes, certainly as a customer of stock Flash files, you have to look beyond how a file looks straight away and understand that you might be able to take advantage of all the cool features of a site template like this, and then simply add your own design to it.

Who is the audience?

One of the first questions you should always ask yourself before designing anything is, who is the audience? You should spend some time thinking about who it is you are targeting with your file and who will buy or use your Flash file. Then think about if you are giving them everything they need. From the content on this site template for example, we can see sections titled “About”, “Contact”, “Customer Service” and “Client List”. It would seem from this therefore that this template is intended for a business rather than a personal portfolio. If that is correct, then perhaps the design of this site should be more subdued. A design that is cleaner, simpler and easier on the eye can be used by more people in many different ways than if you present your file with a very specialized and unique design to it as this file does.

It’s worth pointing out at this point that the comments to egobuilder’s file on FlashDen are overwhelmingly in favor of the rainbow gradient design, so like most opinions design on design, “beauty is in the eye of the beholder”.

Fonts

As a general rule, try to always use the same font in your file. I see multiple fonts used in this file, different font sizes, different text effects/styles such as glow and tracking, and different font colors. Again, consistency is good, and one way to accomplish a consistent design is by using the same font.

Draggable Functionality

A cool feature of this file are the draggable elements. The content window and the navigation menu can both be dragged around by the user. Two important things to think about here. Firstly, is it immediately clear to the user that these sections are draggable? I’m not sure it is. There are a few good ways to alert users to draggable content in any kind of user interface. Firstly, and perhaps the most obvious solution, is to have the text “Drag Me” on any item that is indeed draggable. A more subtle approach however would be to add a little “tactile” feature / effect such as a small block of vertical or horizontal lines in the corner of a window to signify the area is draggable. But better still, perhaps add a tooltip to any interface element that is draggable that opens-up when the user first rolls over it which informs the user that something is draggable.

The second point to make about the draggable interface is, is it necessary? Is there an added benefit to having part of this template draggable? Sometimes the answer will be yes, and sometimes the answer will be no. The point is, just because one can program something or include it, it doesn’t mean one should. It’s important to justify everything you include with a file based on the needs of the customer and/or the purpose of your site template.

Navigation

One observation I made about the navigation on this site is that there are multiple navigation menus. There is a horizontal menu at the top of the page where it says “Home” and “Contact”, and then there is a separate, vertical navigation menu for all other content areas. If there’s not a valid reason for doing that, I would always recommend having one navigation system. It’s always easy for a user to navigate through a site when there is only one navigation element to deal with. It reduces the learning curve, promotes interactivity, and encourages a more cognitive approach which helps users learn and remember where to find things (the navigation) more efficiently.

Logo

The “Inspire” logo that floats at the bottom of the page is an interesting concept. It repositions itself on browser re-size. This is purely subjective rather than a hard and fast rule, but if this site is for a company, then the logo ought to go at the top of the page instead of at the bottom, and perhaps it should remain static in one place too instead of moving around. It may also be a concern that the “Inspire” logo overlays itself on top of content when the browser is drastically resized. Looking at the feature positively however, the author has obviously thought about how important the logo is, and is at least repositioning it and making it noticeable even when the user changes the size of the browser.

Conclusion

I like that the author has explored some creative freedom with this file. The author is quite obviously a good coder judging by the many features of this file, all of which are well executed. However, I think that the design of the file will ultimately split opinion. Some users will like it, some may not. If the objective is to sell a lot of files, it’s important to remember that a design that is too daring, may alienate your audience instead of uniting it.

Thank you again to egobuilders for allowing us to constructively review his file. It includes a ton of features such as an XML and CSS backend, an mp3 player with unlimited songs, draggable navigation, a PHP contact form, an easy-to-update slideshow gallery, fullscreen mode and much, much more!

If anyone else has any constructive feedback on this file that would be useful to other FlashDen authors, I encourage you to share your feedback in the comments!

Would you like your published FlashDen file reviewed? Or perhaps you have a file that you are working on that you’re not sure will meet our quality standards and would like us to review it on our blog? Then please send your FlashDen username and a link to your file to me at scott AT flashden DOT net and include “Review Plus” in the subject of your message. Perhaps your file will be featured soon!

Scott

Scott is the Down the FoxHole blog editor. He is also a reviewer for ActiveDen. Scott is a freelance Web and Interactive Media Designer having previously worked as the Lead Web Designer for a well-known children's hospital in the US for 8 years. Follow him on Twitter @scottwills

• The Foxhole Has Moved!
• CodeCanyon, 3DOcean and Jason - 3 New Members of the Family!
• Holiday Giveaways, Freebies and More!