Designs of the Year: 2009

At times I probably come across as too cynical in regards to the state of design on the web. However, I have a great respect for a large amount of the work that is being done by people around the world. This can be seen by the many sites that I admire in the Drawar Gallery. Like other galleries you come across on the web, they only go so far as to show you what sites a person likes, when many times people want to understand why a person likes a certain site. With this in mind I wanted to showcase some of my favorite designs of 2009 and provide some explanation as to why I have selected them.

What makes these sites special in my mind is that they don't go overboard in trying to wow you. Their "wow" factor comes from the many subtle nuances that they provide. Many of them go unnoticed when you think about them individually, but when you combine them all they make for a memorable design. I can only hope that after going through these designs you to have a better appreciation of what it takes to bring together a cohesive design.

Note: It is quite possible that some of these designs existed before 2009, however they were only added to the gallery in 2009 and therefore every design was open for selection. As we move forward to 2010 and beyond you should start to see sites included during the year they were made. Also, there is no point in asking me why I didn't include a certain site, everyone will have their standouts, these were mine.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Sid Lee

I am going to start this off with a Flash site. Flash has been on the way out for a couple of years now, but there are still plenty of good reasons to use it and if done correctly the results can be amazing. Sid Lee is a great example of a Flash website done well.

What I love about this site is how well it flows. I never found myself questioning what I should do next because the site made me want to explore all of it. The choice of using black and white as the primary colors allow the actual work (portfolio) to stand out. The typography is easy on the eyes and the grid/layout throughout is well-structured.

Could most of this be done in XHTML/JavaScript? I'm sure it could be, but that doesn't take away from the fact that this is simply a well-executed and superbly designed site. Even if you never intend on using Flash for a website don't let this take away from the fact that you can learn a lot from this site. Unlike many other Flash sites, the ones that give Flash a bad rep, this one isn't in your face. If more Flash sites were done like this, the world wouldn't have such a distaste for it.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Billy Tamplin

Blog design isn't easy. You might think I am insane for saying so, but with so many great blogs out there filled with wonderful designs it is a huge challenge to create a design that is memorable. Billy Tamplin is able to pull of this feat while also producing some great content. If you read Minimalism is Mandatory you can understand how it can be hard for a designer to create an intriguing design without over-designing it. Nothing on this site seems forced and I can justify why every design decision was made from the huge images unique to each post to the typography and box borders implemented.

Not only does he go with a dominant colored scheme (blue), but he pulls it off while using a background pattern that runs throughout the site.

The navigation isn't unique, but the tabbed backgrounds are and it is something as a user you wouldn't notice for longer than a couple of seconds, but something you won't forget.

My biggest gripe would have to be the flash of the typography when the browser is loading the appropriate font. There are more and more techniques to improve the load time of externally loaded fonts and I hope that this site implements them soon.

Did I mention I love how each entry has it's own achievement icon? I did? Well I do and I love it. Sit down and actually look at every piece of the site and while many of the elements don't stand out to you immediately, hopefully you can see that when they are all combined they make for one spectacular design.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Sourhaze: EP 1

I want you to take a second and think of all the musician-based websites that you have been to and let me know if you found the same trend of loud music, crappy Flash and an overabundance of too much going on as I have. If the purpose of a music website is to sell music, many of them fall short of their goal. Sourhaze on the other hand presents you with a design that is soothing and only presents to their audience what they deem is necessary.

If you are going to sell music, give us the music. This website shows you the tracks front and center. You get a short description and a buy button that doesn't overwhelm you.

The real beauty of this design though is how it perfectly matches the type of music Sourhaze is selling. The background gradient is smooth and asymmetrical and instead of trying to be a dominant element in the design it does what backgrounds do best, stay in the background.

I guarantee if more music websites were this focused on their designs, they would sell more music.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

TweetCC

