The final icons turned out like this:

Left to Right: Windows, Mac, Linux

This is based on an idea from Alex Faaborg. Instead of just using a plain globe there are red orbital rings(LASERS!) locking onto your position. The red is in contrast to the blue of the globe. Relaying some level of warning that a website is requesting your location.

I also sketched and rendered a few other ideas that didn’t make the cut:

The final result looks like this on geolocation pages:

Once the panel styling is updated it should look more like this:

More notification icons to come in the future!

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

Mac

Add-ons Manager

Windows

Mac

Network Error/Phishing

Windows

Mac

about:config

Windows

Mac

Session Restore

Windows

Mac

TabCandy

Windows

Mac

Update:

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

The New Theme project page has been updated with an extended(and idealized) timeline. I plan on spending much of my time this week getting everything lined up and editing the timeline as necessary and monitoring it going forward.

Mac Theme Patches

Markus has posted some patches for the Mac theme including toolbar buttons, location bar and tabs.

It also works nicely with Personas.

Windows Theme Progress

Dao has landed a patch for new tab styling.

Panel Styles

Last week I did some work on styling panels(specifically notifications) on various platforms. Something I have been meaning to do but was prompted by Gavin’s work on notifications and the need for split button visual styling.

Windows

Everyone on the UX team liked the Glass Border approach. It is consistent with Windows 7 taskbar panels(with the addition of the half-diamond) and feels lighter.

I also did some work on how this could look for panels outside of notifications like the talked about Downloads panel.

Mac

An updated Mac notification panel with split button.

Linux

Ideas for a styling the panels in Linux.

Other Theme Stuff

Designed an edit “tray” that would appear when editing text.

Had some thoughts around indicating a button that would invoke a panel.

Sketched out some of the UX Team’s fullscreen brainstorms.

Things you will need: Photoshop

Now that the new ToolbarButton style has landed on Trunk I put together some templates in Photoshop and posted them on the SVN server. These templates will allow someone to make their own glyphs with only a new vector graphic.

The file itself is pretty straight forward. It has a layer named “Base” containing a Vector Mask and some Layer Effects. The “Background(s)” group is for previewing the glyph and should be turned off before saving.

The canvas size is set at 18×18 pixels with the actual glyph taking up between 14×14 and 16×16 with the outer region used for a slight glow and etch. This is an attempt to account for variable backgrounds (e.g. Personas or Glass).

Just select the Mask, grab your Pen or Shape tool and start drawing. You will have to draw in the present Vector Mask and delete its current contents. Apparently you can’t have an empty Vector Mask. You can also copy and paste from Illustrator.

If you lose your layer you can always just create a new Vector Mask on a layer, Load the Win7-Glyph-Styles.asl file in the Styles palette and apply the “Win7GlyphBase” style to your new layer.

You can make various shapes and the Layer Effects do most of the work.

Once you are finished just toggle the visibility of the “Backgrounds(s)” group and select “Save for Web(& Devices)” from the “File” menu to save a transparent PNG of your new button glyph.

You could even resize your image and it will scale nicely with a few Layer Effects tweaks.

Or change the color.

Probably need a special high contrast set.

Note: I haven’t filed any Linux bugs yet and the Wiki page is out-of-date. Still working out some details there and should have that resolved this week.

This week I filed the first round of Bugs for implementing the new theme:

• #544815 – Allow for placing Tabs over the Navigation Bar with option for Tabs under the Navigation Bar
• #544816 – Attach combined Stop/Go/Refresh button to the Location Bar
• #544817 – Create Bookmarks Widget with placement dependent on Bookmarks Bar status
• #544818 – Progress “Line” indicator for background loading tabs
• #544819 – Create a basic Home Tab linking to the current Home Page
• #544823 – [Meta] Theme Visual Refresh
• #544820 – [Windows] Theme Visual Refresh
• #544821 – [OS X] Theme Visual Refresh

This is a pretty exciting step for me after having worked on the design for so many months.

Wiki Updates

I also spent some time getting all the mockups and thought processes on the Wiki current:

• Theme and UI Revamp
• Windows Theme Mockups
• Theme/UI Direction and Feedback
• Mac Theme Mockups
• Mac Specific Visual Design

This week I have been working on a few things:

1) App Button

One of the more challenging, not to mention contentious, aspects of the Firefox UI update has been how to handle the MenuBar. On our first pass we were informed by how Safari and Chrome had handled this problem by paring down all menu items into two separate Page and Tools buttons. This approach has a few advantages but also some disadvantages. The new proposed approach to this problem is an App Button which is similar to the single menu approach taken by Windows 7 native applications (Paint, WordPad) and by MS Office.

The UX team feels this approach has several advantages over the previous idea:

• It is less complex
• Takes up less space
• Instead of two potentially conflicting locations for menu items, there is now only one unified location
• Can be placed in the upper left analogous to the Menubar paradigm it is replacing
• Similar to the far more ubiquitous Office 2008/2010 + Windows 7 application menu
• Reduces clutter on the Navigation Toolbar
• It also creates a more flexible and rich canvas for perhaps doing some decidedly non-menu-esque things

Appearance and Placement

One of the benefits of the App Button is that it is similar to the way Microsoft is treating its native apps and Office. Another benefit is that the placement is closer to where the Menubar would be and therefore it is more familiar.

One idea that we have already explored with the Pages and Tools buttons is to use text on the button instead of an icon. This is also reminiscent of the Menubar’s textual display and removes any ambiguity involved with icons. This approach is also explored in the most recent Office 2010 beta with the tab simply being labeled “File”. We discussed naming our App Button simply “Firefox” because it contains all the actions that apply to Firefox.

