Firefox 3.0 Skinning Update

Back in January I posted some pics of the new skin in Firefox for those who haven’t tried it themselves. Figured I’d update with the latest.

For the navigation toolbar the most obvious change is the new keyhole design. My only complaint is that the menu that appears when you click and hold isn’t as intuitive since the arrow isn’t there.

Navigation Toolbar (Windows XP)
Firefox 3.0 Toolbar on Windows XP

Navigation Toolbar (Mac OS X 10.4)
Firefox 3.0 Toolbar on Mac OS X Leopard

My only objection about the prefs is that the Windows privacy option is a great example of an icon that’s seemingly impossible to interpret what it’s supposed to represent. The light switch for “Main” is also a little odd, but I can manage with that much better than the privacy icon. Other than that, I think they look pretty good.

Options (Mac OS X 10.4)
Firefox 3.0 Prefs on Mac OS X Leopard

Options (Windows XP)
Firefox 3.0 Prefs on Windows XP

That’s all for now folks. If warranted, I’ll post again with updates.

21 replies on “Firefox 3.0 Skinning Update”

It is an optical illusion. The top of the Home is smaller and makes us think it is not as tall as it really is.

Upon looking and looking, I think your right Ryan, it seems a little lower than the rest.

And Robert, the Privacy icon for the Windows version of Firefox is representing a door handle with an “hotel privacy card” on it. You know, those Do not disturb sign…

Please change the color of the home button roof. This way it looks as if somebody peed upon it… Brown or red would be much better. Otherwise good!

My only problem is that the home icon has a yellow roof?! WTF? Who has a yellow roof?

It looks like a 5 year old drew it 🙁

Bring back brown/grey roof tiles.


@ JB: We discussed what the privacy icon is last time in the comments. I guess my point is that it’s not obvious.

@ bp: I’ll try and update later with Vista screenshots.

@monk.e.boy: I believe yellow is because the goal is to keep the color palette using the same colors as the Firefox icon when possible.

The new home icon is atrocious. I’m still convinced that these are demo icons which will be completely replaced for the final, because I’m having a hard time believing that there are professional icon designers behind them. Even the reload button’s antialiasing looks like someone did it using the pencil tool or something.

– Chris

All in all I think the XP changes look great. I don’t mind the yellow roof and the stop and reload buttons look much better now that they are a little fatter, to match the back and forward arrows.

A funnier issue with the Main icon is a localisation problem – over in Britain it indicates the switch is in the off position 🙂 [and probably other countries, but I can’t speak with authority]

Chris, that’s exactly whatI think/hope. I’m on Mac OS and all the icons are so round it’s hurting my eyes. They are so different from all the other icons on OS X that they have to be temporary icons, otherwise I don’t see where platform integration would be.

I would recommend that you make the back part of the forward/back button on the Mac a bit smaller. This will reduce the amount of wasted space and still get the keyhole idea across. I think the forward to back relative sizes on the XP is just about right and the Mac on is disproportionately big.

I also think there should be some color on the Mac buttons but this seems to be falling on deaf ears.

I think the Home icon should have a white roof to be environmentally friendly to reflect sunlight…lol. People, it is a colour. It’s not that big a deal.

Btw, speaking of unrecognizable icons (re: win-privacy icon) I still have a hard time recognizing the windows New Tab icon. To me, it looks too much like a New Window icon. I can’t really tell that there is a tab in the icon. I think the small shape is major problem with the New Tab icon.

I’m sure there’s always lots of debate around any new design but I’m disappointed that better native integration with Windows has been discarded. The following link brought great hope that Firefox would look great on Vista and especially this quote: “Visual integration with Windows and OS X is our primary objective for the Firefox 3 refresh.?

Personally, I don’t like the new default style. I think it would be fine as an optional skin, but by default the browser should just blend into the desktop and look as native as possible.

Geez, people! Don’t forget that this is an open source project. If you can do better, get out your GIMP or Photoshop and lend the pros a helping hand! Designing 111 icons in both XP and Vista flavours is no piece of cake.

I like the icons but I don’t like that back and forward are now combined. I would normally remove the forward button completely, I rarely ever use it (normally I don’t use back that much either but I find that it is more useful then forward, If I go backward I tend to go a different direction, hence I never use forward).

I’d like it if I could remove the forward button again without removing back.

Thank you.

Don’t mind the listing of back and forward being combined into a single list with the currently active page being marked accordingly. Would want that drop down on the right side of the total button. And I want the arrows
to be the same size, I put no more importance on one of them vs the other.

The combined history has an advantage if you were dumping all of the items into a listing or into tabs. So that is fine with me, in being able to see everything at once.

What I do object to is the fact that with small icons that it is higher than
a standard 16×16 icon. I also would like to see the distinctive separate
green (/gray) arrows to show if there is anything in that direction (or not).
Green means go — there is something there. The Nightly has this as a little white scroller type arrows in a HUGE blue blob instead of fully formed green arrows. I normally only use the icons to show me if there is something else back or forward, I normally use the mouse or keyboard shortcuts if I’m not sure of exactly what it was.

My specs: (and it had been this way for a while)
Green arrow if something in that direction, gray if nothing in that direction, and a clear vertical (not curved) separation between the two arrows with list scroller on the right side of the pair.

Leave a Reply

Your email address will not be published. Required fields are marked *