The Design Of the Vancouver 2010 Olympics Website
As you probably know, the Vancouver 2010 Olympics are just over a week away. If you take a walk around the city, you can see the beautiful venues and locations. You'll also see the 2010 Olympics logo on just about anything. Another huge part of their branding is their website, Vancouver2010.com.
I came across the Vancouver 2010 Olympics website, and after staring at the nice colour scheme for a minute, I also came up with a few ways that it could be improved even more.
A good website is very important for just about any organization or event. In this post I'll talk about the good and the bad of the 2010 Olympics website.
The Home Page
Of course, the first thing to look at is the home page. It's the first page of the site that I saw, so it gives me a first impression of the site, and what to expect from it.
Upon loading the site in my browser, the first thing I notice is the use of colour. It is a very nice, colourful design, with mostly blues and greens, with a few nice highlights in some sections with orange and red.
The second thing that I see is the navigation. The events are all listed near the top of the page, in alphabetical order, with nice little icons. One thing that looks a bit out of place is the "Home" link, which is right next to the list of events. I think that could have gone in the navigation menu just below it.
Below the list of events is what I would call the main navigation. Some may disagree, because it isn't exactly clear what the "main navigation" is.
You'll notice that the site is very cluttered, with the only real whitespace being used in the 20 pixel space between columns. I really believe that they could have added more spacing between elements of the page, to avoid the whole cluttered look.
The logo doesn't seem to have too much importance in the design, being barely even 80 pixels wide. But it doesn't really need to be as important, because other features of the page also help to identify what this website is about.
A nice feature of the design is the background illustration of a person holding a torch, on the right-hand side of the page. It just looks a bit strangely cut off under the main container. I think that they could have pushed it to the right a bit more to avoid that awkwardness. It would also look less uncomfortable to have the image cut off by the right side of the browser window, because it simply looks more natural.
The home page is generally arranged in a type of three-column layout, giving some sense of alignment. However, I think it would have been a good idea for them to make an actual grid, to make it look more organized.
When you reach the bottom of the site, you'll come across a huge sea of nothing but white. And I do not count that as whitespace, because it is just so far down, and doesn't provide any actually useful separation from other sections of the page.
Continuing down, you'll see another illustration of a guy holding a torch, right below the Bell logo.
Even further under that, you'll find some "Useful Links". This section is not very useful, with cluttered lists of links that I simply cannot scan through. At least there are headings, though. I'd say it's more of a way to help search engines to crawl through their site.
Use of Flash
The Olympic Torch Relay Interactive Map seems to be powered by Flash, however after waiting for a long time, it would not load. I just got to stare at a greyed-out map with a spinning circle over it.
The pages with the actual content have very poor readability. I just went to one news article and had a very tough time reading through it.
The most obvious problem with readability is that the font size is extremely tiny, which is simply unforgivable, in my opinion.
There could also be more contrast with the colour of the text and the background, simply by using a slightly darker shade of grey. More line spacing could be added as well, to help improve readability.
The hierarchy of the text is quite poor as well, with subheadings the exact same size as the main body text, except bold. I can't tell if one section is more important than the other, or if it's just a point that's being emphasized.
Just a Few More Suggestions
- The text in the header "With Glowing Hearts" is not clickable to go to the home page. I know it's not a logo, but it looks like one, and many users will mistake it as a logo and try clicking on it and expect to go to the home page.
- If you go to the "Tickets" page, only two columns are filled, with the third completely empty. I'm not saying that they should clutter up the design even more, but that they could increase the width and spacing of the two main columns to fill up the remaining space.
- 272 validation errors. It's not a huge deal, and I'm probably being a bit picky, but it could be helpful to try to reduce that number a bit. If not, at least don't use XHTML 1.0 Strict for your site. There are only 55 errors when validating as HTML 5.
The Vancouver 2010 Olympics website has an overall nice design, with just a few places with room for improvement. What do you like about this site, and would you suggest any more improvements?