Firefox 3 Skinning Progress

So I mentioned the other day that some theme related checkins took place. Here’s some screenshots for Mac/Windows for those interested. You can find some Linux screenshots on Michael Ventnor’s blog I’ve also got a little commentary on implementation thus far.

It should be noted that this stuff isn’t finalized and will definitely be tweaked. In the past things were adjusted until the very last moment, I expect we’ll see the same. Also don’t forget things like the planned keyhole shape aren’t even in place yet.

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

My general thought on this is that Windows XP has thus far been left behind. Linux and Mac OS X look absolutely awesome. Vista doesn’t look to bad, though in general I think the OS design is an ugly turd. For XP, the reload and stop button are particularly what looks the strangest. Both seem to thin and small. It really doesn’t fit the rest of the UI. Home I think actually is actually an improvement. A step away from the “dirty house”. Back/Forward haven’t been updated yet as I mentioned before.

Navigation Toolbar (Mac OS X 10.4)
Firefox 3.0b3 Navigation Toolbar (Mac)

Simply awesome. Enough said. Not even shown is the new tab design which is also better. I’ve got to put together a screenshot post of Mac OS X thus far so others can drool.

Options (Windows XP)
Firefox 3.0b3 Options (Windows XP)

I think this overall is better than the toolbar. I still have a few issues with it. For one the “Main” icon abstractly looks like a switch, but I’m not sure how apparent that is if you didn’t know what it was supposed to be. “Tabs” looks slightly distorted (that’s one tall tab) but otherwise good. I like the concept behind “Content” but I’m not sure I can tell what any of that is. Images is clearly in there, it would be nice if it was more obvious you can control popups from in there. “Applications” seems to work well. I’m really not even sure what “Privacy” is supposed to depict. Anyone know? “Security” and “Advanced” also very nice.

Options (Mac OS X 10.4)
Firefox 3.0b3 Preferences (Mac)

It’s pretty much the same old, nothing to report here. Looks good.

So there you have it. My 5 minute rundown of some icon changes. There will be more, and a lot more polish I’m sure. I’ll try and post a follow up later on and show how it’s changed. For anyone who hasn’t seen it yet, hopefully this gives you a little taste of the great UI design work being done.

13 thoughts on “Firefox 3 Skinning Progress

  1. “Privacy” is supposed to be a hanger off of a posh doorknob, but it looks far too busy at a bad angle to look like that. Have a look at Linux’s icon to truly see how it should be done.

  2. Mike: Thanks for the heads up. I honestly couldn’t tell. Now that you mention it, I do kinda see it. I think your right, it’s a combination of bad angle and being too busy.

    Personally I wish they went a little bit more like the Mac one, it’s very clear.

  3. Yeah, that privacy icon is indecipherable. If the iconic shape you’re going for is a door hanger, you probably shouldn’t have the door handle completely obscure that shape.

    To be honest, I like the mac one best; I don’t know if I’d have immediately associated it with a door hanger, but at least it’s a clean shape.

  4. The Windows XP Print button (not shown in article) isn’t even recognizable as a printer at all. I initially thought it was some abstract geometric shape, then I thought is was some post-modern building (“Falling Waters”). Only when I started remembering all the buttons I had there, and which one was “missing”, did I realize it was supposed to look like a printer.

    I really hope the “new” (but not improved) print button will receive some major overhaul.

    BTW: I agree that the Reload and Stop buttons don’t look good. The current (“old”) ones look much better. I also agree that the privacy icons aren’t very good. The Mac one would be better if (a) the red circle were a bit smaller, and (b) the viewing angle were a bit off-center.

    PS. Please have them do a “Purge” button too!
    https://bugzilla.mozilla.org/show_bug.cgi?id=75927

  5. I think the Vista icons look crappy, the crApple icons look just like every monotone crApple design I’ve seen and the Linux ones are just the nice but ageing Tango icons.

    Having seen the Vista Fx3 icons, I’ve just added them to the long and growing list of why I will never install Vista 🙂

  6. I dont like the XP security padlock icon. It looks as much like a hot air balloon basket as a padlock!

    Also, padlocks rarely have gold-coloured rings and the 3D orientation is all out of whack.

    As for the privacy icon, if it is supposed to be a door handle, why is it sittng the top right corner of ‘the door’ (what is supposed to be a document I assume, but that doesn’t make sense)?

  7. why on earth are mac buttons rounded? where does it come from, is there any other “native” application that uses that kind of rounded buttons?

    mail/preview have rounded buttons, but completely different icon style. it is safari, address book, dictionary, ical… these apps you should target if you want to aim standard leopard theme. look how well transmission has adopted it.

    look at the comments: https://addons.mozilla.org/en-US/firefox/addon/6050

  8. sticking that damn pad-lock icon where it disallows me to maximize that window is dirty pool !!

  9. I’m sure there’s always lots of debate around any new design but I’m dissapointed 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.”
    http://blog.mozilla.com/faabor.....tegration/

    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.

Leave a Reply

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