Those who know about the major news networks should recognize NBC. It’s a large Hollywood network and TV station in the United States which was originally founded back in 1939.
Over the years NBC has catered to a wide audience and in recent years has gotten much more technical. The official NBC website has loads of information about current programming, schedules, and live broadcasts for the latest news stories.
If you’re interested to study a media company website then take a peek at the trends I’ve outlined in this post. We’ll break down some major pieces of the design and see how they fit together to build a large-scale commercial enterprise website.
A Direct Focus on Content
Obviously people visit NBC.com for the content. This could be latest news, sports updates, or checking on the newest batch of fall programming.
The layout places a tremendous focus on content with more subtle attention on company info. The header includes a large fullscreen photo slideshow with clips & info about upcoming series.
Skimming the navigation you’ll find a bunch of relatable content for NBC visitors: TV shows, upcoming schedules, and even a live feed for your local NBC channel.
Content is made to be large and in charge. Typography varies based on its purpose but most areas of the page are used to draw attention towards a certain aspect of NBC programming.
In all media industries graphics & photographs are important. Since photo shoots are common for TV cast members NBC has plenty of high-quality resources for their website.
Imagine the site without any of these photos – the layout would appear quite barren and lifeless.
Sliding Dropdown Menus
Some of the main navigation links include sliding dropdown sub-menus. For example, if you click “shows” you’ll be presented with a long list of current & upcoming shows on NBC.
The main menus are meant to be contextual where you decide what you’re looking for first, then delve into the specifics. “Full Episodes” offers a very similar dropdown but the links go out to full streaming episodes of NBC shows.
I can’t say this is the best technique but it’s certainly not the worst navigation experience I’ve encountered. Unfortunately NBC’s website is not responsive so it stays fixed at a full width no matter the size of the window.
Interestingly this keeps the navigation functional to all users regardless of browsing engine.
Also take note that the footer includes many of the same links without a large dropdown. In the footer you’ll also find corporate links for info about the company, jobs at NBC, terms of use, and other important business stuff.
Breakdown of News & Sports
In previous articles I’ve discussed grid UI design and how it applies to web design. Many larger corporate sites follow the grid because users intuitively know how to use it.
NBC includes a large block of elements on the page in grid format used for advertising new shows, upcoming episode premieres, and the latest news/sports highlights.
If you scroll down the homepage you’ll bump into lots of this information. Most of these block elements lead to online streaming episodes just to keep people on the site for longer. Also NBC runs ads on their site & in-video streams which earn revenue for the company.
NBC’s video player represents a huge part of the site’s content strategy. Since more people are cutting cable and moving to alternatives like Netflix, major networks need to offer solutions to fend off the competition.
Fullscreen Schedule Calendar
Since many people do still watch network TV it’s important that NBC cater to these visitors. Their TV schedule can be viewed right from the website in a large fullscreen calendar.
The layout is split into large thumbnails for currently-airing content while appending a calendar underneath. This allows visitors to check what’s on NBC at any point going forward ~2 weeks into the future.
The best part of this layout is how content comes first. In fact, content basically takes up the entire page with large text and block elements.
Some designers avoid such large interfaces but they really are easier to use and offer a more direct approach to content organization.
Final Points
It’s rare for designers to ever work on a TV networks’ professional website layout – but there’s a lot to be learned by analyzing the trends employed by NBC. Any type of digital media company should place heavy focus on the media itself, and the website design should reflect this indisputably.
Leave a Reply