3 Countries Go for Olympic Gold in Web Design and Layout

With all the pageantry and pomp of the London 2012 Olympic closing ceremony behind us, it’s time to look forward to future Olympic competitions.

Of course, as a collection of Web designers, marketers and social media experts our forte isn’t closely aligned with the Olympic motto: Faster, Higher, Stronger.

So instead of critiquing Gabby Douglas’ floor exercise, Usain Bolt’s post-race styling, or Ryan Lochte’s Dolphin Kick, I decided to take a look at the websites that make gathering information from past, present and future Olympics possible.

In this growing age of social media and digital communities, an event's website is almost as important as the event itself. And when  creating a specialized sports website design, there are even more factors that come into play.

In fact, I’d wager (Note: gambling on the Olympics is a no-no) nothing is discussed more than how users get their information and how their user-experience was after everything is said and done.

Websites for Athens 2004 and Beijing 2008 were as informative as any news-based site.

That being said, the official websites for Athens and Beijing come nowhere close to the sophistication in design and development of the London site and future Olympic Games websites for Rio and Sochi, which are already live.

London 2012

Of the three sites being critiqued, London’s site is the only news-based website, and as such, it is completely unified in design. Every element from the site comes back to the logo - from iconography to content areas to brackets. They all work as a team to create a cohesive site.

London Olympics web design

(Gold) Medal Features:

  • Incorporates elements from its vector logo creating interesting content separators, and is done in a minimalist fashion in the background of the site.
  • Great use of iconography in the sports dropdown menu and "live-results" panel at the bottom of the screen.
  • User-friendly mobile app with unique navigation icons.
  • Each sport subpage is branded with a different color.

Doesn't Medal:

  • No social media feeds on the homepage which would create a nice global community on the site.
  • No Videos on the homepage.
  • Could have created more visually appealing dropdown menus.
  • More breathing room between content.

Sochi 2014

The Sochi 2014 website uses modern elements and strong calls to action but each page makes you feel like you are on a completely different site.

Sochi olympics web design

(Gold) Medal Features:

  • The use of drop-shadows created good separation of sections.
  • Good separation of elements to work well on mobile and tablet devices.
  • Custom navigation iconography for mobile app.
  • Accordion style sub-navigation but minimal styling.
  • Incorporation of Google-earth in app.
  • Interactive events calendar appearing full-page width.
  • Twitter feed with horizontal custom scroll-bar stretching full page width.
  • Unique iconography appearing on the bottom of the site consistent with the stylistic elements in the background on the homepage.

Doesn't Medal:

  • Unclear visual hierarchy of text and images.
  • Appears to be a Responsive website but it’s layout is fixed.
  • Looks like a UGC (User-generated content) site but the site is not actually user generated.
  • Store section of the website is programmed in Flash, an outdated Web application.
  • Fixed layout, does not resize when the browser is scaled.
  • Each section of the website brings you out of the website in a separate window.
  • No Consistency between each page in the top navigation.

Rio 2016 

It may be unfair to evaluate the Rio 2016 website since those games are four years away, but it’s safe to say that for a landing page it makes you want to start training for these games.

Rio olympics web design

(Gold) Medal Features:

  • Great use of logo elements abstractly in rotating banner as content wrappers.
  • Images are nicely placed with the text on homepage.
  • Most of content is below the fold on homepage and subpages.
  • Beautiful imagery.

Doesn't Medal:

  • Not all the text on the homepage is live-text
  • Layout is fixed
  • Over sized banner in mobile website takes up too much content like on the subpages of the website
  • Calls to action aren't strong
  • No Social media integration other than share buttons on the top right of the page

So there you have it. If I had a few extra Olympic medals around I would issue the Gold to Sochi, the Silver to London and the Bronze to Rio.

 What are you thoughts? Let me know below or send me a tweet via @BFMWeb.

online marketing trends

Share this post

Comments on this post

  1. Great article, but for me, London website didn’t deserve anything more than bronze medal.

    Honestly, I was really surprised when I saw London 2012 website for the first time. And even now, with so much content, It’s still kind of dull, missing his gaiety which the Olympic Games carry around.

    I really like Sochi website, especially these clusters and twitter feed, so gold medal is very well deserved.

    And Rio website is really cheerful, as it should be. So, it’s silver medal from me.

    Aah, can’t wait the next Olympic Games.

Comment on this post


Ready to discuss your project? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052
  • 102 Madison Ave, 2nd Floor
  • New York, NY 10016
  • 212.260.1978