The CSS Awards
The CSS Awards select the best websites developed with CSS from around the world. The awards are given to only the best designers, agencies and bloggers in the online community. The Awards are selected daily under a strict system of valoration.
Initial Thoughts
I’m proud to say that DCQ, DesignersCouch and Depthskins have all been honourable mentions in The CSS Awards so it’s only fair to give mention back to this site. The CSS Awards is bringing a fresh spin back to the CSS Gallery website where there is a respectable panel of judges and detailed breakdown of design elements called ‘system of valoration‘.
There’s a refreshing look and feel to their site design; that is, no gradient. The flat colours keep it clean, simple and elegant. Another contribution to that refreshing look I speak of is the application of colours; these are vibrant and energetic so their brand character to me is one that is in line with that: fun and creative.
Layout & Navigation
I find the layout interesting because in most cases the logo and navigation are meant to be obvious, but at The CSS Awards it’s quite different. The navigation is tucked away neatly to the point that it requires users to seek it out.
You see, English readers read from left to right which means they do not immediately see the navigation and possibly take a few seconds to find it. One smart move that counters this is making the ’submit’ button green such that it pulls the eye over to the right. It is generally said that a user shouldn’t have to think to navigate your site and based on that statement the navigation might be a bit problematic.
With regards to the logo it’s not the first thing I see when I visit their website and this tells me that The CSS Awards are saying, “Hey this ain’t about us, check out these great designs”. Their priority is recognition and exposure to the designs in their gallery. Though noble, it might be questionable that they’re not giving their brand the priority most sites give theirs but to me it seems a conscious decision aimed at presenting content over anything else.
The CSS Awards: Rollover
I really enjoy the rollover on the site but I can’t help to wonder why some transparency wasn’t applied here like the drop-down navigation. The reason couldn’t be the worry of legibility because the navigation has this treatment. I think applying the same effect would be quite stylish.
The CSS Awards: Maps
It’s really great how The CSS Awards represent what they are judging and the map is one part I feel that contributes greatly to that.The pop-up animation is clean and slick and the drop shadow is well incorporated to make it pop.
Infographics
I think The CSS Awards did a great job at providing certain information to us, such as how designs are gaining points in each specific area. There are some things that confuses me a bit.
The CSS Awards | Left Column
When I first visited the site, the area below ‘Site of the Day’ was quite confusing. I am not immediately clear on what this section is except that they were featured on The CSS Awards. Are they previous ’site of the month’ winners? Are they people interviewed? Everytime I visit the site the content doesn’t change, why? It’s proximity to ’site of the month’ initially made me think it has something to do with it but a closer look tells me it’s not.
At the bottom is the legend for ‘system of valoration‘. Should it be at the bottom or the top? The way I look at it is that the top is a better placement because I learn sooner what each colour represents. This can help with my browsing experience. Placement at the bottom may cause some redundancy for the user because in order to learn what all these colours mean I had to look past all the data, find the legend then go back over again.
Yes, the list is short and while it’s not a big deal, the grey is so light and the icons so tiny that it’s easy to miss it and the interface is probing me to look for a legend I don’t know is there until my eyes meet it. I don’t think it’s fair for the interface to do that because things should always be obvious.
In the image above titled ‘The CSS Awards | Left Column’ please also note the area that says ‘Visualbox by Visualbox 7,01‘. What is 7,01? Should it be 7.01? Comma or point? If it’s intentional I’m unclear about what this means and if it’s a typo it’s an easy fix but causes some serious confusion on my part.
The CSS Awards | Feature
The part where it says 5 40 means 5.40 I’m certain. This to me would be more clear if the point (like 5.40) was included because to me this could be a fraction. A simple dot would not take away from design and improve legibility 5x.
For example, look at Wufoo’s price plan page. They use the same technique where numbers after the decimal is smaller and hyphenated. However, they included the point. They couldn’t say $5 95 even if the 95 is smaller and hyphenated.
Wufoo
Footer is not a Footer
I mean it in a good way. It’s hard to say this is a footer because it’s packed with useful content that’s actually quite important to the site itself. I found the ‘Last Submission‘ section quite informative and well laid out. I admire their usage of icons to indicate the status of the website. You know this is not just a footer because site of the month is here.
I find it all quite intriguing that this location is like a primary location on the site. Despite the ‘site of the day‘ being at the top, having that prime location, ’site of the month‘ is consistent on all pages. Very nice way of dividing up the site’s real estate and using it effectively. The point here is that location on your website is as important as you make it out to be.
In Closing
I love The CSS Awards because as previously stated it’s a refreshing CSS gallery. They’re simple and transparent. Much of what I stated here are details and another perspective on the design. At the end of the day it’s a great design worthy of recognition itself.
Feel free to call me out on any of the points above. Agree or disagree, I’d love to hear your thoughts.
-
andres Castillo
-
Daniel
-
reshe
-
dmadray
-
Gopal Raju
-
Gopal Raju
