From the lab: Pinstripe theme tab redesign

After seeing Panther’s new tab controls, I thought it was time to redesign Pinstripe’s browser tabs. I want to make the tabs less visually disturbing than the Aqua tabs while being usable and polished. Here’s what I have so far. Click on the thumbnail below to view the whole image. Please comment on the design and suggest changes. Bonus points if you create a mockup of how you think it should look!

P.S.: The screenshot is of the beta of Pinstripe 3 on Mozilla Firebird with the SmoothStripes theme. I don’t use OS themes myself but I plan to make the next version of Pinstripe more theme-friendly.

19 thoughts on “From the lab: Pinstripe theme tab redesign”

  1. I suggest:
    – remove drop shadow from personal toolbar
    – render edges of selected tab slighly rounded (like Safari)

  2. I agree – slightly rounded edges would just finish this off nicely.

    One question on the tabs – will they stay that way in Panther? I’m not keen on the new tab system, but I’m assuming as these aren’t the standard OS X tabs, that they’ll stay the same. I hope so!

    Please release this soon – I might switch to Firebird once you do!

  3. How about this?

    That screenshot I linked to in the original post includes Panther’s new standard tab control. These new “tabs” will be seen on Camino in Panther. I’m not sure I like them either. I wonder why they opted for a new style over the well-established visual metaphor of tabbed folders.

    Jonathan, if you’re considering switching to Firebird from Safari or Camino, you might be annoyed at the outstanding bugs. You have to be tolerant of a handful of major quirks to use Firebird as your everyday browser on OS X. The bugs will get fixed of course but I’m not sure when.

    From Dave Hyatt:

    “In other words, feel free to criticize it on OS X, but understand that the design of Firebird is not going to put OS X first. It’s going to put Windows first. If you want browsers designed for the Mac, use Safari and Camino. That’s what they’re there for.”

  4. I think the slightly rounded corners makes all the difference. Let us know when its ready!

    ‘Switch’ may have been the wrong word – ‘try’ would be better. Its quite a shallow reason, but I won’t even try Firebird because its too ugly. I like to use a browser for a while and get to know it – if the interface can be improved to this level, I can at least give Firebird a go. I use Camino nightlies mostly, so I’m used to putting up with some bugs (granted OS X Firebird has more!).

  5. Could you combine reload and stop button like it is in Safari? The two button are exclusive and take unnecessarily too much real estate.

  6. Probably not in Firebird where the reload and stop button are two different objects and can be placed wherever you want on the toolbar. It might be doable in Mozilla the suite, but I think combining the stop and reload buttons is a bad idea because it’s so easy to hit reload when you meant to stop the page from loading. I also try not to mess with Mozilla’s basic interface too much so a Mozilla user will have the experience they expect (just a nicer one).

  7. Kevin – comparing the two screenbshots again, I rather like the slight drop shadow under the toolbar on the first one. It adds a bit of depth and helps seperate the tabs from the toolbar. You can’t please everyone!

  8. I think I will experiment with a less severe drop shadow..

    Also, a new version of Pinstripe will have to wait at least a week, because my Powerbook is going in the shop to fix a display issue.

  9. I installed Firebird and Pinstripe a few days ago. The browser tabs look great, exactly the way I hoped they would. Nice! 😉

  10. So, is there any progress on making Pinstripe compatible with the latest version of Firebird. I really miss that look.

  11. The ‘inactive’ color in the Panther screenshot is the same as the ‘active’ color in the Pinstrip 3 screenshot. This is sure to confuse some/most users.

    Why not use the highlight color the OS uses?

    If not, maybe some border highlights could make the active tab look more like it’s on top. To me, it looks like the highlighted tab is sunken, which doesn’t make sense from an Aqua lighting perspective – the top front light would reflect more from the topmost items.

  12. not a fan of the new tab design… there is not enough differentiation between the tabbed and non tabbed areas. Is there a way to control the font in the non-active tabs?

    Also I’d suggest slightly rounded edges… just a pixel or two.

    Looking forward to pinstripe for Moz 1.5

  13. “Looking forward to pinstripe for Moz 1.5”

    I second that. I want to upgrade Moz but I cannot stand any other theme. Does Mozilla have any official documentation of theming?

  14. Hi, Kevin,

    Sorry to take so long to respond, I just came back after downloading a 1.5RC. 🙁

    What I was trying to get at was the colors in the Panther tab controls vs. the colors in the Pinstripe tab controls.

    In the Panther screenshot, the active tab is blue, the inactive tabs are light-gray.

    In the Pinstripe screenshot, the active tab is light-gray.

    So, we have a conflict of color meanings, which might confuse a novice user and might slow down a more experienced user. What a color means in the context of a Panther tab is the opposite of what it means in a Pinstripe tab.

    The Panther tabs eschew the file cabinet metaphor, and I’m not sure I like it yet, but that seems to be the direction Apple is taking. It probably makes sense now that we have office workers who don’t use file cabinets.

    I really like the new screenshot you posted, and I think it might in many ways be a better tab layout than Apple’s done in Jaguar, but I think of Pinstripe as truely Aqua-consistent theme for Mozilla. I place consistency one tiny notch above optimal functionality on the Mac, so I would advocate emulating Jaguar’s tab look and feel. Variable tab sizes might be tricky or impossible, though.

    Notice how Safari skirts the whole issue by chickening out with Metal? 😉

Comments are closed.