Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today’s site is FlashXML.net, a Flash components marketplace.
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.
There is an ever-growing industry of authors creating Flash assets. The majority of these so-called Flash components (more than 95% on the web today) are actually just editable FLA files. The FlashXML.net team strives to set a new standard by building the best Flash components available, fully customizable without the need for Flash software or any specialized skill other than using your mouse. We have been developing Flash components for more than four years now, and we plan to blow you away with every new release!
Here is a screenshot of the homepage:
My initial thoughts for this site are fairly positive. It’s attractive, well balanced and communicates its message clearly. The color palette uses the standard three color technique with two primary colors (white and black) and one emphasis color (red). There’s plenty of strong color contrast to define each section and keep your eyes interested.
Overall, a job well done! Let’s take a closer look and see if we can find anything that needs to be improved.
There’s a lot that went right in this header. I really like the subtle background graphic: just enough to add some visual interest without being a distraction. I also love the sketchy theme that I see here and repeated elsewhere throughout the site.
The icons are simple, attractive and instantly readable. The designer did an excellent job of taking a ton of information and reducing it to a very small and easily readable space. This is definitely no easy feat.
That being said, when I take in the header as a whole, it definitely feels like there is a lot of stuff competing for my attention. Headlines, subheads, two navigation menus, sales pitches, a search bar, social icons, it all has a reason and a purpose so I’m not sure that I’d recommend ditching any of it, but a very slight restructuring of the hierarchy might go a long way.
One of the best ways that I’ve found to think about visual hierarchy is to reduce the design to simple shapes and analyze the distribution of the whitespace and how it relates to the volume of each element. Here’s the basic layout of the header:
When I look at this distribution, I don’t necessarily feel that anything does a particularly good job of standing out in terms of size and whitespace. To structure your design a little better, try choosing the most important thing and giving it an obvious boost in visual volume when compared to the other elements.
Which piece this is ultimately comes down to the choice of the designer and the client, but let’s say you wanted the headline to be the primary focal point here, you might rethink the space to look more like this:
It’s a subtle change, but when incorporated into the actual design, this would definitely direct lots of attention to the headline. Similarly, if you wanted to put more emphasis on the sketchy elements, you might come up with the following distribution:
The header and footer both hold a ton of text content, so it’s good that this section is fairly visual in nature as it helps provide balance and some eye candy for those looking for it.
In contrast to the header, which could use some restructuring, this area has a really great layout comprised of three visually distinct but well integrated sections. Here we see a reappearance of the sketched look on the left, a great use of repetition.
I also really like the little “Become a Member” box. It’s attractive element that stands out well while remaining consistent. The design of the box is a perfect picture of current design trends, utilizing subtle grays in conjunction with those popular single pixel strokes.
One thing in this section that gets me thinking is the sample Flash component. It strikes me that, on a site with the primary goal of selling Flash components, I have to scroll awfully far to see one in action. If a complete redesign is ever in the works, I’d recommend building the header around one of these image sliders.
It’s good to show visitors right away a big, impressive example of the product in use. After all, if you can’t seem to incorporate your products as a major design element, how am I going to?
Venturing off the homepage, take a look at some of the individual product pages. They’re actually really slick. Once again we see a solid example of taking an unbelievable amount of information and even interaction and organizing it into a highly usable and attractive space. I like the use of bright primary colors and the box-driven organization strategy. This is definitely a page to bookmark and check out the next time you’re struggling to simplify a busy e-commerce page.
Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.