Sketching with Pencil

Evolus Pencil is an open source software for prototyping and sketching and is what I use as a free alternative to all the web based existing applications to do the designs and wireframes. It has many bundled stencils collections to use based on Android,iOS and many web frameworks components ...but it has one based on sketchy elements, perfect to draw the wireframes designs and separate it from the final look and feel, the most used in my concepts and designs.

The latest stable version, 2.0.5, was released on September 2013 ... but it's almost free of bugs and working fine.

The best of all is that is free and you can use it off line in both versions: stand-alone and as a Firefox plugin since is build over the xulrunner environment.

Stencils collection

You can use it to make your prototypes and wireframes thanks to its the large collections of stencils. You can always create your own collections picking stencils from the existings collections or adding your own recurrent used text labels or images. There are some stencils collections included by default in the downloaded bundle but there is also a stencils collections repository at http://code.google.com/p/evoluspencil/downloads/list?q=label:Stencil.

Creating new elements in a private collection

You can build a great and useful collection of assets to design your apps and web pages combining this great tool with an screen capture and an image editor by capturing areas from the screen and editing it with any manipulation image program to clean borders or empty elements My favourites tools to do this, both of them free, are http://getgreenshot.org/ and Gimp http://www.gimp.org/

  1. Capture screen or screen area
  2. Paste into your image editing application.
  3. Edit it and copy to clipboard
  4. Paste it in your Pencil project page
  5. Right click over the element and choose the 'Add to my collections...' option. Proceed to create a new collection and add the element pasted naming it properly. You can choose to autogenerate icon preview.
  6. Now you have the element in your private collection. Repeat for all the needed elements.
  7. Remember to export your collection in order to import each time you need it on your new designs. Each time you add an element to your collection you must export it to a common place and import on the projects you work if you need the new assets available.

Using newer Font Awesome icons

There is a FontAwesome stencil collection but its based on an earlier version of this great icon font collection. My workaround to use the most recent version of these icons is the following:

  1. Install the Font Awesome as a font system. The True Type font can be downloaded from http://fortawesome.github.io/Font-Awesome/ inside the fonts folder in the zipped package.
  2. Look for the unicode value for the icon you want to include
  3. Search in a Characters map tool like the one in Windows or any equivalent in your Linux distro for the unicode value for the Font Awesome font
    Characters map from Windows
  4. Copy it to the clipboard
  5. Create a simple Plain text element from the common shapes collection
    Plain text element
  6. Paste the content of the clipboard. You probably will see a non-character valid until you change the font to the FontAwesome installed in your OS.
  7. Right click over the element and choose the 'Add to my collections...' option. If you choose to autogenerate icon preview is probably that doesn't display it on your collection. It's up to you to provide a generated preview but I think naming it properly to identify it at a glance should be enough.
  8. Now you have the icon in your private collection. Repeat for all the needed icons.

Exporting it to show off

Pencil also allows you to export in many formats like a PDF document, a collection of PNG images or an HTML project. There is some of them bundled in the application but you have also a repository with some more options http://code.google.com/p/evoluspencil/downloads/list?q=label:Template

My favourite is the one that adds jQuery functionality to the HTML. This let's you to show all the interactions you designed to move from one page to other in the project. And if you forgot any of this jumps you can reach any page you want from the side pages index. Indexed jQuery export

Check the webpage http://pencil.evolus.vn/