UI Prototypes: Pencil (a Firefox extension)

[SignpostMarv]

Regarding how Artists, Designers and UI Freaks can contribute, I poke you all in the direction of a message I left on the sldev mailing list regarding Pencil, a Firefox extension for GUI prototyping..

A common set of UI elements, widgets etc compiled into a collection would reduce the number of barriers to entry for UI prototype contributions.

[jacek]

Looks like there is a bit of documentation on how to add new 'stencils':

• How Stencils Work.
• Stencil Collection Structure

It's a bit technical, working with XML. Anyone up to the challenge?

[McCabe]

I've been using Pencil for a while now and I absolutely LOVE it. Working on updates to my UI mockup with it, even. I'd be willing to create an SL version if people are interested.

(Note: this is your cue to say "Yes! I'm interested!" or "No, it'd be a waste of work. Here have some pie.")

Mmm.... (pumpkin) pie.

[jacek]

(Note: this is your cue to say "Yes! I'm interested!" or "No, it'd be a waste of work. Here have some pie.")

Yes, we're interested! You may have pie once you're done. ;)

[McCabe]

Okay, here's a pencil collection for pretty much everything you'll need to make a mockup of the SL UI. Let me know if anything's buggy or missing, but so far everything's worked fine for me.

INSTRUCTIONS:

• Install either the Firefox Pencil Add-on or the Stand-alone pencil application.
• Download and extract the "SL Dazzle Pencil Stencil.zip" file attached below.
• In Pencil, right click inside the "Shape Collections" area and select "Install new collection..."
• Browse to \SL Dazzle Pencil Stencil\SLDazzleCollectionStencil.zip and select it.
• When Pencil asks "Are you sure?" click "Install".

USING THE COLLECTION:

• Drag items from the workspace on the left onto your canvas. All the main UI elements are there.
• Multiple options are available via right clicking items (for example, right clicking the button will give you the options "Selected" or "Disabled").
• To rotate, click an item until its edges turn orange.
• Color and font can be edited by selecting "Properties" for an item.
• SL's iconset is included in a subfolder named "SL Viewer Artwork". Right click the Artwork item and select Actions > "Insert Viewer Artwork" to add icons to your mockup.

Enjoy (ps where's my pie?)

[jacek]

Woohoo! Nice work :) The pie was not a lie -- here you go. *hands it over*