First let me state that Andy Clarke is an ass with a horrible sense of fashion who just happens to have a rare eye for great design (/laughter). Now that I got that out of the way this site is a great example of how effective CSS3 will be in the future for helping designers realize their visions on the web. Before you take another step and being your bitching and moaning of how most users won't be able to see these effects let me tell you that I really don't care. While I do believe that everyone deserves equal access to websites, I don't feel that everyone has to view them the exact same way. You don't complain about everyone in the world not being able to drive a Bentley, but you would be even more upset if everyone wasn't given the right to buy a car. To hold off on creating a great site because some people won't see all of its effects doesn't make much sense. Push the limits of your design with the technologies presented to you and sometimes you will have to wait for the world to catch up. So what.

The background changes with every page refresh, which isn't a necessary addition, but one that if you notice goes a long way in helping you appreciate the time and effort it took to put this site together. Not too often are we able to go to a site and fall in love with the typography of it all, but when the reason the page leaps off at you is because of the typography, then you have a great site.

Another site done by Andy that follows the same trends is For A Beautiful Web.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Maryland Institute College of Art

No reason to beat around the bush here, the majority of college and university websites suck. I hated going to my school's website because even though I had been there a million times before I always had a hard time finding what I needed and reading the small words hurt my eyes. MICA is a great example of a educational website that gets the right message across. It wouldn't be too good if a college of art couldn't produce a site that matches the quality of its education, but MICA doesn't have to worry about that.

Not too long ago I came across an article (since taken down) that talked about the negatives of using a grid-based layout and one of the negatives was that grids are too restrictive. This obviously isn't true. The only restriction is the imagination of the designer. MICA uses a grid structure, but you never get the impression that the designer(s) felt constrained. In fact, you get the feeling that they embraced the grid and wanted to push it as far as they could while still maintaining a solid structure.

The images don't overwhelm you and I love having the logo and navigation, typical header elements, more in the middle of the page. If more colleges pushed harder on their design then you would probably see an increase of students looking to enroll.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

idsgn

Not sure what I can say about this design that hasn't already been said by others. When I think about what a design blog should be, this is what I envision. A design blog that places emphasis on its design realizing that the content is the design. Too often we come across design blogs that try to show off the skills of the designer outside of the content they are trying to present. Flashy background images, huge pictures that have nothing to do with the site or some out of this world JavaScript that does nothing more than to move a box two pixels.

idsgn rolls out the red carpet and gets out of the way of the content.

With this design it is the attention to detail that helps this site rise above others. The typography is great and the buttons and icons shown throughout are beautiful yet understated. Blockquotes are great and how images are used in each post are something I enjoy.

There is even an ad that doesn't kill the design. If you run a design blog, take the time to look this one over and understand the importance of paying attention to the little details. I know I can learn a lot and apply it here on Drawar.

My only issue and this is the same one I had with Billy Tamblin and that is the flash of typography that occurs at the end of the page load.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Tennessee Vacation Trails

This year was a great year for JavaScript junkies looking to push the envelop of what could be accomplished on the web. The team over at Designsensory never seem to disappoint with their sites for Tennessee and this one is no exception.

It amazes me that Flash isn't used on this site, but good ol' JavaScript. It really starts to push the developer's imagination. However, this site isn't all about what is happening under the hood, the frontend is just as beautiful.

Not too often do we get to let pictures be the actual content to a site and when we do get the chance, many times we go over the top. Designsensory has done a great job of using imagery to draw the audience in and encourage them to explore. The site itself is intuitive, so the lack of too much verbose content is a plus on the design of things. And I always like to give props to a designer when they can make brown work on a site.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Bobulate

Maybe it's because the web and specifically the blogging scene have changed so quickly, but when you come across a site that is a page filled with nothing but the content that should be read it is refreshing. These type of sites used to exist all over the place, but then people wanted to monetize their sites and that led to a change in design decisions. Quickly, blog design became more about showcasing past content and trying to encourage the user to click to a new page even if they hadn't read the content yet than the present content that should be shown now.

Bobulate is exactly what your eyes see, but the beauty in its design is probably understated more than we like to admit. These types of designs are deceptive because we look at them and immediately say that we could design something like it, but the same can be said of drawings when we place a piece of paper over them and trace the lines. If so many of us are capable of producing such beauty then you have to wonder why we don't see it.

