What Netflix’s rebrand teaches us about responsive design

Ben Moss.
November 03, 2015
What Netflix’s rebrand teaches us about responsive design.
Last week, streaming media service Netflix unveiled its new identity. Designed by New York-based agency Gretel the rebrand aims to unify the company’s output across the 50 countries in which it now operates.
Our challenge was to…create something variable yet systematic and bulletproof. It had to be visually striking, adapt to any format, and hold up to interpretation by agencies and vendors around the globe. — Gretel

The resulting design, owes a debt to card-based web design. Dubbed “The Stack”, the design features 3 cards: an image card, a color card (usually Netflix red), and a text card. The Stack is designed as a metaphor for infinite selection, and user curation. Using the system, individual designers can select the elements they need, dialing up or down the emphasis as needed. The amount of Netflix branding included for example, is being termed by the team the “brand volume”. netflix_brand_volume What’s fascinating about Netflix’s rebrand is the way it embraces, and refines responsive design; this is responsive design beyond viewports, it’s responsive design for mobile, the web, print, social media, and of course TV. Netflix subscribers will know that Netflix allows you to switch devices seamlessly — it is not uncommon to watch a show on your mobile whilst commuting, switch to your TV when you get home, then switch to your tablet to watch the next episode in bed. We know from studies such as Google’s 2012 Multi-screen study that users browse the web in a similar fashion, switching devices based not on task, but on their context. Gretel’s rebrand of Netflix gives us a glimpse of how we can design for that kind of user experience:

Really it translates across all parts of branding: Language behavior. Type behavior. Motion behavior. We’re trying to create things that can speak and have signature behaviors across any medium. — Greg Hahn, Gretel

It’s no accident that the identity is a flexible system that would translate easily to a user interface — the hope is that the new brand will ultimately form the basis of Netflix’s varied UIs at some stage in the future. netflix_devices2 Visually, the most interesting part of the design approach is the cropped logo. Many logos are used as design elements, often being cropped accordingly. The Netflix design takes the approach to the extreme and demonstrates that design assets can be heavily cropped and still retain brand integrity. netflix_logo_cropped What this means for web designers is that the eternal struggle to squeeze brand assets onto mobile screens may well be unnecessary. As the Netflix rebrand shows, if the ingredients are distinct enough, we only need a glimpse of the brand to enjoy its full flavor. netflix_collage netflix_subway2 netflix_laptop

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.

Read Next

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

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…