Attaching the button to the top of the window further implies that this menu affects Firefox as a whole.

Status of the Titlebar

In all the mockups up to this point the Titlebar has been removed and the space reallocated for portions of the tabs. Enough room was left for traditional window dragging. The rational behind this change was to further shrink vertical space and to address the redundancy of having the page title in the Titlebar and the tab.

In the original approach you would lose approximately the width of one tab (or less!) due to the window widgets. This was before talk of placing an App Button or an Identity button in this area. As it stands now you would be losing much more. It seems the vertical space tradeoff doesn’t stack up quite as well when losing so much horizontal tab space.

It would be better to leave the Titlebar, giving full access to it and not losing any tab space. It also won’t be frustrating for someone wanting to drag the window.

State of the Menu

What will this single menu look like? Something like the sketch I posted previously but not exactly. Ideas on this are welcome. Thoughts about what should and should no go into this menu can be based on work already done for menu cleanup.

2) Refining Toolbar Button Appearance:

Some initial work has gone into making the toolbar buttons more visible on light backgrounds and more crisp and dimensional (pressable).

This is work I am constantly reevaluating since they appear on variable backgrounds.

3) Location Bar:

Created some very early visuals for reevaluating site identity. Also the location bar is now properly recessed instead of floating.

4) Retain Separate Search Bar:

With the LocationBar containing an increasing amount of functionality it may be best to retain a clear distinction between the two fields.

5) Bookmarks Widget:

On a default profile or existing profile that hasn’t modified the Bookmarks Toolbar it will be hidden by default and the Bookmarks Widget placed in the Navigation Toolbar.

If the Bookmarks Toolbar is shown the Bookmarks Widget will appear there instead.

Alternatives to Default Configurations

With Bookmarks Bar

Tabs Under the Navigation Bar

If tabs-on-top is not desirable you can change to the classic tabs under the navigation bar.

Tabs Under the Navigation Bar with Bookmarks Bar

App Button Variations

Several variations of the App Button have been explored. Various factors of consideration include what color to make it, whether or not to have an icon, just an icon, icon and text, part of the tab bar, a separate button or attached to the top of the window.

Presently it is orange and attached to the top of the menu simply labeled “Firefox”. The color plays off of the Firefox icon and is noticeable. The placement attaches the button to the top of the window and suggests that its items apply to the whole menu. It also corresponds to the area of the window where someone would look for the menu bar. Using text only is reminiscent of a menu item.

Firefox 4 and Firefox 3.5 Comparison

A visual comparison of the current iteration of Firefox 4 next to Firefox 3.5

Yesterday I posted a new article to the Wiki. This article lays out more fully how the UX team wants to evolve Firefox for 3.7 and 4.0. It is broken in to a 3.7 section and a 4.0 section. The 3.7 section is a fairly firm proposal that is in the approval stages and the 4.0 section is in the more early brainstorming phases.

Feedback is welcome either on the Wiki Discussion page or I have created a new thread in dev.apps.firefox. Also blog commenting is available as well.

Next Steps:

Going forward I will be working on collecting feedback and refining these ideas for implementation. There is also plenty of work to be done with transitioning these proposals from Windows to Mac and Linux.

• Narrowed direction and focus for Firefox 3.7 and 4.0 Theme/UI changes

Next Steps:

• Menu item trimming/sorting
• File bugs related to implementation
• Start implementation

Specifics:

Had a lot of great progress this week. The UX team had a chance to narrow focus for future Theme/UI work. This resulted in a very productive design lunch talk by Alex Limi and Alex Faaborg. We also had some great meetings about needed platform capabilities (posted to the Wiki by Alex Faaborg).

We currently have some working directions for 3.7 and 4.0. Not set in stone of course, but a firm direction to start with.

Firefox 3.7:

• Hide menubar by default(on Vista and 7, not XP).
• Sort existing menu items into something like Page/Tools buttons (actual implementation to be determined).
• Move the bookmarks menu item to a bookmarks widget. This can live on the bookmarks toolbar(default) or on the navigation bar.
• Create a home tab. Loads homepage in 3.7 to have expanded functionality in 4.0.
• Combine stop/reload into one button. Optional separate stop and reload buttons in the customization pane.
• Progress “line” under location bar on active tab. At the top of the tab for background tabs.

Firefox 4.0:

• Introduction of “App” tabs
• Combine location bar and search bar (separate location and search items can be customized).
• Tabs-on-top option (possibly left/right as well).
• In bar search “button” with drop down of other types of search.
• Ability to attach stop/reload/go to location bar (TBD).
• Expanded home tab functionality.
• Disable bookmarks bar by default if it has not been altered from default.
• Remove status bar. Create a place for extensions.
• Profile/identity UI.

I have spent some time refocusing on 3.7. Exploring toolbar handling on glass, experimenting with different toolbar button visual styling and ideas on button hovering.

Bookmarks Toolbar Variations

Experimented with a few different styles for handling toolbars on Glass:

• Flat Box: Simple translucent background
• Inset Box: Similar to the above, but with an inset appearance
• Expanded Background (Translucent White): Expand a background from the tab strip to below the navigation bar. Translucent white to remain a neutral background
• Expanded Background (Translucent Grey): Darker but still neutral background
• Expanded Background (Translucent Light Blue): Match Windows 7 toolbar blue
• No Background: Floating toolbar items. Probably the least attractive option due to legibility concerns

Navigation Button Style Variations

Tried some different styles for navigation toolbar buttons. Smooth style(original), more glassy/sharp style and a more plastic variation.

The glassy style strikes me as probably too much. The plastic style might be something more suited to XP.

Button Hover Exploration

Some initial ideas on how to handle hover states. This might be a good place to integrate some color into the more neutral style.