From the typography to the color choices, this site just seems as though every decision made was the right one for the site and the content it encapsulates. Like tweetCC the typography and therefore content, is the design. Do you look at the site and feel that it is missing something or more should be added to it? I don't and to me that is what makes it so beautiful.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

pikaboo

I might not ever say this again, but as designers, developers, UX people, IA/IDs and web people, I think sometimes we either put too much emphasis on the structure of the site or maybe we just overthink it. Sometimes a site should be exactly what it is meant to be. If you are creating a site to showcase the work you have done, then let the work be the site. How many times have you seen the site of a design agency filled with words that you didn't bother to read? It happens all the time.

When you are looking at a portfolio what do you wish to see? The actual portfolio right? pikaboo provides that front and center. Sure the site won't win any SEO awards, but many times you don't need to be great at SEO, especially if you have a beautiful site like this. Each time I visit the site (every couple weeks/months) I am presented with a new background. How often do we finish a site and leave it till we decide to do a complete redesign?

The navigation and sub-navigation are apparent, but not blatantly in your face that they take away from the actual content. Working with so many images you have to be careful since you can easily create a distraction for your users, but here I think they pull it off pretty well. In the majority of cases I prefer the background to be kept in the background, but it is the background and how it is used that continues to draw me back to this site. Wonderful.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Area 17

Again, sometimes you look at a site and you tell yourself you could easily produce something of the same quality and yet rarely does it happen.

• white space
• typography
• clean
• grid
• colors

It all works with this design. Nothing feels out of place and nothing feels like it needs more.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

School of Visual Arts

As I mentioned with MICA, you would be hard-pressed to find an educational website that has a quality design behind it. Fortunately, The School of Visual Arts gets it right with their design.

When I say the pieces all seem to fit together with a site this is a great example. I'm not sure if it's the logo or the red and blue that get me, but something (if not something, then everything) just continues to pull me towards this site. Some images could have definitely been applied to the design to showcase some of the work being done by students and faculty, but I never found myself looking for any. When you can pull off a great design without the use of images and simply through a use of proper white space, typography and a grid, then you are doing things right.

Not every great design jumps off the page at you as the most brilliant piece of art ever, but when does it have to be like that? Sometimes the best designs are the ones that can last over long periods of time and to me this design can last them through the next decade.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Blik

Chaotic beauty is a term I like to use when I see something that seems as though it was thrown together, but within the chaos you find reason. Blik appears at first glance to be all over the place, but in deep inspection it isn't. What amazes me is that this is an e-commerce site that doesn't try to push itself as one.

I love the strong use of photography to showcase the actual products. I love the different boxes to showcase varying sections of the site. Notice the subtle use of a background image and how parts of the header and footer leap off the page like a post-it note on a wall.

Next year you best believe I will be purchasing many of their products.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Mission Bicycle Company

In my opinion e-commerce sites are the hardest sites to design for because in your mind you are thinking about everything you want to say to your audience, but the power lies in how much can you hold back. With Mission I feel as though I am being told a story and not having a product being thrust upon me.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

iA

This might be the one site on the web that comes to mind when someone asks me about a great example of white space. Nobody has ever asked me that question before, but I like to be prepared for when they do.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

MIX Online

Scroll down to the footer and you will see a word there that you aren't used to seeing when it comes to great design: Microsoft. I am going to be lazy here and avoid going into detail and just tell you that you should explore this site and pay close attention to everything. Personally, I am naming this one my site of the year.

On to 2010...

With each new year brings another set of innovations and trends and hopefully we can build upon the great progress that was made in 2009. Although the majority of the sites out there still look horrible, it seems more and more companies are becoming aware of the importance of great design on their sites. As designers, this doesn't mean we should slack of and stop carrying the design banner, it simply means we have to push harder for what we believe in. Here is to a wonderful 2010.

Please share your favorite designs of 2009 and why they stood out to you and don't forget to spread this article around. It wasn't easy making these big images.