Websites/Mozilla.org/One Mozilla/Style Guide: Difference between revisions

Websites/Mozilla.org/One Mozilla/Style Guide (view source)

Revision as of 21:39, 25 April 2012

1,930 bytes added , 25 April 2012

no edit summary

Shorlander

canmove, Confirmed users

455

edits

@@ Line 48: / Line 48: @@
 (DRAFT: APRIL 17)
-Intro
+=== Intro ===
 * What the guide is
 * How to use it
-Identity
+=== Identity ===
 * Brands
 ** Mozilla
@@ Line 67: / Line 67: @@
 * Copy
-Brand/Identity
+=== Brand/Identity ===
 * Brand Platform
 ** Promise
@@ Line 90: / Line 90: @@
 ** Localization info
-Websites
+=== Websites ===
 * Sandstone overview
 ** Responsive grid
@@ Line 100: / Line 100: @@
 * URL structure
-Product Design
+=== Product Design ===
-* Firefox
+Firefox
-** Overall design guidelines
+*Overall design principles
-*** What is Firefox?
+**Beautiful Engaging Design
-**** Beautiful Engaging Design
+**Soft, Friendly, Human
-**** Soft, Friendly, Human
+**Distinctive and Unified
-*** Basic forms (tab shape, roundness, texture)
-*** Distinctive and Unified
+*Firefox Design forms
-** Mobile (Smartphones, 7" & 10" Tablets: Android, B2G, Metro, Kindle Fire)
+**Tabs & Shapes
-*** TITLE BAR
+**Colour
-**** Primary controls (Back / Forward / Stop / Refresh / Bookmark
+**Texture
-**** URL Bar with Title
+**Basic icon style guide?
-**** Indicators (Addons / ID / Security)
-*** MENUS / PANELS
+*Mobile (Smartphones, 7" & 10" Tablets: Android, B2G, Metro, Kindle Fire)
-**** Site ID Menu
+**INTRODUCTION
-**** Overflow Menu
+***Overall UI
-*** AWESOMEBAR
+***Layers
-**** Top Sites tab
+***Screen sizes
-**** History tab
+**TITLE BAR
-**** Bookmarks tab
+***Overview (Key parts of the UI)
-**** Search suggest
+****General (Colors / Textures / Forms)
-*** TABS
+****Parts (for each: Styles and Dimensions)
-**** Local / Remote tabs
+*****Controls
-**** New / close / Undo close tabs
+*****URLBar
-*** IN-CONTENT UI
+*****Indicators
-**** Basic styling
+**MENUS / PANELS
-**** Start page
+***Overview (Key parts of the UI)
-**** Blank page
+****General (Colors / Textures / Forms)
-**** Error pages
+****Parts (for each: Styles and Dimensions)
-**** Channel-specific branding
+*****Site ID Menu
-*** GESTURE SUPPORT
+*****Overflow Menu
-**** one-fingered dragging to scroll pages
+**AWESOMEBAR
-**** double tap to zoom / unzoom
+***Overview (Key parts of the UI)
-**** pinch to zoom
+****General (Colors / Textures / Forms)
-**** long press links for context menu (open in new tab, etc)
+****Parts (for each: Styles and Dimensions)
-**** long press text to activate text selection mode
+*****Top Sites tab
-**** two-fingered side to side dragging for back / forward controls
+*****History tab
+*****Bookmarks tab
+*****Search suggest
+**TABS
+***General (Colors / Textures / Forms)
+***Parts (for each: Styles and Dimensions)
+****new / close / undo / tab notifications
+****Local / Remote tabs
+**IN-CONTENT UI
+***General (Colors / Textures / Forms)
+***Parts (for each: Styles and Dimensions)
+****Example: Start page
+****Example: Blank page
+****Example: Error pages
+****Example: Channel-specific branding
+**GESTURE SUPPORT
+***one-fingered dragging to scroll pages
+***double tap to zoom / unzoom
+***pinch to zoom
+***long press links for context menu (open in new tab, etc)
+***long press text to activate text selection mode
+***two-fingered side to side dragging for back / forward controls
+*Desktop (Windows, Mac, Linux)
+**INTRODUCTION
+***Overall UI
+****General (Colors / Textures / Forms)
+***Common Elements (Buttons / Fields / Shapes / Icons / Thumbnails)
+**MAIN WINDOW
+***Overview (Key parts of the UI)
+***Parts (for each: Styles and Dimensions)
+****Window Frame
+****Tabs
+****NavBar
+*****URL Bar
+****BookmarksBar
+****Additional Toolbars
+****Buttons, Controls and Icons
+****Indicators (Addons / ID / Security / Geolocation / Password / AppInstall)
+**PANELS
+***Overview (Key parts of the UI)
+****General (Colors / Textures / Forms)
+***Types of Panels (Notifcation / Bookmarks / Downloads / General)
+***Parts (for each: Styles and Dimensions)
+****Panel Frame
+****Panel Areas (Notification Icon / Header / Toolbar)
+**AWESOMEBAR
+***Overview (Key parts of the UI)
+****General (Colors / Textures / Forms)
+***Parts (for each: Styles and Dimensions)
+****Results (Normal / Bookmarked / Tabs / Search Suggest )
+**TABS
+***Types (App Tabs/ Local / Remote)
+***Parts (New / Close / Undo / Tab Notifiactions)
+**IN-CONTENT UI
+***Overview (Keys parts of the UI)
+***Types (Dashboard / Complex UI / Error)
+***Parts (for each: Styles and Dimensions)
+****Thumbnails
+****Categories
+****Notifications
+****Controls (Buttons / Fields / Widgets )
+**SIDEBARS
+***Overview (Keys parts of the UI)
+***Types (History / Bookmarks)
+***Parts (for each: Styles and Dimensions)
+****Header
+****Search
+****List Items
-** Desktop (Windows, Mac, Linux)
 * Thunderbird
 ** Guidelines
@@ Line 202: / Line 278: @@
 ** etc
-Assets (eventually using assets.mozilla.org as a common repository)
+=== Assets (eventually using assets.mozilla.org as a common repository) ===
 * Logos
 * Fonts