Sketch and Create GUI Prototypes in Firefox with The Pencil Project
As more and more add-ons are being developed for Firefox, it’s interesting to see what all a browser can be turned into. The Pencil Project is a Firefox extension using which you can draw and design GUI prototypes (having elements like buttons, combo boxes, text boxes) easily by drag and drop. It uses Firefox’s underlying Mozilla Gecko engine.
These are some of the features offered by Pencil Project:
- Built-in stencils for diagramming and prototyping
- Multi-page document with background page
- On-screen text editing with rich-text supports
- PNG rasterizing
- Undo/redo supports
- Installing user-defined stencils
- Standard drawing operations: aligning, z-ordering, scaling, rotating…
- Cross-platforms
- Adding external objects
After it is installed, Tools –> Pencil Sketching will start the application. Pages are arranged in tabs.
Page size can be changed by right clicking on the page tab and visiting its Properties.
Below picture shows some elements dragged onto the page
It’s very easy and intuitive to work with the Pencil Project. The toolbar icons are clear in what they mean and one can easily for example, line elements such that their vertical centers match. Also every element’s properties and layer order are only a right click away.
The complete page or document (collection of pages) can be exported as PNG.
3 practical uses of The Pencil Project:
- Design a web page or even a complete web site since it supports a single background for multiple pages
- Design a brochure/pamphlet
- Quickly annotate a screenshot by adding bullets, balloons and text
I have taken the liberty of converting (from Ogg Theora video format) and uploading the official videos of this add-on so they can be watched without having to download them. Note that these screencasts are sans audio. Watch them in their full size.
Working with Shapes – Brief introduction to Pencil functionalities in dealing with shapes to create diagrams
Working with Documents - Instructions on how to work with documents, pages and export them into rasterized images
Working with External Objects – Details on the Pencil supports for external images, rich text contents
The Pencil Project can also be installed as a standalone program. Here is the download link.
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
July 11th, 2008 at 12:14 pm
How does one share .ep files?
I can’t figure out how to associate .ep to anything in firefox.
I need to save them and share them with other designers on OSX and win32.
Thanks
July 11th, 2008 at 12:15 pm
How does one share .ep files across Firefox clients?
I can’t figure out how to associate .ep to anything that will open it on another machine.
August 25th, 2008 at 7:29 pm
[...] su página podemos ver videos de su funcionamiento en formato Ogg o por Web Tech Daily para no tener que descargarlos. Posted by Ulises E. Filed in Diseño Web, Navegadores, [...]
August 28th, 2008 at 6:13 am
[...] su página podemos ver su funcionamiento en formato Ogg o por Web Tech Daily para no tener que descargarlos. Tags: código abierto, Firefox 3.0, [...]
September 3rd, 2008 at 9:39 am
[...] here). Pencil is a Firefox add-on to do GUI prototyping and simple sketching, take a look at this blog post which shows what Pencil can do. As a teaser I put a screenshot at the end to this [...]