Designing Personas

Getting Started

Standard Personas are made up of two graphic image files, a "header" image displayed as the background of the top of the browser window (i.e. behind the toolbars and the tab strip) and a "footer" image displayed as the background of the bottom of the browser window (i.e. the status and find bars).

The header image should be 3000 pixels wide and 200 pixels tall. The footer image should be 3000 pixels wide and 100 pixels tall.

Here's an example header image:

Here's an example footer image:

Positioning

The one thing that can be a bit tricky is in positioning design elements so that they do not distract from the major user interface elements of Firefox.

The header image is anchored to the top-right corner of the browser window, so the right-hand side of the image is always visible, and as a user increases the width of the browser window, the browser reveals more of the left-hand side of the image.

The browser might reveal more of the lower portion of the image as well if it (or an extension) adds another toolbar (like the toolbar that comes with the StumbleUpon extension) or other UI elements to the top of the window.

The footer image, on the other hand, is anchored to the bottom-left corner of the browser window, so the left-hand side of the image is always visible, and as a user increases the width of the browser window, the browser reveals more of the right-hand side of the image.

The browser might reveal more of the upper portion of the image as well if it (or an extension) adds another bar (like the Find bar) or other UI elements to the bottom of the window.

In general, designs that feature rich content areas in the top-right corner of the browser and that have a light-gradient or background colour for the back, forward and reload buttons work best. We've created some positioning templates that can be used to help figure out placement of your artwork. The templates are based on Windows and show blue lines for when tabs are in use since there is more vertical space available for the design.

These templates work best when used as a layer in Photoshop during design. Please be sure to remove this positioning layer before submitting your final Persona.

• Persona Positioning Template - Header
• Persona Positioning Template - Footer

Dynamic personas are personas that can change over time. Like standard personas, dynamic personas are composed of two files, but with dynamic personas the two files can be in any format Firefox is capable of displaying, including HTML and SVG. And they can include JavaScript that updates the page periodically.

When Firefox loads a dynamic persona, it periodically takes snapshots of the two files that make up that persona and displays them as background images behind the toolbar and statusbar. It also periodically reloads the two files in case they have changed on the server (because the files can be HTML, they can also reload themselves).

Firefox takes a snapshot of each file once per minute and reloads the files once every hour. Thus dynamic personas don't get updated frequently enough to display animation, but they're useful for displaying information that doesn't change more than once per minute, like depictions of the weather, the time of day, changes in the stock market, sporting event updates, or just random zaniness.