New Firefox design will offer uniform look across desktop and mobile

Firefox is getting a fresh new unified look and feel across form factors.

Mozilla recently combined its desktop and mobile design teams with the aim of unifying the Firefox user experience across form factors. A presentation slide deck published by Mozilla’s Madhava Enros offers some insight into the design process and shows how the effort to boost Firefox’s visual cohesion aligns with Mozilla’s Kilimanjaro initiative.

Mozilla is aiming for a "soft, friendly, and human" design that will "feel like Firefox" across all supported platforms and form factors. The challenge will be blending the browser’s distinctive visual style with the conventions of the underlying platforms. The slide presentation includes mockups that show how the new design language will translate to various environments, including Android, Metro, B2G, and the conventional desktop.

Some design elements will be shared across all of those environments. The presentation shows how the same distinctive curved shapes will be used to give Firefox uniform contours on different form factors.

A wireframe showing how Firefox's curved contour translates across form factors.

Mozilla’s Stephen Horlander created a new design called Australis that will bring an updated look and feel to Firefox on the desktop. Mockups and experimental third-party implementations of Australis have been floating around for quite some time. Australis will bring curved tabs, a simplified menu, and a number of other improvements to Firefox. Mozilla has also separately been working on a more functional start page and a cleaner interface for managing downloads.

A mockup of Firefox's Australis theme as it might look on the conventional Windows desktop.

The mobile Firefox user interface is already in close alignment with the new style. Some updated mockups published in the slide presentation show how further refinement will increase visual consistency between the mobile user interface and the Australis design on the desktop. The mockups also show some of the specialized features that are available in the mobile version of the browser, including a built-in sharing tool and an article reading mode.

A mockup of the new Firefox tablet user interface.

Firefox Mobile's reading mode and sharing feature.

Mozilla is also working on a Metro version of the Firefox Web browser for Windows 8. Development began earlier this year, but it has already seen considerable progress. The Metro design mockups included in the slide presentation show a layout that is similar to the one that Firefox uses on Android tablets. Some aspects have been adjusted to make it more functionally consistent with Internet Explorer’s Metro interface, however. The tabs reel will slide down from the top instead of the side and the new tab page has Metro-like blocks.

A mockup of Firefox's Metro user interface that shows the tab reel.

The presentation associates a "Kilimanjaro" rating with the various designs to signify the extent to which they contribute to advancing Mozilla’s platform aspirations. Kilimanjaro is an umbrella project that encompasses all of the pending work that Mozilla is doing to create a user-focused product and service ecosystem that spans across the user’s devices and is built on top of the open Web.

Key parts of Kilimanjaro include the organization’s identity service, application marketplace, B2G mobile platform, and its cloud synchronization service. Mozilla’s ongoing work on Web standards and its effort to make the Web a viable application platform also play a vital role in influencing the design process.

For more design mockups and information, you can see the slide presentation online. Enros wrote about it in a blog entry, in which he also says that a full video of the presentation will be available soon. More information about Kilimanjaro is available from the Mozilla wiki.