|
|
| Line 1: |
Line 1: |
| ==Creating UI Mockups of Firefox==
| | This was all very out of date, and not helpful. We're in the middle of re-organizing our processes, and will update this page when we have more info. |
| | |
| ===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 [http://www.omnigroup.com/applications/omnigraffle/ 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 [http://www.gimp.org/ 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 8/21/07).
| |
| * Vista Aero Widgets
| |
| ** [http://people.mozilla.com/~faaborg/files/mockupStencils/aero.gstencil.zip OmniGraffle Stencil]
| |
| ** [http://people.mozilla.com/~faaborg/files/mockupStencils/aero.png png image]
| |
| * Mockup Elements
| |
| ** [http://people.mozilla.com/~faaborg/files/mockupStencils/mockupElements.gstencil.zip OmniGraffle Stencil]
| |
| ** [http://people.mozilla.com/~faaborg/files/mockupStencils/mockupElements.png png image]
| |
| * Wireframe Stencils
| |
| ** [http://konigi.com/tools/omnigraffle-wireframe-stencils OmniGraffle Stencil]
| |
| ** [http://www.guuui.com/issues/02_07.php Visio Web Wireframe Stencil]
| |
| * The Silk icon set from [http://www.famfamfam.com/lab/icons/silk/ FAMFAMFAM]
| |
| ** [http://people.mozilla.org/~johnath/FAMFAMFAM.gstencil.zip OmniGraffle Stencil]
| |
| * Miscellaneous
| |
| ** [http://www.graffletopia.com/categories/user-interface 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:
| |
| * [https://labs.mozilla.com/forum/ Mozilla Labs Forums]
| |
| * [http://groups.google.com/group/mozilla.dev.apps.firefox mozilla.dev.apps.firefox]
| |
| * [http://wiki.mozilla.org wiki.mozilla.org]
| |
| * [https://bugzilla.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 [http://groups.google.com/group/mozilla.dev.apps.firefox mozilla.dev.apps.firefox].
| |