USA Today website was redesigned and launched in September 2012 on the newspaper’s 30th birthday. Fantasy Interactive was the awesome crew behind this 1-year project. They won many awards including Adobe’s “Cutting Edge Award” for this project. So what makes the design of USAToday.com unique?
A typical News website has a lot of content. You have to tunnel your way through it like a mole. I have lost my way countless times while navigating through news websites (and YouTube!). However, USA Today website imitates the flow of a person reading a newspaper:
- Open up the preferred section
- Browse through the news headlines
- Read the full article of preferred headlines
- Move on to a different section and
Colour Coded Categories
When USA Today newspaper was launched in 1982, it was derisively dubbed the “McPaper”. This was because of its short articles (McNuggets) and its colourful display.
In 1982, USA Today emerged, revealing a new and noticeable design deviation. Along with the compacting of stories by using a tight writing style, USA Today included a bright and colorful display filled with photographs, maps, charts, graphs and other such informational graphics. While upholding modular design, USA Today did away with the spaciousness and simplicity many newspapers had adopted.
American Journalism: History, Principles, Practices
edited by W. David Sloan, Lisa Mullikin Parcell
USA Today continues its trend of using colour to its advantage. Colours make it easy to find a section or category of news. Just like the newspaper, colours act as an important section cue. For example, blue for News, red for Sports and green for Money. This matches with its newspaper print colours. The below image shows the full length view of 6 section webpages.
This colour coding is extended to its home page which has news articles from different sections, as shown in the picture below:
Single Page Application Design
USA Today website has made the browsing experience natural through its iPad app-like horizontal navigation. The website has two layers. Lets call them Section and Story.
Section layer contains the various news section pages (e.g. News, Sports, Money). You can navigate left or right between these sections by clicking on either of the two big arrows. In the below image, I can click on the left arrow for Weather section. Or I can click the right arrow which will take me to News section.
The section pages display “teasers”. Clicking on them will open the article on an overlay (i.e. Story layer on top of the Section layer). For example, if I click on the teaser “USA TODAY VP Power Rankings”, it shows the full article on an overlay. Clicking anywhere outside this overlay will take me back to the Section layer.
See it in action in this video:
USA Today Dynamic Logo
USA Today newspaper has a colourful changing logo designed by Wolff Olins. It is a live infographic that changes with the news. It reminds me of Google Doodle. It is a nice feature that can be incorporated on a website. See the picture below with some variations of its logo.
Under The Hood
Case studies of your favourite websites will help you make a wish-list for your website. You can head over to my Case Study collection where I will have more articles on my favourite website design.
If you found this case study useful, let me know in the comments section.
And here is a bonus for you: I found the below video on Fantasy Interactive website. It gives a sneak peek into the design of USA Today website.