Thunderbird’s Extreme Mac-over

Thunderbird theme before and after

After the Pinstripe theme landed in Firebird, icon designer Stephen Horlander and I dove in to a companion Thunderbird theme. We started in early November 2003 and finally hit the “let’s stop fiddling with it and get it out there” phase in March of 2004. I’ve gone through the messages that Stephen and I exchanged during that time and pulled out a few examples of design decisions.

(Jump to comments)

Because there’s more UI in Thunderbird than Firefox, it’s doubly important to keep the icons simple and minimize the clutter. It’s a neat trick to make a UI get out of the way when there’s so much of it. Did we pull it off? I have a hard time being objective about it.

Thunderbird toolbar evolution

The colors started out a bit too clowny. Looking back, they seem more appropriate on Windows XP. Thankfully Stephen modified the Junk, Forward and Reply icons to use more subdued colors.

Send mail icon variations

Apple’s Mail program features a paper airplane as a Send Mail icon. It’s very well done, but we wanted to avoid cliches and avoid copying Apple’s icons outright. I really liked all of the Send Mail icons that Stephen came up with, but none of the icons made us think “this is it”. The icons with the arrows on them are good, but ideally you want to use the primary elements of the icon to tell its story. We consciously tried not to overuse arrows in the theme. The last three icons were disqualified because the mailboxes might not be international enough. In the end we chose the mail slot and envelope icon and made a note to return to the icon later.

Thunderbird and Mozilla Suite message lists

Messages in the Mozilla Suite have a 16px icon on the left side of the Subject column which indicates what type of message it is, if it has been read, if it has attachments and more. Since Thunderbird has a separate column to indicate that a message has an attachment, it seemed that all of the things indicated by the Subject bullet icon are redundant. We felt pretty confident that we could drop the Subject bullet icon entirely. Actually, not entirely – one piece of information provided by the Subject bullet wasn’t redundant. We retained the small arrows to indicate if a message was replied to or forwarded.

Thunderbird delete icon variations

Stephen went on a rampage with this one to find just the right delete icon. I think he got it. There are some excellent ideas here but we went for the familiar circle with a slash.

Thunderbird folder lists

Here are some variations on the icons in the folder sidebar. Some of the icons are just a touch complex, but we made an effort to use just one element or shape so you wouldn’t need a magnifying glass to understand the icon. Since we tried to minimize the badges that we put on the actual folder and message icons, I played around with using red dots in the background to indicate that you have new messages. In the end we just turned the folder label blue, which in retrospect, may be a bit too subtle.

Thunderbird mark as read variations

Here are some variations on Mark Message as Read. I like the glasses :)

Thunderbird message header

Strangely, when Thunderbird displays a message, the headers (From, Subject, etc) are fixed to the top of the pane and do not scroll with the message. The Bugzilla report on the issue has been open for four years. Let me say that again: FOUR YEARS. Even if there is a good technical reason why this hasn’t been fixed by now, it does make Thunderbird’s UI seem cramped when reading mail in the default 3-pane view. We used a rounded rectangle style with margins that gives the appearance that the header box is inside the message pane. The only problem with this approach is that when a message is too long for the Message Pane, the top of the scrollbars appear to be floating.

At the end this four month process, Stephen and I were pretty sick of the Thunderbird theme. It all seemed to blur together. We’ve updated the theme recently to keep up with the new features that have been added to the program, like Shared Search Folders and RSS feeds. At some point we’ll return to it and try to improve on the design armed with a good dose of perspective and thoughtful feedback.

