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.

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

Subsequently I have turned my attention to how these changes would look on a Mac. The overall design changes for Firefox 3.7 on Mac are mostly the same as what is being proposed for Windows. Structurally they are the same with the notable exception of the menubar not being hidden. Since the menubar is not being removed that means the Page and Tools buttons will be off by default.

One goal of this visual refresh is an increased amount of cross platform consistency where it makes sense. This means we have tried to incorporate similar(or even identical) shapes for items such as buttons, glyphs and tabs. The changes to make these things fit in are how they are styled and textured.

Feedback that would be most helpful is constructive criticism specific to visual treatment. For example that button is too glossy, or that bit isn’t native enough, or maybe this color would work better, etc. Or any other kind of appearance feedback and ideas. Since this a very visual topic if you feel like a mockup would be better at conveying your ideas that would be great!

Refresh for Firefox 3.7

These are the changes from the current Mac theme:

• Button Shape: Using rounded rectangles instead of the curved-end buttons found in 3.0–3.6. This will match the native button shape as well as the shape planned for Windows.
• Button Texture: Deviation from the current bright and flat gradient to a slightly darker gradient. Also added a slight gloss and edge highlight for some added dimension/depth.
• Removal of Bookmark Bar Texture: Removal of the glossy bookmarks bar texture for less visual complexity and more streamlined look.
• Tab Shape: Slightly more defined tabs. Also rounded edges connecting to the toolbar.
• LocationBar Shape: Use a rounded rectangle LocationBar instead of a curved-edge. This creates a visual distinction between the LocationBar and the SearchBar even though the LocationBar is still technically a search field.
• Hiding the Tab Overflow Icon: Hide the tab overflow icon unless there is actually overflow.

Differences from the Windows theme:

• Back/Foward Arrows: Use system standard back/forward glyph shapes instead of the Windows arrow with a tail.
• Hanging Tabs: Instead of the tab attached webpage style seen in Windows we retain the hanging tabs approach from 3.0. This is the de facto system standard (e.g. Safari, Terminal, most 3rd part apps with tabs).
• No Icons on the Bookmarks Bar: This reduces icon overload and matches Safari.

An example of how it would look with “Small Icons” enabled.

Other Tab Ideas and Experiments

• Page Attached Tabs: In addition to the hanging tabs idea there was also some exploration with having page-attached tabs. This approach would match other platforms more closely as well giving a direct visual link between the webpage and the tab containing it. However it is less clean visually as well as feeling foreign on the system.
• Page Integrated Tabs: A more experimental idea are tabs that actually acquire attributes from the webpage. Such as approximating background color. This gives a direction visual link between the page and the tab and could help to quickly identify tabs.
• Rectangular Button Tabs: An experiment with tabs that are not attached to the toolbar or the page but are more like tab buttons.

Refresh for Firefox 4.0

Style changes from 3.7 to 4.0 are fairly minimal except for new elements that must be styled. In particular how to handle tabs-on-top as well as:

• Extensions Area: Proposed idea is to be stylistically different from the rest of the toolbar. Lighter and slightly raised.
• Identity Button: The Identity button can be seen in the upper right of the mockup. The idea is to be attached to the window, much like a label or a tag.
• Search Selector Style: The Identity button can be seen in the upper right of the mockup. The idea is to be attached to the window, much like a label or a tag.

An example of how it would look with “Small Icons” enabled.

An alternate style with a darker background. This would make active tabs stand out more.

Identity Buttons Variations

Did some experimentation with how to handle the profile identity button. Something that I think is very strong is the attached/label version.

• Light Rounded Background Version: Slight background to imply that it is a button. Might be odd because that kind of background usually implies “selected”.
• Attached/Label Version: Attached to the window. Visually much like an identity label or a tag. This is branded as your browser.
• No Background Version: No background. Could have a background on hover/active. Fits in with other applications with elements in titlebar (e.g. iCal’s timezone switcher).

Ongoing Discussion and Feedback

If you would like to leave feedback on these designs or just follow along there are few places to do that. You can comment on this blog, head over to the dev.apps.firefox thread on this topic or visit the Mac Theme Refresh wiki page.