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

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 3: Line 3:
Codify a common visual language for Mozilla to be used everywhere we connect with users (product, websites, marketing, etc).
Codify a common visual language for Mozilla to be used everywhere we connect with users (product, websites, marketing, etc).


== Team ==
== Overview ==


The Team:
* Responsible: Sean Martell
* Responsible: Sean Martell
* Accountable: John Slater
* Accountable: John Slater
Line 10: Line 11:
* Consulted: Madhava Enros, Ian Barlow, Ty Flanagan, Lee Tom, Bryan Clark, Crystal Beasley, Jason Grlicky, Chris Appleton, Blake Winton
* Consulted: Madhava Enros, Ian Barlow, Ty Flanagan, Lee Tom, Bryan Clark, Crystal Beasley, Jason Grlicky, Chris Appleton, Blake Winton
* Informed: Pete Scanlon, Jinghua Zhang
* Informed: Pete Scanlon, Jinghua Zhang
([http://en.wikipedia.org/wiki/Responsibility_assignment_matrix RASCI background])


IRC: #style
IRC: #style


([http://en.wikipedia.org/wiki/Responsibility_assignment_matrix RASCI background])
Target Audience:


== Action Plan ==
== Action Plan ==
Line 28: Line 31:
* Begin development phase
* Begin development phase
* Development complete
* Development complete
assets repository
promotion


== Content Outline ==
== Content Outline ==


    get schedules in sync
* Intro
 
* Brand/Identity
    Gaia:
** Brand Platform
 
*** Promise
    icons due 5/15 for 1.0 release
*** Positioning
 
*** Pillars
    flexibility to make adjustments narrows after that
*** Voice
 
*** Manifesto
    product ship date targeted for 9/1
** Visual Identity
 
*** Guidelines
    Persona
*** Logos
 
*** Wordmarks
    Beta Launch of Persona.org  by the end of Q2
** Typography
 
*** Typefaces
    Marketplace
*** Common Styles
 
*** Alternates
    Fx Desktop
** Artwork
 
*** Standard device illustrations
    main UI being revised now, but not for a Q2 deadline
*** Gear
 
** Copy
    Fx Mobile
*** Tone
 
*** Rules
    main UI is largely settled for now
*** Localization info
 
* Websites
    Fx Tablet
** Sandstone overview
 
** Responsive grid
    main UI is largely settled for now
** Tabzilla
 
** Backgrounds
    metro UI is being defined in Q2
** Typography
 
** Button styles
    target audience
** Examples gallery
 
* Products
    information architecture for guide
 
    product team to add details
 
    confirm who's doing what
 
    Sean to create IRC channel, start building out PSDs
 
    Josh & Sean to talk soon re: Gaia
 
------------------------------------------------------------------------------------
Style Guide
Intro
----------------------------
Brand Platform
 
    Promise
 
    Position
 
    Pillars
 
    Voice
 
    Manifesto
 
Marketing/Branding
----------------------------
Branding
 
    Guidelines
 
    Logos/Channel Logos
 
    Wordmarks
 
Typography
 
    Typefaces
 
    Common Styles
 
    Alternates
 
Artwork
 
    Standard device illustrations
 
    Gear
 
Website
 
    Introduction to Sandstone


    Responsive Grid


    Tabzilla


    Backgrounds
    Typography
    Button styles
    Examples Gallery
Copy
    Tone
    Localization
    Rules
Messaging to users?
Product Design
----------------------------
Products
Products


Line 244: Line 176:
     etc
     etc


Assets
* Assets (eventually using assets.mozilla.org as a common repository)
------------------------------
** Logos
(eventually all linked to assets.mozilla.org)
** Fonts
 
** Code
    Logos
*** Sandstone details
 
*** Tabzilla GitHub
    Fonts
*** Footer GitHub
 
** Useful marketing design PSDs
    Sandstone Code
** Product design guides/PSDs
 
    Tabzilla GitHub
 
    Footer GitHub
 
    common marketing design PSDs
 
    product design guides/PSDs


==  
== Miscellany ==
* [https://etherpad.mozilla.org/styleguide Notes and ideas from kickoff meeting]
* [https://etherpad.mozilla.org/styleguide Notes and ideas from kickoff meeting]
* [https://etherpad.mozilla.org/style-milestones First pass at milestones]
* [https://etherpad.mozilla.org/style-milestones First pass at milestones]

Revision as of 06:31, 18 April 2012

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
  • 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


Products 

   Firefox

   overall design guidelines

   phone (subcases: android, b2g)

   tablet (subcases: android, metro, possibly kindle)

   desktop (subcases: mac, win, linux)

       - also, I have the beginnings of a document about this I can share

   Thunderbird

   Guidelines

   Persona

   Guidelines

   Marketplace

   Guidelines

   App submission Marketplace graphics requirements/dimensions

   App browsing grid styles

   Standard glyphs

   Default layout theme (color/typography/grain/gradients)

   UI elements

   B2G "Gaia" (This would go live in the fall)

   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

   Others/Experiments/Research Projects

   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=421261"