Showing More Skin: Personas Revisited

One of my first tasks as the new Visual Designer for Mozilla Labs is to research how to revise Firefox’s default chrome in OSX so that your Personas really shine through.

Currently in OSX, there are two main chrome issues affecting Personas.  The first is that the buttons have an opaque background – the custom skins are covered by them – and should be made more transparent.  The second issue is opaque tabs and how to properly allow the skin to show through them.

As you can see in the above screen, the current chrome in Firefox masks the Persona beneath with its opaque buttons.  In the tab bar, we see transparency set to the tabs in order for the Persona to shine through, but this is not ideal as the legibility is weakened in doing so.

To remedy both issues, the fill color of both the buttons and tabs has to be removed.  My initial design response is as follows:

As you can see in this concept, the buttons now allow the background Persona to shine through.  The glyphs now float within the buttons and simple edge highlights and shadows give the outer form.  This screen showcases a button set for darker themes using white glyphs, but there would also be a button set for lighter themes using dark glyphs as currently found in Firefox.  As for the tabs, light and dark outlines are used to enable the best separation between tabs and tab bar.  Having both light and dark lines enables the separation regardless of whether the Persona is light or dark.

I will post further work on the Persona specific chrome as it is developed.  For now, some examples of this new chrome style can be seen below: *NOTE: all of these screens are a work in progress.

and now a fancy Mozilla woodgrain Persona!