Confirmed users
693
edits
Websites/Mozilla.org/One Mozilla/Style Guide: Difference between revisions
Jump to navigation
Jump to search
Websites/Mozilla.org/One Mozilla/Style Guide (view source)
Revision as of 04:51, 27 April 2012
, 27 April 2012→Content Outline
| Line 52: | Line 52: | ||
* Brands | * Brands | ||
** Mozilla | ** Mozilla | ||
*** Visual identity guidelines (includes building out a Mozilla style more than we've done in the past; also includes defining when the dino should and shouldn't be used) [[https://bugzilla.mozilla.org/show_bug.cgi?id=749440 Bug 749440]] | *** Visual identity guidelines (includes building out a Mozilla style more than we've done in the past; also includes defining when the dino should and shouldn't be used) [[https://bugzilla.mozilla.org/show_bug.cgi?id=749440 Bug 749440], [https://bugzilla.mozilla.org/show_bug.cgi?id=749442 Bug 749442]] | ||
*** Brand platform (if there is one) | *** Brand platform (if there is one) | ||
*** Sub-brands (Webmaker, Popcorn, Spaces, etc) | *** Sub-brands (Webmaker, Popcorn, Spaces, etc) | ||
| Line 70: | Line 70: | ||
* Communications materials | * Communications materials | ||
** Standard device illustrations | ** Standard device illustrations | ||
** Gear | ** Gear [[https://bugzilla.mozilla.org/show_bug.cgi?id=749445 Bug 749445]] | ||
** Collateral (ex. sample banner for trade shows) | ** Collateral (ex. sample banner for trade shows) [[https://bugzilla.mozilla.org/show_bug.cgi?id=749443 Bug 749443]] | ||
** Corporate ID | ** Corporate ID [[https://bugzilla.mozilla.org/show_bug.cgi?id=749443 Bug 749443]] | ||
** Presentation templates | ** Presentation templates [[https://bugzilla.mozilla.org/show_bug.cgi?id=749443 Bug 749443]] | ||
* Copy | * Copy | ||
** Tone | ** Tone | ||
| Line 81: | Line 81: | ||
=== Websites === | === Websites === | ||
* Sandstone overview | * Sandstone overview [[https://bugzilla.mozilla.org/show_bug.cgi?id=749508 Bug 749508]] | ||
** Responsive grid | ** Responsive grid | ||
** Tabzilla | ** Tabzilla | ||
| Line 88: | Line 88: | ||
** Button styles | ** Button styles | ||
** Examples gallery (to provide guidance on how the style can be stretched, and what constitutes a Mozilla design) | ** Examples gallery (to provide guidance on how the style can be stretched, and what constitutes a Mozilla design) | ||
* Direction on different styles (ex. orange download funnel pages vs blue informational pages on the Fx site) | * Direction on different styles (ex. orange download funnel pages vs blue informational pages on the Fx site) [[https://bugzilla.mozilla.org/show_bug.cgi?id=749508 Bug 749508]] | ||
* Blog templates and details | * Blog templates and details [[https://bugzilla.mozilla.org/show_bug.cgi?id=749508 Bug 749508]] | ||
* URL structure | * URL structure | ||
=== Product Design === | === Product Design === | ||
==== Firefox ==== | ==== Firefox (General) ==== | ||
*Overall design principles | [[https://bugzilla.mozilla.org/show_bug.cgi?id=749509 Bug 749509]] | ||
*Overall design principles | |||
**Beautiful Engaging Design | **Beautiful Engaging Design | ||
**Soft, Friendly, Human | **Soft, Friendly, Human | ||
| Line 106: | Line 107: | ||
==== Mobile (Smartphones, 7" & 10" Tablets: Android, B2G, Metro, Kindle Fire) ==== | ==== Mobile (Smartphones, 7" & 10" Tablets: Android, B2G, Metro, Kindle Fire) ==== | ||
[[https://bugzilla.mozilla.org/show_bug.cgi?id=749510 Bug 749510] | |||
*INTRODUCTION | *INTRODUCTION | ||
**Overview (Key parts of the UI) | **Overview (Key parts of the UI) | ||
| Line 160: | Line 162: | ||
==== Desktop (Windows, Mac, Linux) ==== | ==== Desktop (Windows, Mac, Linux) ==== | ||
[[https://bugzilla.mozilla.org/show_bug.cgi?id=749511 Bug 749511]] | |||
*INTRODUCTION | *INTRODUCTION | ||
**Overall UI | **Overall UI | ||
| Line 212: | Line 215: | ||
***List Items | ***List Items | ||
* | ==== Thunderbird ==== | ||
[[https://bugzilla.mozilla.org/show_bug.cgi?id=749511 Bug 749511]] | |||
* Guidelines | |||
==== Marketplace ==== | |||
[[https://bugzilla.mozilla.org/show_bug.cgi?id=749514 Bug 749514]] | |||
* Guidelines | |||
* App submission Marketplace graphics requirements/dimensions | |||
* App browsing grid styles | |||
* Standard glyphs | |||
* Default layout theme (color/typography/grain/gradients) | |||
* UI elements | |||
==== Persona ==== | |||
[[https://bugzilla.mozilla.org/show_bug.cgi?id=749516 Bug 749516]] | |||
* Popup | |||
** Guidelines | ** Guidelines | ||
** Default layout theme (color/typography/grain/gradients) | ** Default layout theme (color/typography/grain/gradients) | ||
** UI elements | ** UI elements | ||
* | *** Primary button | ||
** | *** Secondary button | ||
*** | *** Error styles | ||
*** Default | *** Default avatar | ||
*** | *** Lightbox style | ||
**** | * persona.org | ||
**** | ** Home page | ||
**** | ** Tour | ||
**** | ** Manage page | ||
**** | ** Apps dashboard | ||
** | * Native UI | ||
*** | ** Sign into the browser | ||
*** | ** Sign into sites (mirrors the popup functionality) | ||
*** | |||
*** | ==== B2G (Gaia) ==== | ||
** | [[https://bugzilla.mozilla.org/show_bug.cgi?id=749517 Bug 749517]] | ||
*** | * Design principles | ||
*** | * Design framework | ||
** Patterns | |||
*** Gestures | |||
*** App structure | |||
*** Navigation | |||
*** Selection | |||
*** Notifications | |||
*** Flexibility | |||
** Building blocks | |||
** Tabs | |||
*** Lists | |||
*** Grid lists | |||
*** Scrolling | |||
*** Spinners | |||
*** Choice selector | |||
*** Buttons | |||
*** Text fields | |||
*** Seek, progress & activity | |||
*** Switches | |||
*** Dialogs | |||
* Visual language | |||
** Devices and displays | |||
** Metrics and grids | |||
** Typography | |||
** Color | |||
** Iconography | |||
==== Innovations ==== | |||
** Pancake | ** Pancake | ||
** WebFWD | ** WebFWD | ||