Tuesday, February 24, 2009

website mockups, giving instructions with images

with websites getting richer and richer in style every day is hard for a developer (themer) to just know what his boss is thinking about. especialy if you are me i guess, i tend to think in a weird ways :P. it would be fantastic if i'll get concrete sketches or screenshots, since one image can replace 1000 (or more) words. but ofcourse making this king of images/sketches/screenoshots is painful since there is no tool that will copy your ideas to paper.

well maybe there is. Pencil (http://www.evolus.vn/Pencil/). small (400k), comes standalone (GTK+) or as firefox plugin. that means if you are running system that you have problems installing freaky software like flash, air, etc... , like i have (ppc/linux) then tool that *just works* with your browser is +100.

how it works?
* Tools -> Pencil sketcking
* you drag 'n drop screenshot of site you are working with
* right click on default page, and select properties, give our current page a name and select size
* and thats how i start sketching ...

Pencil have concept of multiple pages inside one document. which fit nicely since you normaly need to show how to change website (eg. default plone) in steps. and when you create new page you can select one of previouspages as background, which boosts sketching up. now i really feel that telling story with images is fun.

the only thing missing in this tool is to have a button that will screenshot one of my websites in firefox, but i use differenet tool for that (actually is batch script, one of first scripts i wrote in linux)

since Pencil is really too-easy-to-use tool, let it be enough and i'll leave you to try it. if you are using some cool tool that would make sketching even easier, please i'm all ears.

1 comment:

Roland said...

Thanks for reminding me about Pencil, I tried it a long time ago when it was still rough but forgot about it. It works well now.

For browser screen shots, try the Screengrab! extension for Firefox, it allows you to save to the clipboard as well as to file, and it can grab an entire page even if it's not all visible in the browser viewport.