The following article gives you a glimpse of the upcoming Photon design of the Firefox web browser which will come out later this year.
Mozilla plans to make Firefox 57 a milestone release. It is the version of Firefox in which the cut is made that leaves legacy add-ons behind, and also the Firefox version that will feature a design update.
Mozilla released a batch of new mockup screenshots of the upcoming design in the past week. Sören Hentzschel was nice enough to collect those and publish them on his blog, so, thanks to him for making those available to a larger audience.
Note: The following design screenshots are mockups, and not necessarily the final product.
Firefox 57: new Photon design screenshots
We have talked about the new main menu of the Photon-enabled Firefox browser already. Mozilla moves away from the icon-focused menu to one that looks almost like a right-click context menu instead.
It features more options, some with, others without icons, and also a touch-variant that users may use when they work on touch-enabled devices.
The touch menu of Firefox Photon may look like the following one:
The core change is that the space between menu items is larger for easier selection of options displayed in the menu.
The entries look identical right now, we will see if that will be the case when Photon is released in a future version of the Firefox web browser.
One new feature of Firefox 57 will be that you can display the browser’s sidebar on the right side. Current versions of Firefox support it only on the left, but with the new version comes an option to display it on the right instead.
The following screenshot shows that, and the new design of the sidebar as well.
The three dots menu in the Firefox address bar is new as well. It lists several options in the mockups, among them options to copy the URL, send the URL to a device, take a screenshot, or to share the page.
This new share functionality taps right into the Share functionality of the operating systems if it ships with one. On Windows 10, selecting Share would open the operating system’s Share window, and the same will happen on Mac OS X.
It is unclear how Share will look like on devices that run operating systems that don’t come with native Share functionality.
The error pages that the browser displays are redesigned as well. The mockups released in the last week show a less flashy design with fewer colors.
Here are the error pages that highlight the changes:
Mozilla, on top of that, released mockups for various internal pages of the Firefox browser. This includes the private browsing start window, the page that comes up when Firefox blocks a web page, and the HTTPS error page.
Last but not least, some internal about pages may get redesigns as well when Firefox 57 hits. These are the pages about:credit, about:license, and about:rights.
Firefox Nightly users may do the following to enable some Photon design elements in the browser already. Please note that this is a work in progress, and that some things may not work as intended at that point in time.
- Type about:config in the browser’s address bar and hit the Enter-key on the keyboard.
- Search for browser.photon.structure.enabled.
- Double-click the preference to set it to true, and enable the bits that are already in the browser.
- Restart the web browser.
Now You: What’s your take on these new design mockups?