Installing Pencil

Pencil is a tool for storyboarding and sketching user interface designs. It is a Firefox extension, but runs basically as a separate application from the browser.

In Firefox go to http://pencil.evolus.vn/en-US/Home.aspx and click the big orange button.
It may try to open the .xpi file in archive manager, don't let it do this. Open the .xpi file with Firefox.
Firefox will prompt you to install the extension, let it do this.
From the Firefox tools menu you can launch the "Pencil Sketching..." option.

Pencil will now run, have a play with it, you can add pages, and drag stuff from the collections on the left to make up your GUI design. Multiple pages can be used to make a storyboard or sequence of steps, each one can have page notes (right click the page tab to edit these). You can download a base starting point with a TV on it that is the right ratio and a quarter of full HD resolution, this can be opened in pencil using the menus. We also have a set of Unity stencils, which can be imported as a private collection, click the my stuff tab, right click in the empty space and select "Import new private collection . . ."

You can save your design as a .ep file, which contains all the images and you can share that with others to open in pencil. If you want a wider audience you might want to save it as HTML, we have an Ubuntu themed export template to help with this.

Download the export template and save it somewhere.
In pencil use the menu to go to tools-Manage Export Template and click the Install New Template button, and go find the zip file.
To export your storyboard go to the menu Document-Export Document...
Select Single web page
Select All pages in the document
Select "Ubuntu Theme" in the template dropdown
Choose a destination folder, it will drop index.html there and some other files like an image of each page and some jquery libraries below.
Put this lot somewhere people can see it and add a link to your wonderful work on the designs page.

Feel free to depart from the template, just remember we are targeting a 1920x1080 output, but if you want to include an awesome tablet/phone/desktop combination experience then go for it. The template is there to make things easier, not to constrain you. If you are going to include screenshots from other things (if you want a darker or lighter feel for example) then please use stills from creative commons licensed movies http://www.blender.org/features-gallery/movies/ and they should be 16:9 ratio unless you are intentionally doing something with letterboxing.