27 thoughts on “Thunderbird’s Extreme Mac-over

  1. I think you and Stephen had done an incredible job. I don’t use Thunderbird, as I’m still waiting for OS X Address Book integration, but every once in a while I launch it and marvel and how fine looking it’s become.

  2. I just switched to Tbird on the Mac. I must say, the GUI is very impressive. I think it may be the most attractive app I have. I feel less pressure to close it when I’m not reading or writing mail (and because TOP often reports that Tbird is sleeping with 0%) — that’s saying a lot: the design makes it FEEL lighter, less stiff, less processor and RAM heavy. A real case of design making a big psychological difference. I can’t thank you enough. Contributions like these make me feel good about … it all.

    JK

  3. Amazing job on the UI, I downloaded Thunderbird for the first time when the 1.0 release was announced and was immediately floored.

  4. Yeah, guys, you did a beautiful job. I use TB for Mac everyday and the look and feel is amazing. I used XP previously.

    I can’t believe how much effort and time went in – you guys are brilliant at graphic design – I wish I had 1/4 of that talent so I wouldn’t have to “borrow” most of the artwork on my web-pages :-)

    Send me a rate card – I am very interested in getting 6 icons for a new site I am designing…

    Thank You!

  5. Just superb work! The UI is more OS X than many cocoa apps out there. What you’ve done with an XUL app is incredible.

    Like neilIo I’m waiting for Address Book integration (and maybe an easier way to import from Apple Mail than fiddling with mbox’s) but I’ll be there when it happens.

    Really interesting reading on the progression of the icons too – glad you spent the time assembling them all. It can’t have been a quick task!

  6. Actually, while I’m still lurking, I do have one request. The wee icon to show whether you’re online just makes me think of the old Netscape days. Any chance Stephen could come up with a new icon for that?

  7. This looks greta! Excellent work! Since it’s inevitable that somebody will say this eventually here, I might as well go ahead and say it myself: I can’t wait for an official Winstripe theme for Thunderbird for Windows!

  8. I would guess that

    the “Do Not” (circle slash) icon is the junk mail icon (Do not open this), and

    the recycle bin is the delete icon (trash).

    Would I be right?

    (It looks like I could be wrong, as the sequence of icons next to circle-slash starts with an eraser, which seems more like delete/trash).

  9. The circle slash icon is for delete. I’m not sure it represents the “delete” action as clearly as possible, but Mac OS X users are familiar with the image from other Mac apps.

    The recycle bin is for “Junk”. You might think it means “trash” if you’re coming from a Windows world. We use a trashcan icon for “trash”. Trash and Junk are similar concepts, so I can see how it might be a bit confusing.

  10. An amazing improvement! The old icon set and the new are like night and day! Great work!

    I second Hicks and neilIO on that I’m waiting for integration with Address Book and transfering emails from Mail to TB isn’t an easy or smooth process. Also the composing window doesn’t seem as easy and flexible as Mails does for managing font use, colors, and quote management. And I get the feeling some things are harder to find in TB than in Mail. Anway, the big things are the Address Book and transfering the emails to TB.

    I’m also waiting to see if Apple will “raise the bar” with Mail in OS X 10.4 Tiger.

  11. I’m a recent Mac convert — made the “switch” just this Summer from Windows. Having been a Mozilla advocate before the move, it was inspiring to see the UI of Thunderbird for OS X progress from release to release (0.7, 0.8, 0.9 and now 1.0). Great work Kevin, Stephen; it’s highly appreciated!

  12. Great icons! I wish that you guys could work out a Firefox as nice as this! As Mail seams to come nicely packed with MacOS X Tiger these 2 great looking applications will have a good fight. And it’s better to have 2 good looking e-mail apps on Mac than none, right?

    My bet is that Thunderbird wins in the end!
    PS: When is Mozilla Store going to launch Thunderbird polo shirts?

  13. I think Abiword is going to need more than icons, they are going to need a full Cocoa GUI programmer/designer.

  14. Excellent work documenting your thought and decision-making process. Understanding how you arrived at your final designs really connects the users to the care you put into the design. I don’t user Thunderbird, but after reading this, you can bet I’m going to download it and try it out.

  15. Firefox got some new icons in past Pinstripe releases. Eg. Back, Foreward, and Stop.
    Thunderbird still has the old icons for Previous, Next, and Stop.
    Are these icons going to be synced with Firefox?

  16. KAMiKAZOW, yeah we didn’t get around to syncing those icons up to the Firefox theme. I’ll get it done for version 1.1 :)

  17. The icons look great. I would love to see a complimentary icon set for my desktop. At the very least maybe a full size version of the folder used in the themes. Great work!

  18. I agree with the “clown colors” being a bad thing, but right now thunderbird pinstripe strikes me as very “grey” – even firefox on the mac has more color than that.

  19. I’ve said it in previous posts but I’ll say it again — excellent work on the Thunderbird theme, guys!

    I too would love to see support for Address Book. (I know that’s not your job, Kevin. :)) It would make life easier on those of us who have (or plan to get) Bluetooth phones and want to sync them without maintaining two address books.

  20. Pingback: Veerle's blog

Comments are closed.