For a long time now, people have been saying that Google is getting better at design quicker than Apple is getting better at services and as though to show this off, Google unveiled a brand new design language. Though this time it wasn’t only for the mobile platform of Android but they’ve also unveiled it for the web. Material Design is what Google considers the best practices for any app or website.
Material Design as a language is beautiful but it’s not just about aesthetics for it’s truly immersive. To compare it to traditional languages such as English, German, Japanese and Cantonese, you’d describe it as having nuances in the pronunciations, whereby getting the accent right on a word could be the difference between conveying one thing or another.
Comparing Material Design to Holo Design is something that’s vital to truly get an understanding of what Google is trying to achieve. We have Holo version one which introduced the skeleton of the design, Holo version two that refined it and created something more aesthetically pleasing to the eye and then there’s Material Design which took the best of what was previously put in place and made it a lot more intuitive.
A casualty of Material Design however is branding. Holo put traditional branding front and centre with logos on the screen at all times while with Material Design, logos have been removed with the understanding that a user knows what application they’re using and so don’t need to be constantly reminded of that. This is great in theory but in practice where you can jump from one app to another at a tap, is that truly the case?
Here is where Firefox comes in. Firefox being a browser never had much use for the logo to be on display within the app and as such went about browsing in a different manner. It took what had become it’s new iconic tab design and added that to the primary UI. But as Firefox made the transition to Holo version two it made an effort to get out of the way of the user and hid the action bar (address bar) by default.
However with Material Design, the action bar has grown and such a faux-tab can’t exist within the new dimensions. That ultimately means that Firefox has to take a look at what it’s plans are going forward. The question is what constitutes as Firefox branding? Google has left many avenues for subconscious branding like theme colouring. However such is the attachment to the Holo version two design of Firefox that there’s been an effort to retain the design on Lollipop (the latest iteration of Android and home of Material Design) rather than the brand. An example is the suggestion to use the tab tray colour for multi-tasking recognition. This wouldn’t make sense for Firefox. Mozilla has stated succinctly that the branding colour is orange, so why would there be a suggestion to use the grey from the tabs tray which was selected because it’s a neutral colour and allows thumbnails to stand out? Well that’s because Firefox’s branding is far too one-dimensional.
Firefox treats itself as a guest within everyone else’s home and attempts to conform to the various platforms it’s on but that’s the issue. Firefox should assimilate platforms while peacocking and reminding the world that it exists. Despite Firefox having a very clear mission that is about the freedom of the individual and fighting for an open web, it doesn’t do so visually. Thus is born an over-reliance on faux-tabs.
Firefox needs its own Material Design for the web and if only its own sites conform to that along with some like-minded sites then the only people that can benefit is the end-user. User Experience Design Research is important and some companies as well as individuals don’t have the resources to do that, thus if they can have another option that isn’t that of Material Design, the people that consume the web are all that much better off for it.
With strong subconscious branding like using orange glows instead of blue, you can reassert that this is a Firefox product. Of course it’s not a suggestion to use the gaudy orange that we instantly associate with Firefox but there’s various shades of orange and sometimes beautiful and effectiveness collide beautifully in subtlety.
With a stronger brand, you’re able to remove faux-branding like the faux-tab in favour of other references. One that Firefox does well currently is outlining the active location box in an orange, but while you’re there, why not make the status bar orange? If the keyboard is active, why not make the navigation bar orange? Why wouldn’t you use a Floating Action Button with the Firefox logo on it to tell users there are more pages then the current one when on about:home? Why wouldn’t you use a Fading Action Bar on the Synced Tabs page with a new Firefox header? And why wouldn’t you display the gaudy orange of the Recent Apps screen to make Firefox more noticeable at a glance?
Firefox is a modern browser and that means it must be agile enough to move with the changing landscapes of what is considered modern, especially in terms of design and user experiences. The question isn’t does Firefox have a place in a Material Design world, but rather does it want a place, because there’s absolutely no movement as of yet and I fear that by the time design details are settled upon, they’ll either be too conservative or just too slow to come to fruition. There are decisions being made for yesterday whereby others are already thinking about tomorrow.