September 2nd, 2011
Design Status Update 2011/08/21 – 2011/09/03
Design (mostly) updates for the last two weeks:
- DevTools (more DevTools info because this stuff is all kinds of awesome!)
- Helping Paul with the images and CSS for the Highlighter toolbar
- Specs for Highlighter toolbar and elements: Mac and Windows
- HTML/CSS mockups for toolbars, buttons and breadcrumbs
- Close icon graphics for the Highlighter Bar
- Refined colors for InfoBar and breadcrumbs as well as some Highlighter overlay exploration:
- Finished UI-Review and mockups for the Style Inspector
- In-Content UI
- Breadcrumbs graphics and HTML/CSS mockup for Blair (bug 664068)
- Updated designs for in-content error and phising pages (bug 676795):
- Conditional Forward Button Styling Mockups for Jared
- General Theme Refinement
- Pushed a patch to explore updated Places and Bookmarks Toolbar icons (bug 683801)
- Updated icons for switch-to-tab (bug 683390)
- More Lion Theme Improvements (Only a few more Lion specific tweaks to go!)
- Patch for prettier Sidebars including Lion specific styles (bug 680256)
- Pushed patch for Lion Specific text-fields to mozilla-inbound: c8cd6f227ead
- Landed new Lion toolbar icons: 2392fc3ad758
- Landed fuzzy Lion back button fix: 1aff514348de
- Australis (Theme Refresh)
- Clarified project scope
- Windows XP window frame designs:
- Updated Linux designs to reflect other platforms:
- Laid groundwork for design specs
- Other
- Filed bug 683707 and wrote a test-case for -moz-transform: scale*(-1) graphic distortion problems
This entry was posted on Friday, September 2nd, 2011 at 3:19 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
28 Responses to “Design Status Update 2011/08/21 – 2011/09/03”
|Leave a Reply
I’m not convinced yet, that these extremely curved tabs are the way to go. It’s still looking very good and removes even more clutter from the existing UI, but I’d really hope you’d continue working with the very pure and clear square tabs introduced for Windows 7 and just extending and improving this design for other platforms.
Stop teasing us with all the awesome! Only thing is, I think the XP themes should have less rounded tabs, and the minimise, maximise/restore and close buttons should be styled like the Vista/7 ones. Introducing a new flavour of these buttons is unneeded. Now if only Mozilla would spend some of that Google money on getting these themes implemented faster instead of whatever else it is they spend it on, that’d be just lovely.
Those curved active tabs do look oddly enormous. My main hope right now is that Firefox’s tab handling isn’t negatively impacted by whatever new design it receives.
Firefox has become increasingly well known lately for how well it handles large numbers of tabs, especially compared to Chrome or IE9 (both of which make it such a pain to use and manage more than a few tabs, there’s barely any advantage over the non-tabbed browsers of the old days).
Just for kicks, instead of these super clean-looking unrealistic mockups with 2 tabs, I’d like to see the occasional mockup with 2 (or more) ROWS of tabs below the nav bar.
The only thing I don’t like about the new theme is that the close button and Firefox button are joined to the left and right sides are the window. I really don’t like that look, because it’s very inconsistent with other windows applications.
Also, I think you should use the native minimise, maximise and close buttons, because the design of them keeps changing. They look very different in Windows 8.
The super-rounded tabs don’t look very native on any platform. I kinda liked how Firefox 4/5/6 blended in on Ubuntu.
What are the house and tree icons? I assume the house is some sort of persistent tab. Maybe it’s like the new tab page in Chrome. Except for it to be persistent, it’d have to contain info that doesn’t make sense on a new tab screen, like an unread email count or something. Or perhaps it’s just a home button that doesn’t look like a home button.
No idea what the tree is. Another persistent tab? Maybe it’s like the shortcuts that expand into program items in Windows 7.
I hope that I can use the customize palate and drag them around. Firefox already uses more horizontal screen space in the tab row than Chrome does. In Windows on a 1024×768 screen I can only see 7 tabs before they start scrolling. With two new buttons (and a fullscreen button on windows?), it looks like it’d go down to 6 visible tabs.
I think it is good to combine the back and foreward buttons with the adress bar, because these buttons influence the adress bar. But the Bookmark Star should stay in the adressbar such as the f1 button, because both “do” something with the url. Also the background tabs should be identifiable. And please don’t change the Caption Buttons, just imagine how it would look like, if every application would draw it’s own caption buttons.
The super rounded tabs seem like they would make the mechanics of tab dragging very confused. Do I drag the tab only? Is there padding around the tab that I can also click on? Should there be padding? If there isn’t, doesn’t that create a huge amount of dead space for what amounts to a trivial (imho) design change?
These tabs looks completely out-of-place when everything else in the design is square! It also looks too similar to the Google Chrome tabs. I don’t like this at all. Maybe if you redesigned it completely, it might work. Those first two images look pretty much perfected, though.
I agree with Dominic, the square tabs are visually pleasing and feel really compact, I’d love to see these on the Mac version of Firefox too.
Regarding the bookmark button, I personally use Firefox’s bookmarks very little and I’m pleased to see it being separated from the location bar. Although I suspect some people would prefer it if the bookmark button did the merge-with-location-bar thing that the stop/reload buttons do.
Otherwise I think it looks beautiful!
Why would you do that to the caption buttons?
Windows already lacks consistency between applications and this is not helping!
On the in-content error page we should be able to search or to have a suggestion about the url (“Intelligent error page”).
[...] längerem sind Entwürfe zum kommenden Firefox-Design “Australis” bekannt. Auf seinem Blog hat Stephen Horlander nun weitere und aktualisierte Mockups veröffentlicht, welche auch Windows XP [...]
I really like the DevTools work.
Looks like the majority of people don’t care for the rounded tabs.
Seeing them in a working example (like you’ve done in the past) might change some minds.
@James I’m not positive what those icons are, but they could simply be app tabs, pinned, whatever.
There is a feature in the works though along the lines of what you mentioned.
https://wiki.mozilla.org/Firefox/Features/New_Tab_Page
Stan says:
“Now if only Mozilla would spend some of that Google money on getting these themes implemented faster instead of whatever else it is they spend it on, that’d be just lovely”
So you somewhat praise Firefox and trash Mozilla all in the same comments?
Why don’t you do some research about what exactly Mozilla is all about, what it actually does with its money, and where it ALL comes from.
In other words, know what the hell you’re talking about before you spew crap.
I’ll give you a little info, you can look up the rest.
Google pays for the privilege of getting access, and by default to Firefox’s 450+ million users, or in Google terms, customers. There are many other companies that would pay to have that opportunity. I’m hoping to God that they get it.
Mozilla provides support such as grants and donations to organizations and individuals that are building things that fall in line with Mozilla’s overall mission. An open, accessible Internet, etc, etc.
After that and 1,000 other things like wasting $ on operating costs, they spend bucket loads of Google’s money on hookers, moonshine, and crack.
Ken Saunders says:
“So you somewhat praise Firefox and trash Mozilla all in the same comments?”
I wasn’t trashing Mozilla, but yes Ken, it’s possible to agree with some things a company does and not others. Calm down son.
@Ken Saunders:
In regards to the proposed new tab shape if it doesn’t work out in practice then we can move to something else. I also recommend trying the Australis theme from SoapyHamhocks to get a feel for it.
The icons on the far left are the Home Tab and an example App Tab (Forrst in the mockups)
Me more liked old Firefox 4′s XP mockups
@Stephen
These mockups are simply amazing. Your work is greatly appreciated
I have to ask one question out of curiosity though, what’s your plan for implementing the curved tabs? SoapyHamHocks used border-images in his Australis theme, but I don’t that that’s an option for Mozilla, right?
@Brandon: Thanks!
I don’t have a specific implementation plan, since I likely won’t be implementing it
We can, and do, use border-image. The problems historically have been using negative margins to get the correct overlap since it tends to cause bugs with overflow and drag-and-drop.
I don’t doubt these are solvable problems, it might just take some rework of the tabstrip.
@Stephen
Thanks for your reply! Previously, I had heard that curved tabs were near impossible, which is why I was both happy and confused when I saw your mockup for the new Australis theme a couple weeks back. I’m glad to hear that this is indeed within the realm of what’s possible
Firstly, it is a fact that Chrome use curve edge tabs first, if Firefox were to “copy” them, user will trash Firefox for being not creative at all.
Secondly, Personally I feel that square tabs feel neater.
Thirdly, since Australis removes the outlines of the background tabs, it might be better if users can choose how the primary tab look like(between Square tab default and its chrome rounded alternative).
I believe that this theme need to be put into nightly in order to get feedback.
I LOVE the new Firefox mockups you are working on. There are only a few things that I wish were not changed.
1. The inactive tabs looked nice the way they are right now in firefox 4
2. The ULTRA rounded tabs (like google chrome) in any of the mockups look kinda bad
Other than that… GREAT WORK on the design! ; )
“Big thanks” for contributing on killing UI consistency on all 3 platforms, Mozilla!
It looks pretty, but this shouldn’t be the way.
Very nice work, as usual. May I ask what is the background texture used to present the mockups? Thanks.
Please make the caption buttons look native. All the theming inconsistency is already a horrible problem with Windows, please don’t make it worse.
Oh my. I had just stumbled upon this article again and it irked me so much that I did not notice, that I’ve already commented on the same thing before!
Sorry about that
As a Windows/KDE user, I absolutely hate everything about “Australis”. The FF4 menu in the top-left made more sense as that has access to one of the screen’s four magic pixels. The blending of the background tabs into the background makes the interface look like a cluttered mess. The excessively rounded tabs are ugly and impractical. The min/max/close buttons on Windows have been butchered to look ugly and disobeyed the Windows default.
It seems that Mac fanatics have taken over the Firefox UI design and Windows/KDE has been an afterthought.
Loved the UI changes from FF3 -> FF4, but this: hate it, hate it, hate it. Leave things alone and as they are in FF11 please. Mac/Ubuntu users can do what they like, but please don’t force what works well only for this minority niche onto the mainstream majority.
As a contrasting opinion, I, as a linux/KDE user, love the Australis theme. Granted, not all aspects of it integrate perfectly well with KDE, but it works much better than the current almost-a-theme that firefox has on Linux.
Keep up the good work!
Dude updates! Quite intrigued to know what will be next.