Mockups

Creating UI Mockups of Firefox

Welcome to Open Source UI Design

Want to join Mozilla's User Experience team as a open source contributer? Here are all the tools we use to create user interface mockups of Firefox:

OmniGraffle

Most of our mockups are created using OmniGraffle, a diagramming application for OS X.

If you don't have OmniGraffle, or are on a different platform, you can still download the stencil images and use any image editor to create your mockup.

Stencils

These stencils are regularly improved, so check back to see if a new version is available (last updated 5/25/07).

• Vista Aero Widgets
  • OmniGraffle Stencil
  • png image
• Mockup Elements
  • OmniGraffle Stencil
  • png image
• Wireframe Stencils
  • OmniGraffle Stencil
  • Visio Web Wireframe Stencil
• Miscellaneous
  • Graffletopia User Interface Stencils

(To add the stencils to the Stencils panel in OmniGraffle, move them into the ~/Library/Application Support/OmniGraffle/Stencils folder.)

Where to Contribute your Design Work

After you've created your UI mockup, there are a variety of places you might want to post it:

• Mozilla Labs Forums
• mozilla.dev.apps.firefox
• wiki.mozilla.org
• Bugzilla

Questions

If you have any questions about creating UI mockups with these stencils, or are looking for an area of the Firefox UI that you could potentially contribute on, please feel free to ask in mozilla.dev.apps.firefox.