NBC News Redesign is On Its Way

Default avatar.
June 02, 2017
NBC News Redesign is On Its Way.
NBC News is getting a new design! Read all about it! There are so many young people who may never get that joke, unless they like watching period movies. Well, much like humor itself, NBC News is moving with the Times (sorry), and building themselves a whole new design system, in conjunction with the external design agency Code and Theory. The current NBC News site remains untouched, which gives us time to grab some good before and after screenshots. The new design system is currently being tested on two sub-sites — or "verticals" — called Mach, and Better. And I have to say, it’s looking good. Like many other sites, NBC News is leaving behind the classic newspaper-esque visual theme in favor of something more modern. In fact, the new design system goes further than the tech-tabloid (techbloid?) style recently embraced by Huffpost, and straight into tech blog territory. Perhaps it even stretches into design blog territory. before The Current NBC News Site Their new style places a stronger emphasis on imagery and video than the old one, presumably out of a desire to give context to every headline (and get more clicks). But no, they really doubled down on the video as well: they straight up developed their own HTML5 video player for use on their sites. mach The Mach Vertical Additionally, they have embraced a touch of asymmetry on both the desktop and mobile versions of their sites. They’ve gone for a streamlined and pixel-perfect variation on the increasingly popular "collage" look. In the meantime, they’ve actually toned down their traditional branding a little in favor of making each sub-site look like its own thing. This is largely accomplished through the heavy use of accent colors that are different for each vertical. That in itself is a nod to the peacock logo, but it also serves to separate their properties. The tech-minded vertical "Mach" goes for the classic deep blue, while the self-improvement and health-focused "Better" is accented in green. I find myself compelled to suggest a nice depressing brown for their political section, when they get around to it. better The Better Vertical The typography is solid, and designed to scale to all screen sizes. The headlines are set in the beautiful Founders Grotesk Condensed, and the body text in Publico. These typefaces were chosen for legibility, and as I have yet to encounter any issues, I’d say they got it right. The really big thing about the design, however, is that it’s meant to be modular, instead of relying on strict page templates. They want to be able to put any kind of content pretty much wherever they want to while maintaining consistent branding and style, so flexibility was a priority. Given the sheer variety of content a large news agency might have to include on their site, this is important. [pullquote]They didn’t just update the look, they updated their whole process for putting news where people can see it[/pullquote] Now, does this design system live up to its aspirations? Well, like all design systems, it’s probably going to need some iteration, which is why NBC News made the very smart tactical move of testing it out on sub-sites. Still, looking at Mach and Better, and reading the stated goals for the design system in their Medium post, I’d say they got awful close. (Incidentally, they talk about their tech stack in that post; they use Drupal.) The longer I look at it, the more I realize that the visual refresh is, perhaps, not the most important part of the redesign. They didn’t just update the look, they updated their whole process for putting news where people can see it. That said, I do love the new look. I might be biased, given how similar it is to some design and tech blogs, but I do. I think this revamp is going to work out for them.

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.

Read Next

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…