[TIP] Tools for GUI-design


Today at the Bits & Bijt meeting in Maarssen, Netherlands, I learned that a good app design is CRAP (Contrast, Repetition, Alignment, Proximity).

To lign up the items on a page, I like to use a little bookmarklet tool from Sprymedia called 'Design'. It features the following components:
  • Grid - overlays a highly configurable layout grid over a web-page. Grid can be set to match any set of dimensions, allowing easy development of CSS layouts in the web-browser.
  • Rule - displays rulers on a page, with all the expected features of the rulers found in a desktop design application, including guides which snap to block display elements and origin location control.
  • Unit - allows measurements to be made between any two points on a web-page, giving basic information about each of the points clicked on, and drawing a line on the page for the measurement.
  • Crosshair - draws a crosshair cursor on the page to assist in layout alignment. Cursor information is also presented in a tooltip.
You can get it from http://www.sprymedia.co.uk/article/Design

Does anyone know any other tools that can help to create a good (CRAP) gui?

Kind regards,

Hi Lennart,

The tool we use here - not for CRAP per se, but for the prototyping stage - is Balsamiq. You can get it at www.balsamiq.com , there's a free version if I'm not mistaken.

I also recall reading about a few other free applications that do the same in the web, but I don't know their names.

I'll definitely be looking into that bookmarklet tool - thanks for the great tip!


Paulo Tavares

We use axure to prototype http://www.axure.com/ but for a low cost solution try http://keynotopia.com/ and If you are serious about prototyping, iRise would be your ideal choice http://www.irise.com

Also a nifty tool Pencil as a FF plugin or stand-alone.
Open source prototyping.

and awesome tip btw :D
(bit depressing I'm afraid when you need to create pages for ie7,ie8 and FF, but pixelperfect makes the world go around)
I've tried Pencil as a FF AddOn a couple of times and it works fine. I've upgraded to FF4 recently and unfortunately pencil isn't compatible with that version yet.
I use the offline version most of the time :)
Great tips!

Here are some cool extensions for Google Chrome: http://www.hongkiat.com/blog/google-chrome-extensions-designers/

Tiago Simões