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

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…