March 23rd, 2011
The Design Evolution of Firefox 4
My original plan was to write an entry with a general overview of the UI changes in Firefox 4. However Limi’s excellent post covers that nicely.
Instead I decided to go through all of the design mockup iterations and make a slideshow.*
Warning: Lot’s of images! Might take a bit if you have a slow connection
It’s been a long trip from where we started to now. The first mockup I have for what would eventually become Firefox 4 was done in June of 2009 for the then planned Firefox 3.7. The design changed quite a bit from inception to completion. Of course not all aspects of the “final” design made it into Firefox 4.
Where does Firefox visual design go from here? “The Future” is a topic that has been consuming most of my thoughts these days and I plan to write up my thoughts on it soon.
Thanks to everyone who made the visual update for Firefox 4 possible!
* Slideshow built with http://www.ravelrumba.com/blog/html5-slideshow/ by Rob Flaherty
Tags: Theme
This entry was posted on Wednesday, March 23rd, 2011 at 4:55 pm and is filed under Firefox. 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.
18 Responses to “The Design Evolution of Firefox 4”
|Leave a Reply
If I cam make a humble suggestion (design wise) I would add that both the bookmarks and downloads managers should get the same treatment the addons manager got and migrate to a tab. The settings panel could go as well but that’s not as critical imho.
OH also: a chrome-like download bad wouldn’t be half bad but there might be other options on the download managment side.
Kudos on the great work so far. I wasn’t a big fan at first but the end result is great imho.
@Dextro We have plans to integrate most of those things into tabs (in-content)! Not sure on a timeline just yet.
And why are you the only browser (opera excluded) with a dedicated search bar still. Really? Isnt the awesome bar awesome enough without a search bar to hang out with it?
I just wish XP had gotten some more attention … implementationw-wise (the mockups are nice, but the ideas are not implemented)
Nice slideshow, tough not usage with touch-based devices.
Swipe-left/right gestures support would have been cool.
@Carson
You might also include Safari in there too, but not firefox. You can still search from the awesomebar, and if you want, use keywords to search from multiple search engines from the awesome bar. So I don’t see your point
Nice!
I’m also waiting for more In-Content UI stuff!
This “design evolution” shows that Firefox didn’t do copy/paste UI look from Opera as many people are saying. Some of stuff were mockups before they showed in Opera. But Opera released version faster, making Firefox 4.0 look like a copy/paster.
@ Carson
Firefox sets itself as the only browser for proper decent intelligent people (opera excluded) BECAUSE it has a dedicated search bar. That way, not only can you search with the engine you want with ease, but also you can get browse-by-name in the awesome bar (although it was dropped by default for Firefox 4, which was surely the idea of the same genius that thought of killing the titlebar), which is a killer feature, and, on top of that, you get fantastic drag-and-drop for text selection anywhere in the webpage, which is also a killer feature. And then it makes the toolbar look prettier, which is a plus, too.
If you don’t like it, you can just hide it. After all, the awesome bar acts EXACTLY like the stupid merged bar in Chrome. In a very real way, it’s not that Chrome or IE9 or Safari have an omnibar: they just don’t have a search bar at all! Firefox has it. So, there.
Seriously.
Have the adaptive Glyphs for Linux been dropped or are they still being worked on?
By glyphs, I mean the new icons for the navigation toolbar and tab close buttons.
Everytime I see the original Firefox 4 mockups, I weep softly inside. It went from unique and awesome… to generic and ugly. Amazing how much community input can ruin a UI.
Hopefully it gets fixed by Firefox 5 or 6.
@Mark: It’s still something we would like to do but I placed on hold for a while because it requires a little more thought.
I wish progress bars made it to the final version.
I like what you did Stephen, but i’m really disappointed that all what they can do is addons manager – it’s like big artificial limb of in-content ui… I really hope, that next Fx release will bring more new elements…
When will you post something about future plans for Firefox GUI?
Btw, why did you ruin the UI on Linux? I don’t get it. It was looking good on mockups but you made it look awful and it’s also slower than a snail. It gets laggy on one open tab, freezing, and it’s just the worst I’ve ever used. So right now I must use Chrome on Linux even though I’m a Firefox fan, I use it on Windows as my default browser but every day I feel like I should change to Chrome, I don’t know but it’s like my favorite browser is lacking. Please improve it fast. Thank you.
I like it. It’s come a long way even since I joined beta. Great work.
Hi there! Can I ask something “off-topic” ? I don’t know where to ask…
Why Fx with custom Windows theme becomes white and loses all the shadows of menus?
Only on Fx happens while on any other browser, not… I’d really appreciate an answer even while being “off-topic.”
Thank you!
I’m very curious as to what the motivation to go from
http://stephenhorlander.com/pages/firefox-4-ui-evolution-slideshow/slideshow.html#18
to
http://stephenhorlander.com/pages/firefox-4-ui-evolution-slideshow/slideshow.html#19
was? Is it mostly to not look like Chrome? Isn’t the partial loss of the title worth all the extra space?
I would recommend firefox as it has better option than most and you can use more if need be. But hey of to play with my Nikon D5000