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

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

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…