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.

Dao and Markus have already started to land bugs pertaining to the new theme/ui:

Windows:

• #544999 – New toolbarbutton style for the main window – You may have noticed this on trunk
• #547752 – Adjust toolbarbutton paddings and margins for small and big icon modes

Mac:

• #546874 – New style for the bookmarks bar

Some new theme bugs have been filed

Windows:

• #548027 – Tweak New Toolbar Button Style to Match Designs
• #546259 – enable aero glass for the main window
• #549061 – [Windows] New Style for Tabs

Mac:

• #547787 – New style for the tab bar

Mockup Iterations now on SVN

I posted the mockup Photoshop files to an SVN repository: http://svn.mozilla.org/design/projects/newtheme/

This can be accessed through the web or with an SVN client.

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

One area that animation would be very beneficial is with tab interactions. Specifically moving/arranging tabs on the tab strip, closing/opening tabs and tearing off tabs into new windows. Presently the feedback here isn’t as good or as elegant as it could be.

New Tab Animation

Some of the goals for animation are to make browsing feel faster, adding visual affordances that makes tasks more understandable and to make the browser more visually appealing. There is much more detail on the Wiki articles linked above. My goal was to quickly demo how this would actually look and feel because still images and wireframes can only convey so much.

Click the image below for the animation that shows how a new tab animation could look. It’s pretty short and fast.

It is hard to tell from the video how this would work frame by frame. The general idea is that after you click the new tab button that button itself grows into the new tab.

Tab Tear Off

This demo shows both tab rearrangement and tab tear-off.

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