{"id":65187,"date":"2021-05-20T13:34:00","date_gmt":"2021-05-20T13:34:00","guid":{"rendered":"https:\/\/blog.mozilla.org\/foxtail\/?p=65187"},"modified":"2021-11-08T14:54:50","modified_gmt":"2021-11-08T22:54:50","slug":"new-firefox-coming-june-1","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/","title":{"rendered":"Behind the design: A fresh new Firefox"},"content":{"rendered":"\n<p>A new Firefox is coming your way on June 1 with a fresh look designed for today\u2019s modern life online. We pored over the browser\u2019s 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.<\/p>\n\n\n\n<p>Updating the design of a technology product is a thrilling challenge. For the Firefox refresh, our product design team obsessed over every detail \u2014 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\u2019t wait to share it with you.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Firefox quiets the chaos&nbsp;<\/h2>\n\n\n\n<p>The back-end of your browser \u2014 stuff like the code, configurations, security settings, processes, etc. \u2014&nbsp; 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\u2019re there to view rather than Firefox itself.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote is-style-default\"><blockquote><p>\u201cWhen 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.\u201d<\/p><cite>Firefox design team<\/cite><\/blockquote><\/figure>\n\n\n\n<p>The immediately visible part of Firefox \u2014 the front-end elements like the tab bar and navigation bar that surround a website \u2014 seems fairly small at first glance. With any good design, if it does its job and works well, you probably don\u2019t 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 <em>not<\/em> to notice it, and to have it operate seamlessly with the back-end.<\/p>\n\n\n\n<p>Facing a chaotic world online, one of our design team\u2019s 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 \u2014 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.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Things are looking different in 2021<\/h2>\n\n\n\n<p>Starting June 1, you can say hello to a fresh new Firefox, designed to get you where you want to go even faster. Here\u2019s what\u2019s coming:<\/p>\n\n\n\n<p><strong>Simplified toolbar<\/strong>: The Firefox toolbar is where you type a URL, so it\u2019s 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.<\/p>\n\n\n\n<p><strong>Streamlined menus:<\/strong> 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.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote is-style-default\"><blockquote><p>\u201cTabs are a funny thing to fixate on, but when you talk about a browser, it&#8217;s hard not to talk about tabs.\u201d<\/p><cite>Firefox design team<\/cite><\/blockquote><\/figure>\n\n\n\n<p><strong>Inspired tab design:<\/strong> 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.<\/p>\n\n\n\n<p><strong>Updated prompts and fewer interruptions:<\/strong> We\u2019ve removed unnecessary alerts and messages. Where we do have messaging, the design and language are clean and clear.&nbsp;<\/p>\n\n\n\n<p><strong>Cohesive, calmer visuals:<\/strong> Throughout the new Firefox, you\u2019ll quickly notice more consistent styling, lighter iconography, a refined color palette, and a more modern aesthetic for screens of all sizes \u2014 computers, phones and tablets.<\/p>\n\n\n\n<p>While we make small design improvements regularly, major overhauls are big undertakings that don\u2019t 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\u2019s on the horizon. That\u2019s the energy we all need in 2021.<\/p>\n\n\n\n<p>Get ready! The new Firefox starts rolling out on June 1 for all devices \u2014 desktop and mobile. <a href=\"https:\/\/www.mozilla.org\/firefox\/new\/?utm_source=blog.mozilla.org&amp;utm_medium=referral&amp;utm_campaign=mr1&amp;utm_content=behind-the-design\">Download and install Firefox<\/a> for <a href=\"https:\/\/www.mozilla.org\/firefox\/new\/?utm_source=blog.mozilla.org&amp;utm_medium=referral&amp;utm_campaign=mr1&amp;utm_content=behind-the-design\">desktop<\/a>, <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=org.mozilla.firefox\">Android<\/a> and <a href=\"https:\/\/apps.apple.com\/us\/app\/firefox-private-safe-browser\/id989804926\">iOS<\/a> today so you\u2019ll be one of the first to find out when the fresh new version goes live.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote is-style-default\"><blockquote><p>\u201cMozilla 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.\u201d<\/p><cite>Firefox design team<\/cite><\/blockquote><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>A new Firefox is coming your way on June 1 with a fresh look designed for today\u2019s modern life online. We pored over the browser\u2019s 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 [&hellip;]<\/p>\n","protected":false},"author":727,"featured_media":65430,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[],"coauthors":[311664],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Behind the design: A fresh new Firefox<\/title>\n<meta name=\"description\" content=\"A fresh new Firefox is coming your way on June 1. Worry less, get more done and feel good about what\u2019s on the horizon. That\u2019s the energy we all need in 2021.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/\",\"url\":\"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/\",\"name\":\"Behind the design: A fresh new Firefox\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/wp-content\/blogs.dir\/278\/files\/2021\/05\/2.jpg\",\"datePublished\":\"2021-05-20T13:34:00+00:00\",\"dateModified\":\"2021-11-08T22:54:50+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/en\/#\/schema\/person\/5c987afc4f606be73692d2acfdd1316c\"},\"description\":\"A fresh new Firefox is coming your way on June 1. Worry less, get more done and feel good about what\u2019s on the horizon. That\u2019s the energy we all need in 2021.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/wp-content\/blogs.dir\/278\/files\/2021\/05\/2.jpg\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/wp-content\/blogs.dir\/278\/files\/2021\/05\/2.jpg\",\"width\":1200,\"height\":800,\"caption\":\"The Firefox logo, featuring a stylized orange and red fox curling around a purple globe against a colorful abstract background.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Behind the design: A fresh new Firefox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/en\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/en\/\",\"name\":\"The Mozilla Blog\",\"description\":\"News and Updates about Mozilla\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/en\/#\/schema\/person\/5c987afc4f606be73692d2acfdd1316c\",\"name\":\"M.J. Kelly\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/en\/#\/schema\/person\/image\/70718b02fa9f11d88288b937f1da2ac1\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d61ff6a9eb6dd324df20cb773e6c416e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d61ff6a9eb6dd324df20cb773e6c416e?s=96&d=mm&r=g\",\"caption\":\"M.J. Kelly\"},\"description\":\"Mozilla Communications\",\"url\":\"https:\/\/blog.mozilla.org\/en\/author\/mjkellymozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Behind the design: A fresh new Firefox","description":"A fresh new Firefox is coming your way on June 1. Worry less, get more done and feel good about what\u2019s on the horizon. That\u2019s the energy we all need in 2021.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/","url":"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/","name":"Behind the design: A fresh new Firefox","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/wp-content\/blogs.dir\/278\/files\/2021\/05\/2.jpg","datePublished":"2021-05-20T13:34:00+00:00","dateModified":"2021-11-08T22:54:50+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/en\/#\/schema\/person\/5c987afc4f606be73692d2acfdd1316c"},"description":"A fresh new Firefox is coming your way on June 1. Worry less, get more done and feel good about what\u2019s on the horizon. That\u2019s the energy we all need in 2021.","breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/#primaryimage","url":"https:\/\/blog.mozilla.org\/wp-content\/blogs.dir\/278\/files\/2021\/05\/2.jpg","contentUrl":"https:\/\/blog.mozilla.org\/wp-content\/blogs.dir\/278\/files\/2021\/05\/2.jpg","width":1200,"height":800,"caption":"The Firefox logo, featuring a stylized orange and red fox curling around a purple globe against a colorful abstract background."},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/en\/firefox\/new-firefox-coming-june-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/en\/"},{"@type":"ListItem","position":2,"name":"Behind the design: A fresh new Firefox"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/en\/#website","url":"https:\/\/blog.mozilla.org\/en\/","name":"The Mozilla Blog","description":"News and Updates about Mozilla","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/en\/#\/schema\/person\/5c987afc4f606be73692d2acfdd1316c","name":"M.J. Kelly","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/en\/#\/schema\/person\/image\/70718b02fa9f11d88288b937f1da2ac1","url":"https:\/\/secure.gravatar.com\/avatar\/d61ff6a9eb6dd324df20cb773e6c416e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d61ff6a9eb6dd324df20cb773e6c416e?s=96&d=mm&r=g","caption":"M.J. Kelly"},"description":"Mozilla Communications","url":"https:\/\/blog.mozilla.org\/en\/author\/mjkellymozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/en\/wp-json\/wp\/v2\/posts\/65187"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/en\/wp-json\/wp\/v2\/users\/727"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/en\/wp-json\/wp\/v2\/comments?post=65187"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/en\/wp-json\/wp\/v2\/posts\/65187\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/en\/wp-json\/wp\/v2\/media\/65430"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/en\/wp-json\/wp\/v2\/media?parent=65187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/en\/wp-json\/wp\/v2\/categories?post=65187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/en\/wp-json\/wp\/v2\/tags?post=65187"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/en\/wp-json\/wp\/v2\/coauthors?post=65187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}