Awesomebar

• list appears with bookmarked sites marked to the right
• close button in upper right to exit the awesomebar overlay
• search toolbar on the bottom

Dark on light awesomebar

Light on dark awesomebar

Alerts

• left endcap becomes highlighted and glyph appears indicating alert
• once endcap is pressed, arrow points to opened alert information beneath awesomebar

• main browser scoots off to the left and becomes faded as its priority lowers
• browser tools icon becomes pressed and links across to a pressed prefereneces icon
• top area lists the sections within preferences
• sections flow vertically, with toggles on some, other bars open for more options on touch

and a dropdown selector example:

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

To start things off, I thought I’d share an example of the look and feel I’m playing around with at the moment:

As you can see, so far I have been focused on creating the symbols for the buttons within the browser. The challenge is to make “recognition at a glance” icons that will hold up on the various resolutions of any handheld device this browser may be housed on. I’ve descided to go with what I think is a graceful solution – simply creating a “clickable” outer border in which the icon symbol sits – allowing the underlying stylings of whatever area/themed background the button sits on to shine through.

The top row of buttons show some of the various states used within the browser – default, disabled, pressed, active, and a solid fill colored version for alerts (will be used in various colors).

As for the rest of the icons, they are for various functions/sections within the browser and I will be labeling them later on in the process once we nail down what they should be used for.

Feel free to check in from time to time to track my progress!*

*note – Everything you see here is a work in progress.