Mac Theme Refresh

Monday, October 5th, 2009

Recently the Firefox UX team settled on a firm UI direction for Firefox 3.7 and 4.0. The feedback was really amazing and I wanted to thank everyone who took the time to comment.

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

Some other ideas were also explored in regards to how to handle tabs visually. These aren’t necessarily things that are being proposed. However they might be a good springboard for discussion.

• 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.

Tags: Experimental, Mac, Theme
Posted in Firefox | 58 Comments »