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)”