Sep5'08
Skinning Fennec – Initial Screens
We’ve been plugging away at the default theme for Fennec and I’d like to share where we are thus far in the design. The following screens are the work in progress and any comments/concerns are always welcome!
Initial Page Load
This state of the browser would be visible when you are viewing a page and not at the top.
- browser name to the left is visible
- device system icons to the right are visible
Page with Address Bar
This state would be when the page is scrolled to the top.
- system bar elements fade to 50% as they become lower priority
- address bar becomes visible
- bookmarks button becomes visible
Page with Right Side Control Strip
As the user slides the page to the left, the control strip appears on the right.
- address bar remains visible
- control strip houses, in order, “add to bookmarks”, “back”, “forward”, “page tools”, and “browser tools”.
- website area is offset fro the strip with a shadow, making the site look as if it is sitting above the controls.
Page with Left Side Tab Bar
As the user slides the page to the right, the tab bar appears on the left.
- page thumbnails appear vertically
- thumbnails have a close button in the upper left
- two buttons appear at the bottom – the first to “open a new tab”, the second to “open a tab from your desktop (utilizing weave)”
Comments
Leave a Reply
What I’ve disliked all along with Fennec theming, and this proposal sounds similar, is the missing visual integration with the OS theme. I’m using a pretty slick hildon theme on my N810, and microB follows it nicely, but Fennec just doesn’t care and uses colors that so completely don’t fit with the rest of the OS that I happily go back to microB every time.
Any chance that can be changed?
Robert – OS look (and possibly feel) integration is something that we’re definitely going to be looking at. There are a lot of devices and OSes out there to integrate with, though, and, in the meantime, we’d like to have a OS-agnostic working theme.
Incidentally – what in your microB look echos your hildon theme? Is it just colours or icons as well?
Sean, Madhava: This is looking great. It’s nice to see these ideas take a life more full than than just our wire-frame mockups. I like the drop-shadow on the page — it gives a wonderful separation of content from controls. I also like the feel of the buttons; they nod at the OSX feel while also having a solid look of their own.
The one thing I’m not too much a fan of is the glass near the top. It feels a bit tacked on, and doesn’t do justice to the solidness of the rest of the design.
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.