Canmove, confirm
455
edits
Changes
Created page with '= Mac Theme/UI Refresh for Firefox 3.7 = File:Fx-3.7-Mockup-Mac-i03-Tabs-Hanging-Large-Back.png The overall design changes for Firefox 3.7 on Mac are mostly the same as wha…'
= Mac Theme/UI Refresh for Firefox 3.7 =
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Hanging-Large-Back.png]]
The overall design changes for Firefox 3.7 on Mac are mostly the same as what is being [[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Direction_and_Feedback|proposed for Windows]]. Structurally they are very similar with a notable exception:
*'''The Menu Bar''': The Menubar on Mac is different from its counterpart on Windows. There is no system wide push to phase it out and it is an integral platform UI element.
*'''Page and Tools Buttons''': Since the Menubar is not being changed these buttons will not be on by default. They can be added from the Customization sheet if desired.
In addition to the structural changes [[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Direction_and_Feedback|already proposed]] the Mac theme is primarily focusing on visual design changes.
== Update to Visual Styling ==
One goal of this visual refresh is an increased amount of cross platform consistency where it makes sense. This means we have tried to incorporate similar(or even identical) shapes for items such as buttons, glyphs and tabs. The changes to make these things fit in are how they are styled and textured.
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.
*'''Hiding the Tab Overflow Icon''': Hide the tab overflow icon unless there is actually overflow.
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 the tab attached webpage style 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 Version ===
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Hanging-Small-Back.png|300px|left|thumb|Small Back Button Version]]
A version to illustrate how it would look with Small Icons enabled.
<br style="clear:both" />
== Other Tab Ideas and Experiments ==
There are other ideas that have been explored in regards to how to handle tabs visually.
'''''Note that these ideas are not being proposed but could be useful as a discussion spring board.'''''
'''Page Attached Tabs'''
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Up-No-Strip.png]]
In addition to the hanging tabs idea there was also some exploration with having page-attached tabs. This approach would match other platforms more closely as well giving a direct visual link between the webpage and the tab containing it. However it is less clean visually as well as feeling foreign on the system.
'''Page Integrated Tabs'''
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Up-Integrated.png]]
A more experimental idea are tabs that actually acquire attributes from the webpage. Such as approximating background color. This gives a direction visual link between the page and the tab and could help to quickly identify tabs.
'''Rectangular Button Tabs'''
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Up-Angled.png]]
An experiment with tabs that are not attached to the toolbar or the page but are more like tab buttons.
== Personas/Lightweight Themes ==
[[File:Fx-3.7-Mockup-Mac-i03-Personas.png]]
This is an example of how the proposed changes could work with Personas or Lightweight Themes.
= Mac Theme/UI Refresh for Firefox 4.0 =
[[File:Fx-4.0-Mockup-Mac-i03.png]]
== Visual Styling ==
Style changes from 3.7 to 4.0 are fairly minimal except for new elements that must be styled:
*'''Extensions Area''': Proposed idea is to be stylistically different from the rest of the toolbar. Lighter and slightly raised.
*'''Profile Button''': The Profile button can be seen in the upper right of the mockup. The idea is to be attached to the window, much like a label or a tag.
*'''Search Selector''' Style: This area is still not fully developed. An idea is to have the search selector change color based on which search is being used.
=== Small Version ===
[[File:Fx-4.0-Mockup-Mac-i03-Small.png]]
A version to illustrate how it would look with Small Icons enabled.
== Darker Background Versions ==
[[File:Fx-4.0-Mockup-Mac-i03-Darker.png]]
An alternate version with a darker background. This would make active tabs stand out more.
== Identity Buttons Variations ==
[[File:Fx-4.0-Mockup-Mac-i03-Identity-Button-Variations.png|left|thumb|Identity Buttons Variations]]
A few variations on the profile identity button:
*'''Light Rounded Background Version''': Slight background to imply that it is a button. Might be odd because that kind of background usually implies "selected".
*'''Attached/Label Version''': Attached to the window. Visually much like an identity label or a tag. This is branded as your browser.
*'''No Background Version''': No background. Could have a background on hover/active. Fits in with other applications with elements in titlebar (e.g. iCal's timezone switcher).
<br style="clear:both" />
== App-Tab Example ==
[[File:Fx-4.0-Mockup-Mac-i03-App-Tab.png]]
How an App-Tab could look. No toolbars for navigation since all navigation is self-contained in the web app.
== Potential Styling for Various Search Types ==
[[File:Fx-4.0-Mockup-Mac-i03-Colored-Search-Selector.png]]
This is an area that conceptually is not yet fully developed. Potential styling for search selectors in the combined location+search bar could change color based on which search engine you are using.
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Hanging-Large-Back.png]]
The overall design changes for Firefox 3.7 on Mac are mostly the same as what is being [[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Direction_and_Feedback|proposed for Windows]]. Structurally they are very similar with a notable exception:
*'''The Menu Bar''': The Menubar on Mac is different from its counterpart on Windows. There is no system wide push to phase it out and it is an integral platform UI element.
*'''Page and Tools Buttons''': Since the Menubar is not being changed these buttons will not be on by default. They can be added from the Customization sheet if desired.
In addition to the structural changes [[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Direction_and_Feedback|already proposed]] the Mac theme is primarily focusing on visual design changes.
== Update to Visual Styling ==
One goal of this visual refresh is an increased amount of cross platform consistency where it makes sense. This means we have tried to incorporate similar(or even identical) shapes for items such as buttons, glyphs and tabs. The changes to make these things fit in are how they are styled and textured.
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.
*'''Hiding the Tab Overflow Icon''': Hide the tab overflow icon unless there is actually overflow.
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 the tab attached webpage style 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 Version ===
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Hanging-Small-Back.png|300px|left|thumb|Small Back Button Version]]
A version to illustrate how it would look with Small Icons enabled.
<br style="clear:both" />
== Other Tab Ideas and Experiments ==
There are other ideas that have been explored in regards to how to handle tabs visually.
'''''Note that these ideas are not being proposed but could be useful as a discussion spring board.'''''
'''Page Attached Tabs'''
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Up-No-Strip.png]]
In addition to the hanging tabs idea there was also some exploration with having page-attached tabs. This approach would match other platforms more closely as well giving a direct visual link between the webpage and the tab containing it. However it is less clean visually as well as feeling foreign on the system.
'''Page Integrated Tabs'''
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Up-Integrated.png]]
A more experimental idea are tabs that actually acquire attributes from the webpage. Such as approximating background color. This gives a direction visual link between the page and the tab and could help to quickly identify tabs.
'''Rectangular Button Tabs'''
[[File:Fx-3.7-Mockup-Mac-i03-Tabs-Up-Angled.png]]
An experiment with tabs that are not attached to the toolbar or the page but are more like tab buttons.
== Personas/Lightweight Themes ==
[[File:Fx-3.7-Mockup-Mac-i03-Personas.png]]
This is an example of how the proposed changes could work with Personas or Lightweight Themes.
= Mac Theme/UI Refresh for Firefox 4.0 =
[[File:Fx-4.0-Mockup-Mac-i03.png]]
== Visual Styling ==
Style changes from 3.7 to 4.0 are fairly minimal except for new elements that must be styled:
*'''Extensions Area''': Proposed idea is to be stylistically different from the rest of the toolbar. Lighter and slightly raised.
*'''Profile Button''': The Profile button can be seen in the upper right of the mockup. The idea is to be attached to the window, much like a label or a tag.
*'''Search Selector''' Style: This area is still not fully developed. An idea is to have the search selector change color based on which search is being used.
=== Small Version ===
[[File:Fx-4.0-Mockup-Mac-i03-Small.png]]
A version to illustrate how it would look with Small Icons enabled.
== Darker Background Versions ==
[[File:Fx-4.0-Mockup-Mac-i03-Darker.png]]
An alternate version with a darker background. This would make active tabs stand out more.
== Identity Buttons Variations ==
[[File:Fx-4.0-Mockup-Mac-i03-Identity-Button-Variations.png|left|thumb|Identity Buttons Variations]]
A few variations on the profile identity button:
*'''Light Rounded Background Version''': Slight background to imply that it is a button. Might be odd because that kind of background usually implies "selected".
*'''Attached/Label Version''': Attached to the window. Visually much like an identity label or a tag. This is branded as your browser.
*'''No Background Version''': No background. Could have a background on hover/active. Fits in with other applications with elements in titlebar (e.g. iCal's timezone switcher).
<br style="clear:both" />
== App-Tab Example ==
[[File:Fx-4.0-Mockup-Mac-i03-App-Tab.png]]
How an App-Tab could look. No toolbars for navigation since all navigation is self-contained in the web app.
== Potential Styling for Various Search Types ==
[[File:Fx-4.0-Mockup-Mac-i03-Colored-Search-Selector.png]]
This is an area that conceptually is not yet fully developed. Potential styling for search selectors in the combined location+search bar could change color based on which search engine you are using.
