Web Design Critique #13: Annual Design Awards
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 as well as those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today’s site is Annual Design Awards.
19+ Million Digital Assets, With Unlimited Downloads
Get unlimited downloads of 19+ million design resources, themes, templates, photos, graphics and more. An Envato subscription starts at $16 per month, and is the best unlimited creative subscription we've ever seen.
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $24 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.
About Annual Design Awards
“The Annual Design Awards (nicknamed ANNDAS) is a global recognition of cutting edge visual communications, set up to reward outstanding contributions within the Design industry. We have brought together some of the most amazing talents and respected figures from around the world to judge this global event which aims to become the premier design awards and set international standards.”
Here is a screenshot of the homepage:
Overall Design
I want to start by saying that this is already a great looking site. I love the black in conjunction with pops of orange. This single repetition of a bright color helps draw the users eyes to the important parts of the page.
The layout is solid and contains plenty of white space. Also, the visual volume of the objects is well-dispersed so that the important areas are highlighted.
Fortunately, it seems the folks judging the design of others have a strong sense of design themselves! Now that we’ve analyzed the whole, let’s break it down piece by piece.
Logo Area
Let’s start in the most obvious place: the top left. Here we see the Annual Design Awards logo a sort of radiating circle graphic.
The logo is simple but effective. It suggests a young and edgy audience not too keen on clean lines and boring minimalism (the site is actually fairly clean, but in a sneaky sort of way).
The circles are a bold idea executed in a subtle fashion (tastefully done). It’s a really simple design element that helps draw your attention to the logo and consequently the name of the site. This wouldn’t work on a cluttered site but this page is simple enough that it doesn’t make for a visual mess and instead accomplishes its purpose perfectly.
Navigation
The navigation area is quite simple, just some text above a horizontal bar with breaks for each section.
I really like the font choice here. It feels like something custom done with @font-face so I was surprised when I peeked at the code and saw that it was simply Georgia italic.
Hovering over a section highlights the bar in orange. This is nice but it feels a little odd that the text doesn’t do something as well (this is quite nit-picky but on great looking sites I have to talk about something!).
I can understand why the designer didn’t change the text as well as it would likely get a little hard to read small orange text on a black background. Perhaps a very slight CSS-transform to rotate the text on hover would help. It’s no big deal if it’s ignored on older browsers and it would be a nice nod to the logo style.
Slideshow
I love JavaScript slideshows so I think this section is great. The picture slides left as a new one pops up and the text has a nice fade out effect. I also really like the transparent border and crop marks.
However, the play and pause button here just aren’t cutting it for me. I saw a graphic go by that I wanted to look at again but had no way of going back. Consequently I was forced to wait for it to come around again (which took a while).
I recommend putting a line of little circle icons that link to each image. It’s simple and subtle and gives the user both a sense of where they are in the slideshow and some control over seeing specific images.
Entry Section
The next section is where users would normally sign up to enter, however, this is closed for the time being as indicated by the sticky note graphic.
The sticky completely violates the design (intentionally) and makes it so that you can’t miss the fact that submissions are closed. This works well and immediately informs users of the information that they need to know.
The graphics under the sticky are a bit distracting though. The prices seems oddly placed, with one bumping into that rectangle box on the left and the other not bumping into it. Not sure exactly what’s happening here but it seems a little off.
Footer and Contact Form
The last area we’ll look at is the bottom of the page where you can sign up to receive information. There’s also the standard footer links and social info below the contact form.
I like that the contact form is nestled in here rather than on a dedicated page and that there are only two fields to fill out. I noticed that the field labels disappear when you click in the box and don’t come back when you click out without typing anything. This presents a bit of a usability issue as I was clicking around on the page but then wasn’t sure which box was for the name and which was for the email when I came back.
Finally, the footer area looks great but I’d like to see some space between the words “Follow us” and the accompanying icon. Right now they’re a bit squished together.
Your Turn!
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 devoid of any harsh insults.
Interested in having your own site critiqued? You can find out more here.