Behind the design: A fresh new Firefox

A new Firefox is coming your way on June 1 with a fresh look designed for today’s modern life online. We pored over the browser’s user interface pixel by pixel, measured the value users were getting from our massive library of features, and ultimately streamlined the Firefox experience to be clean, inviting and easier to use on every device.

Updating the design of a technology product is a thrilling challenge. For the Firefox refresh, our product design team obsessed over every detail — spacing, words, colors, icons and more. They studied how people interact with the browser, observing their patterns and behaviors. They refined, revised and refined some more. They sweated allllll the details. The resulting new look is a beautiful, fast experience that delivers on what people do most in Firefox. We can’t wait to share it with you.

Firefox quiets the chaos 

The back-end of your browser — stuff like the code, configurations, security settings, processes, etc. —  does a ton of work behind the scenes on behalf of the people who use it. Firefox does much more than briskly load websites on a screen; it instantly processes information embedded in those sites and acts on your preferences, all while tightly protecting your security and privacy. At the same time, 95% of what you see when you open a browser window belongs to the website that you’re there to view rather than Firefox itself.

“When it came time to redesign the Firefox browser, we sought to create unity across the visual language of the browser while setting a foundation for some really interesting things to come.”

Firefox design team

The immediately visible part of Firefox — the front-end elements like the tab bar and navigation bar that surround a website — seems fairly small at first glance. With any good design, if it does its job and works well, you probably don’t think much about it. But a good user experience is also just the tip of the iceberg in terms of the actual work it takes to make. Extensive planning, thought and intent has been put in behind the scene to make the new Firefox flow smoothly in order for you not to notice it, and to have it operate seamlessly with the back-end.

Facing a chaotic world online, one of our design team’s pillars was to make Firefox feel calm. We worked to deliver a cohesive experience so that people felt the same calming comfort, no matter where they use Firefox — on a computer, phone or tablet. That meant paring down and streamlining over adding and expanding. Our user research guided the choices and validated that we were solving the right problems for people. 

Things are looking different in 2021

Starting June 1, you can say hello to a fresh new Firefox, designed to get you where you want to go even faster. Here’s what’s coming:

Simplified toolbar: The Firefox toolbar is where you type a URL, so it’s where the action starts. Our new toolbar is simplified so you get to the good stuff effortlessly. We removed visual clutter to focus on the most important navigation items.

Streamlined menus: We consolidated extra menus to be more direct and intuitive. The streamlined menu puts priority actions quickly at your fingertips. We also reduced visual noise by removing unnecessary iconography and provided clearer labels.

“Tabs are a funny thing to fixate on, but when you talk about a browser, it’s hard not to talk about tabs.”

Firefox design team

Inspired tab design: Floating tabs neatly contain information and offer cues only when you need them, like visual indicators for audio controls. The rounded design of the active tab signals the ability to easily grab and move tabs as needed.

Updated prompts and fewer interruptions: We’ve removed unnecessary alerts and messages. Where we do have messaging, the design and language are clean and clear. 

Cohesive, calmer visuals: Throughout the new Firefox, you’ll quickly notice more consistent styling, lighter iconography, a refined color palette, and a more modern aesthetic for screens of all sizes — computers, phones and tablets.

While we make small design improvements regularly, major overhauls are big undertakings that don’t come around all that often since change can be hard. We took the Firefox redesign project to heart with the goal of making your life a little better so you can worry less, get more done and feel good about what’s on the horizon. That’s the energy we all need in 2021.

Get ready! The new Firefox starts rolling out on June 1 for all devices — desktop and mobile. Download and install Firefox for desktop, Android and iOS today so you’ll be one of the first to find out when the fresh new version goes live.

“Mozilla and Firefox in particular were born in an open source community with inputs from people all over the world. All of that came together to make a compelling product that changed the web landscape forever.”

Firefox design team

Share on Twitter