With 2009 complete, we can take a good look back and realise that it was a great year for web design. It’s time to reflect and see what redesigns really were the best of the bunch from such a great year. While redesigning Inspect Element, I took the time to see what other sites had done to reinvent themselves and breathe new life into their projects. Here are just some fantastic examples from the last year and what makes them so great.
Carsonified
The first thing you notice with the new design is how adventures they are with the combination of typography, colour and illustration. You know what stands out for me amongst everything? The simplicity. Something that I hope is carried over into 2010 as a ‘trend’. Included is everything that is necessary and nothing more. It’s this simplicity why I think Carsonified is one of the best redesigns of the year.
National Rail
Here in the UK we struggled along with a boring and out of date design for our national rail services so to say a redesign was long overdue is understating it ever so slightly. But here we are in 2010, witness to a great redesign, especially when compared to the previous version, making the list due to the vast improvements it makes achieves.
Form design has been improved substantially from the old design. It has now been made the primary focus of the site and rightly so as it is the most used feature on the site. A smart redesign tip is to realise what your customer wants and give them exactly that.
They’ve also done a good job of simplifying by removing unnecessary content from the homepage. At the time of writing they’ve simplified the page even further due to the heavy load as customers flock to the site to check the latest travel news and how it has been affected by the huge snowfall we’ve had across the whole of the UK, demonstrating that this is something they’ve paid attention to in the design and build.
CNN
CNN redesigned their site towards the end of the year and received a lot of attention. Deservedly so. A bold header with a centred logo is very well laid out and immediately memorable. Much more so than their previous than their dull white header. The grid layout displays content in a way that is easily scannable.
CNN have certainly not forgotten that a redesign isn’t all about the visuals as their story highlights section demonstrates. A great addition that certainly helps people digest information easier in a world where we can get information whenever we want, however we want. Make a note of this and learn that redesigning websites isn’t just bout making everything look nicer but to improve the experience and great ideas like this can go a long way.
The White House
Barack Obama promised change to the American people and they’ve certainly got that even if you just look at the official White House website. To get an idea of how good the redesign of The White House is, take a look at the just how ugly government websites can be.
It has the elegance that one of the biggest countries in the world requires, treats whitespace with respect, has great typography, makes good use of both shadows and gradients and makes excellent use of the footer.
Manchester City Football Club
Recently cited as one of the reason why the English football club made the biggest loss in the history of English football, the redesign of Manchester City’s website is worth every penny. It is another example of keeping things simple to the benefit of the visitors.
Great imagery is the order of the day here with big spaces set out for high quality photos on every single page and really helps communicate the message along with the bold typography.
Redesign of the Year: Engadget
The redesign of Engadget is a great example of taking something that wasn’t necessarily bad and turning it into something truly special. It demonstrates how fast the world of web design moves. Before the redesign they were certainly one of the most successful gadget sites on the internet, if not the most successful. Not resting on their laurels and while on top of their game in the world of content creation, a new version was released that takes their gadget coverage and news to the next level. This is the act of a forward thinking company and I like it.
As the screenshots below show, one of the best aspects of the new design is colour. Probably some of the best use of colour seen all year, used in the first couple of examples to show the most posts in a day and most comments on a topic by using the heat colour model.
With Blue representing cold for lower frequency rising up to red hot for the other end of the scale.
Colour is also used well to clearly present breaking news articles as seen below.
Not only that they use colour on their social sections. Light blue for Twitter and dark blue and yellow for digg. These match the well-known colour schemes for their respective sites but Engadget are able to keep the style consistent with their own brand.
Due to the almost overwhelming amount of content they publish, the top stores section gives readers the opportunity to keep up to speed with the more important articles and news. They achieve this with a layout that almost looks unique every time you see it, therefore catching your attention.
The header section is used to great effect. First off a very noticeable red bar appears at the top of the page whenever they are covering a live event, especially popular when Apple are in town.
Below that is an area used to display what I can only describe as their flagship articles or promotions with a simple tab system to navigate between them all.
All of the above come together to form a cohesive design where not one section is overpowering another, where colour is used to great effect and ultimately evolve a design that many didn’t think needed evolving. Until now.
Your Thoughts
As usual, add your thoughts in the comments and let me know what your favourite redesigns of last year were and why.
These are the redesigns that I’ve focused on and I know that there are many many more that could comfortably make the list but it’s best to not go overkill and instead keep focused on a few examples rather than a boring static list of 50.
Tom, you really chose some of the best redesigns of 2009.
First of all, Carsonified is simply amazing. I really love the way they display their portfolio. It’s very creative. Mike Kus is really pushing the limits when it comes to web design and I really like it.
As far as the White House redesign, I really find the redesign to fit the White House. It’s a very dignified and elegant place, and the website reflects that. It’s a very classy and tasteful website. Great job by the designers on that.
Lastly, I absolutely love the way Engadget has implemented those colors in their Archives and Most Commented sections. It’s a perfect and bold use of multiple colors. Great job on this post.
Great post.. with well written reasons for each site.
You might want to change the a img:hover {transform properties} to img:hover {transform properties} for the post body. The images hosted on other servers are not htlinked by wordpress by default and thus they will not show the scale and shadow effect. Leading to random behaviour.
Of course that is my humble opinion.
All post images are hosted here on Inspect Element so no problem there. The CSS transforms only apply to images that are links, not to every image. It wouldn’t make sense from a usability point of view for every image to have transforms applied to them.
I absolutely agree with you. Engadget got one of the best use of colors implementation. Great post.
Strongly disagree about National Rail Enquiries. The site has serious layout issues: banners overlapping content, button graphics not lining up properly, image compression on footer graphics is appalling – even when the site isn’t in lite mode.
The lite version still has large footer images which if they’re trying to save bandwidth is ridiculous and is adding nothing except page weight. They’ve not thought about it at all!
When the site is not ’stripped down’, the panels and dividers look thematically different and make it a confusing mess. Even for someone web savvy it’s complicated and frustrating.
One of the worst site designs I’ve come across – dread to think how much it cost!
I haven’t seen the problems you have. If you remember what the old version was like then you will see why this was a good redesign.
Google Chrome on Vista throws up the button image problems (viewable now) and I’m assuming the ad ones too (though till they put the full site back I can’t check). The “National Rail Says” text is pretty tricky to read being virtually 100% page width. Also buried at the foot of the page – not ideal for such an important bit of text.
Seems a bit of a wasted opportunity, though I can imagine the hell the design team probably went through with a data heavy site and marketing department to contend with.
I don’t know what any of these websites used to look like. The article would be much more informative if it showed direct comparisons between the new and old versions.
agreed
Thanks for this article. But what good is this article without (images of) the old sites? How am I to compaire this way and determine if it was a succesful redesign or not?
Perhaps I’m missing out on something…??
I really don’t like the Engadget redesign – though the colour stuff is impressive and well implemented, the rest of the site has numerous issues – the most pertinent the poor use of typography and ineffective use of white space.
I agree about Engadget. While I agree, they’ve certainly made it *look* snappier and certain details are very well executed, overall I find it confusing and hard to read. I’ve stopped going there altogether since the redesign.
Redesigned Carsonified is just awesome!
First, it is amazing. Mike is really over the top with his web design and I like it. As far as the White House design I really find the redesign fits. I really love the way they display their portfolio. It’s very creative.
Thanks for sharing.
Must agree Engadget is a superb example of how to redesign a site with such a large community. I must also say your site is great. It’s the first time I have visited and I’m impressed. Keep up the good work Tom.
hummm I am also wondering how I can compare this to the old site designs…maybe it is for those people who use these sites already and therefore know the designs inside out.
Yeah, I was wondering the same. I guess mr Kenny is too busy doing other stuff…. :-7
This article is quite useless if one has never visited the “before” designs.
I disagree. While you may feel the need to look back at the old versions it isn’t absolutely necessary. I don’t know what many of them looked like before they redesigned. Instead, focus on what’s there now and not what was there before.
There’s too much of a ‘compare culture’ in the web design community. Look at these sites and see what they doing well and try to learn from them rather than being concerned with what they looked like before.
the whitehouse new page ist great the others are nice it´s gos better
Engadget’s design is just amazing! I really like how the designers play with the colors.
really nice redesigns.
Nice list.. wondering why didn’t u add Smashing Magazine in the list?
Wasn’t it redesigned in 2009? um maybe mistaken.. :/
I like the detailed explanation of the redesigns.. nice work !