Posts Tagged ‘SVN’

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.

Preferences

Windows

[Preferences] Base

[Preferences] Advanced » Network

[Preferences] Advanced » Network » Offline Storage Exceptions

Mac

[Preferences] Base

[Preferences] Advanced » Network

[Preferences] Advanced » Network » Offline Storage Exceptions

Add-ons Manager

Windows

[Add-ons Manager] Extension Isolated

[Add-ons Manager] Extensions View - Grid

[Add-ons Manager] Extensions View - Large List

[Add-ons Manager] Extensions View - Large Small

Mac

[Add-ons Manager] Extension Isolated

[Add-ons Manager] Extensions View - Grid

[Add-ons Manager] Extensions View - Large List

[Add-ons Manager] Extensions View - Large Small

Network Error/Phishing

Windows

Network Error

Phishing/Malware

Mac

Network Error

Phishing/Malware

about:config

Windows

about:config

Mac

about:config

Session Restore

Windows

Session Restore

Mac

Session Restore

TabCandy

Windows

[TabCandy] Glass

[TabCandy] Textured

Mac

[TabCandy] Metal

[TabCandy] Textured

Update:

I meant to mention that the Windows versions of the Photoshop files can be found on the SVN server:

http://svn.mozilla.org/design/projects/newtheme/strata/i06/
 
…(Win7)-(Aero)-(InContentUI)-(AboutConfig).psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionSelected).psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionsGrid.psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionsListLarge).psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionsListSmall).psd
…(Win7)-(Aero)-(InContentUI)-(NetError).psd
…(Win7)-(Aero)-(InContentUI)-(PhishingMalware).psd
…(Win7)-(Aero)-(InContentUI)-(PreferencesBase).psd
…(Win7)-(Aero)-(InContentUI)-(PreferencesNetwork).psd
…(Win7)-(Aero)-(InContentUI)-(PreferencesNetworkExceptions).psd
…(Win7)-(Aero)-(InContentUI)-(SessionRestore).psd
…(Win7)-(Aero)-(InContentUI)-(TabCandy-Glass).psd
…(Win7)-(Aero)-(InContentUI)-(TabCandy-Textured).psd


Tags: , , , ,
Posted in Firefox | 126 Comments »