Websites/Mozilla.org/One Mozilla/Style Guide

From MozillaWiki
Jump to navigation Jump to search

Goal

Codify a common visual language for Mozilla to be used everywhere we connect with users (product, websites, marketing, etc).

Get Involved

Join the regular One Mozilla meetings to help us create this style guide.

  • Time: Every Wednesday at 10:30 a.m. Pacific
  • Dial-in: 1-800-707-2533, password 369, conference room 95704

You can also join the discussion at any time on our Mozilla chat server in #style. Learn more about how to use our chat server.

Overview

The Team:

  • Responsible: Sean Martell
  • Accountable: John Slater
  • Support: Stephen Horlander, Patryk Adamczyk, Josh Carpenter, Matej Novak
  • Consulted: Madhava Enros, Ian Barlow, Ty Flanagan, Lee Tom, Bryan Clark, Crystal Beasley, Jason Grlicky, Chris Appleton, Blake Winton
  • Informed: Pete Scanlon, Jinghua Zhang

(RASCI background)

IRC: #style

Target Audience:

Action Plan

  • (4/13) Complete temporary Persona and Marketplace mini-style guides [DONE]
  • (4/20) Each team to confirm a basic outline of must-have project guidelines for phase 1
  • (4/24) Finalize overall content outline
  • (5/04) Create initial layout and design for guide using existing content
  • (5/04) Gather initial content from product teams
  • (5/07) Begin layout and design for guide using all content
  • (5/11) Finalize harmonized content from product and marketing teams
  • (5/28) Finalize layout and design in pdf form
  • (5/30) Begin development phase
  • (TBD) Launch assets repository
  • (TBD) Development complete; launch guide
  • (TBD) Evangelize guide to all Mozillians

Content Outline

(DRAFT: APRIL 17)

Intro

  • What the guide is
  • How to use it

Identity

  • Brands
    • Mozilla
      • Visual identity
      • Brand platform (if there is one)
      • Sub-brands (Webmaker, Popcorn, Spaces, etc)
    • Firefox
      • Visual identity
      • Brand platform
    • Marketplace
    • etc
  • Typography
  • Artwork
  • Copy

Brand/Identity

  • Brand Platform
    • Promise
    • Positioning
    • Pillars
    • Voice
    • Manifesto
  • Visual Identity
    • Guidelines
    • Logos
    • Wordmarks
  • Typography
    • Typefaces
    • Common Styles
    • Alternates
  • Artwork
    • Standard device illustrations
    • Gear
  • Copy
    • Tone
    • Rules
    • Localization info

Websites

  • Sandstone overview
    • Responsive grid
    • Tabzilla
    • Backgrounds
    • Typography
    • Button styles
    • Examples gallery
  • URL structure

Product Design

  • Firefox
    • Overall design guidelines
    • Mobile (Smartphones, 7" & 10" Tablets: Android, B2G, Metro, Kindle Fire)
      • TITLE BAR
        • Primary controls (Back / Forward / Stop / Refresh / Bookmark
        • URL Bar with Title
        • Indicators (Addons / ID / Security)
        • Site ID Menu
        • Overflow Menu
      • AWESOMEBAR
        • Top Sites tab
        • History tab
        • Bookmarks tab
        • Search suggest
      • TABS
        • Local / Remote tabs
        • New / close / Undo close tabs
      • IN-CONTENT UI
        • Basic styling
        • Start page
        • Blank page
        • Error pages
        • 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)
  • Thunderbird
    • Guidelines
  • Marketplace
    • Guidelines
    • App submission Marketplace graphics requirements/dimensions
    • App browsing grid styles
    • Standard glyphs
    • Default layout theme (color/typography/grain/gradients)
    • UI elements
  • Persona
    • Popup
      • Guidelines
      • Default layout theme (color/typography/grain/gradients)
      • UI elements
        • Primary button
        • Secondary button
        • Error styles
        • 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)
    • 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
    • WebFWD
    • Labs
    • Popcorn.js
    • etc

Assets (eventually using assets.mozilla.org as a common repository)

  • Logos
  • Fonts
  • Code
    • Sandstone details
    • Tabzilla GitHub
    • Footer GitHub
  • Useful marketing design PSDs
  • Product design guides/PSDs

Miscellany

Retrieved from "https://wiki.allizom.org/index.php?title=Websites/Mozilla.org/One_Mozilla/Style_Guide&oldid=424311"