Monday, May 18, 2009

How to Create a Firefox Persona

I am not much of a skinner or designer, but creating a Firefox persona seemed simple enough so I gave it a try. In the process, I ended up doing just about everything you shouldn't do except submitting objectionable or completely bad content (although the latter is really open to interpretation, but the persona I made got into their repository). Also, I didn't use Photoshop. I used the "Paint" that comes with Vista. (Ewwww! I know ;) A designer just closed their browser in disgust after reading those two awful words, but you didn't- so read on!)

First, I visited the Persona creation page. After creating a user (I don't remember, I agreed to the terms of service and decided to make my design available to everyone under a Creative Commons license. Then I added a persona name. It only allows alphanumerics, underscore, hyphen, space, period and ampersand in the persona name, so I used dashes, only to find out later that looked lame because almost everyone else was using Normal looking space separated words like "Beautiful Sunset".

Then I tried to submit what I thought was a pretty big pic both for the header and footer. It said please use different names for the header and the footer- in other words, even if it is the same image, they want you to have two different filenames. They're trying to tell you it should be different, because the sizes will need to be different. It said each was limited to 300K. Then after chopping up the images and putting a lower part of the image for the footer and top part of the image for the header, I realized that the correct size for a header image is 2500x200 and the correct size for a footer image is 2500x100, well at least that is what it said. On the designing Personas page it states: "The header image should be 3000 pixels wide and 200 pixels tall. The footer image should be 3000 pixels wide and 100 pixels tall."

I chose a pure white text color and pure grey accent color- that way it would probably look ok with most photos. However, you should really just choose what is going to look good with your image. Use light text over a darker image or dark text over a lighter image. The accent color is what it says. It wraps a thin line around the various boxes.

After all of that, here is my first persona:
* Sunset-White-Lake-NC

So, here's what I learned:
* The top image should be 2500x200 or 3000x200 depending on what you read, and no larger than 300K so use a JPG or PNG, probably.
* The bottom image should be 2500x100 or 3000x100 depending on what you read, and no larger than 300K so use a JPG or PNG, probably.
* Use a text color that will look good on the image. If no text of a single color would stand out on the image at any point in the image, it is probably not a good idea to use that.
* Use whatever access color you think would look best wrapped in a thin line around the boxes.
* They emailed me to tell me it was accepted.
* When browsing personas, I noticed if you click on "My" under each category, you can see your submissions.
* You can even edit it after it was accepted just make sure you're logged-in. They'll have to review it again, but that's ok.
* It appears to right-align the image for smaller resolutions. I had thought the opposite.

Have fun!

No comments: