User:Tro/Firefox 3.7 Mac Theme Mockups

From MozillaWiki
Jump to: navigation, search
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.


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

(For 4.0 Mockups: User:Tro/Firefox 4.0 Mac Theme Mockups)

Mac Theme Mockups for Firefox 3.7

Large Back Button


Proposed changes from the current Mac theme:

  • Button Shape: Using rounded rectangles instead of the curved-end buttons found in 3.0–3.6. This will match the native button shape as well as the shape planned for Windows.
  • Button Texture: Deviation from the current bright and flat gradient to a slightly darker gradient. Also added a slight gloss and edge highlight for some added dimension/depth.
  • Removal of Bookmark Bar Texture: Removal of the glossy bookmarks bar texture for less visual complexity and more streamlined look.
  • Tab Shape: Slightly more defined tabs. Also rounded edges connecting to the toolbar.
  • LocationBar Shape: Use a rounded rectangle LocationBar instead of a curved-edge. This creates a visual distinction between the LocationBar and the SearchBar even though the LocationBar is still technically a search field.

Differences from the Windows theme:

  • Back/Foward Arrows: Use system standard back/forward glyph shapes instead of the Windows arrow with a tail.
  • Hanging Tabs: Instead of page attached tabs as seen in Windows we retain the hanging tabs approach from 3.0. This is the de facto system standard (e.g. Safari, Terminal, most 3rd part apps with tabs).
  • No Icons on the Bookmarks Bar: This reduces icon overload and matches Safari.

Small Back Button


Alternative Tab Ideas/Experiments

Tabs Connected to Page
Page Integrated Tabs
Rectangular Button Tabs

Personas/Lightweight Theme Examples

Fx-3.7-Mockup-Mac-i03-Personas.png Example of how Personas or Lightweight themes could look in 3.7.