Create mockups using Pencil and Firefox

A screen mockup in under a minute with Pencil

Prototyping is the method by which a designer/developer mocks up pages/screens for a web site or some piece of software, to help the design and development team visualize the product. Sketching out on a piece of paper is generally best as at this stage of development there are likely to be many changes and sketching on paper is quick and cheap.

However, if you need to create sketches that are a little more professional, e.g. for a presentation to the Board, then it helps to use a tool like Pencil, a plugin for Firefox, which allows you to build a prototype using actual screen elements e.g. buttons, text fields etc. Using it is dead simple and very quick – just drag and drop elements onto a canvas and edit the properties to suit. I made the one on the right in under a minute.

Get Pencil for Firefox here