Experimental « Chromatic Pixel

Posts Tagged ‘Experimental’

June 1st, 2010

In-Content UI Visual Unification

One of the UX team’s priorities for Firefox 4(and beyond) has been working towards getting more of the secondary UI into the browser as in-content UI. This can be seen already with the work being done on the new Add-ons manager.

Examples of in-content UI already present include session restore, about:config, new add-ons manager, network error pages and phishing/malware warning pages. Future possibilities for integration are things like preferences, the library, home tab, tabcandy and about:firefox.

This creates a lot of various interfaces going into the same conceptual space. I have been exploring ways to visually unify them and establish an “in-content UI” style. There is a lot of flexibility for different things within the style. It could do a variety of nice things and still be easily identifiable as “hey that’s Firefox incontent-ui!” (exclamation point because it’s exciting stuff!).

The goal is to create something that looks appealing, connects the variety of different types of UI, is recognizably in-content UI and can be styled per platform.

Some design notes:

“Soft” textured background
Tab and page are all one unified texture
Drilldown breadcrumb navigation
Inset style for UI content and outset/floating style for notifications
Colored location bar based on type of notification

Note: This is not intended to be comprehensive or final.

Additional Note: I turned off the lightbox so these thumbnails link directly to fullsize images.