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).

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

  • [DONE] Complete temporary Persona and Marketplace mini-style guides (4/13)
  • Each team to confirm a basic outline of must-have project guidelines for phase 1
  • Finalize phase 1 content outline
  • Create initial layout and design for guide using existing content
  • Gather phase 1 content from product teams
  • Begin layout and design for guide using all content
  • Finalize layout and design in pdf form
  • Begin development phase
  • Development complete

assets repository promotion

Content Outline

Intro

  • What the guide is
  • How to use it

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

Products

  • Firefox
    • Overall design guidelines
    • Phone (Android, B2G)
    • Tablet (Android, Metro, possibly Kindle)
    • 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
    • Guidelines
    • Default layout theme (color/typography/grain/gradients)
    • UI elements
  • 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
  • Other
    • 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=421264"