User:Tro/Firefox 4.0 Windows Theme Mockups

From MozillaWiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
Draft-template-image.png THIS PAGE IS A WORKING DRAFT Pencil-emoji U270F-gray.png
The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly.
If you have any questions or ideas, please add them as a new topic on the discussion page.

These are NOT FINAL! THEY ARE ONLY FOR BRAINSTORMING/EXPLORATION!

Feedback is entirely welcome and encouraged. Hit the discussion button at the top :)

(For 3.7 Mockups: User:Tro/Firefox 3.7 Windows Theme Mockups)

Initial Windows Theme Mockups for Firefox 4.0

Version A - Tabs-on-Bottom

Mockup-4-0-Vista-(TabsBottom).png

Possibly add a Bookmarks widget as an upfront replacement for the Bookmarks menu/Bookmarks toolbar (option to turn those on would remain).

Version B - Tabs-on-Top

Mockup-4-0-Vista-(TabsTop)-(LocBarSearch).png

The more contentious Tabs-on-Top concept.

Positives

  • Save Vertical Space
  • Efficiency/Remove Visual Complexity - Right now the tabs have to be connected to something. So we are adding an extra visual element for them to connect to.
  • Shorter Mouse Distance to Page Controls

Negatives

  • Breaks Consistency/Familiarity - Moving things confuses existing users.
  • Title is MIA - With the space removed from the titlebar you only get the truncated version in the tab.
  • Longer Mouse Distance to Tabs - Takes longer to mouse to a tab.
  • Lost Space - Sandwiched in between the application icon and the window widgets you lose some space.

Combo Stop/Refresh/Go Button

Mockup-4-0-Vista-(TabsBottom)-(LocBar).png Attached at the end of the location bar.

  • Turns green when you start typing.
  • Blends with the location bar when at rest.
  • Turns blue on hover.
  • Turns red when a page is loading.

The proposed iconography is mostly colorless. Adding color to these temporary action driven buttons will make it more obvious something is going on.