• Updated Windows 7 version of LocationBar results designs
   
• Exploration of named Search Engine button treatment (mostly interactive):
• Animated Button 01
• Animated Button 02
   
• Download Panel Design Specs in HTML/CSS for the great work Paolo is doing on Bug 564934
   
• Download Added Animation ideas (now with CSS Animations!)
• Animate Enlarging Arrow
• Animate Dropping Arrow
   
• Add-ons Dictionary Icons
   
• Lion Theme Improvements
• Markus landed mac-lion-theme metric: Bug 679717
• Patch for improving Lion icons: Bug 679708
• Patch to fix fuzzy large buck button: Bug 679771
• Filed bug for adding texture to additional toolbars: Bug 680247
• Filed bug for updating Lion sidebars: Bug 680256
• Should look closer to this soon:
  
   
• DevTools
• UI-Review and specs for Highlighter InfoBar
• Working on overall design specs for Developer toolbar: bug 676255 and bug 676253
   
• Australis (Theme Refresh)
• Lagging behind on this a bit due to some more immediate stuff. Going to finish up initial designs and populate the Feature page next week.
   

Instead I decided to go through all of the design mockup iterations and make a slideshow.^*

Warning: Lot’s of images! Might take a bit if you have a slow connection

It’s been a long trip from where we started to now. The first mockup I have for what would eventually become Firefox 4 was done in June of 2009 for the then planned Firefox 3.7. The design changed quite a bit from inception to completion. Of course not all aspects of the “final” design made it into Firefox 4.

Where does Firefox visual design go from here? “The Future” is a topic that has been consuming most of my thoughts these days and I plan to write up my thoughts on it soon.

Thanks to everyone who made the visual update for Firefox 4 possible!

^* Slideshow built with http://www.ravelrumba.com/blog/html5-slideshow/ by Rob Flaherty

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

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

There are many flavors of Linux with various themes. As well as two major desktop environments along with several other minor ones. All with their own unique style. Even though it’s challenging one really great thing about working on a Linux theme is how amazing these environments are looking now.

As I stated in my post about the Mac theme refresh one of the goals has been a greater cross platform visual consistency. This shouldn’t necessarily come at the expensive of a native look however. For 3.0 a lot of fantastic work was done on making Firefox on Linux use native controls and icons. It would be really nice to balance that with picking up some of the same ideas from the Windows and Mac theme.

Refresh for Firefox 3.7

In addition to theme and UI changes already discussed for Firefox 3.7 and 4.0, there are some proposed Linux specific visual changes:

• Consistent Back/Forward Buttons: Use the same back/forward shape as on the other platforms. The back button would use the same texture as the other buttons however it would be round and larger.
• Buttons vs Icons: Switching to a button+glyph style for the toolbar items. This would be instead of the more representational style that is widely used. It also is a deviation from the common system standard of having icons and then a button shape on hover.
• Curvier Tab Shape: Match the tabs to the proposed tabs on Windows and Mac while keeping the native texture and color.
• Removing Toolbar Separators: Goes a ways towards reducing visual complexity as well as external consistency.

Alternative Icon Treatment

Another idea would be to include the back/forward shape but use traditional icons instead of glyphs everywhere else. However this looks a little strange and doesn’t meet the goal of cross platform consistency.

How Would This Look with Various System Themes

As I talked about above there are a wide variety of distinct themes available for Linux. The most ideal approach to this would be to use the native button style, theme specific icons and replace the glyphs based on color scheme.

Some examples of how this could work out:

Refresh for Firefox 4.0

As discussed perviously a goal for 4.0 is to reduce the UI footprint of Firefox. Adding tabs to the top of the UI accomplishes this (along with other things).

Please keep in mind this is all customizable.

For this configuration the menubar would be hidden and Page and Tools menu buttons would be aded to the toolbar. The titlebar would extend down behind the tabs.

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 or visit the Linux Theme Refresh wiki page.

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.