Upon returning from a multi-day adventure in Denver at Web Directions North last year, my colleagues introduced me to a software program called Balsamiq Mockups. Since then, I've been using Balsamiq for all of our larger web jobs. I'm really impressed with the simplicity of the interface and how quickly I can produce a completed mockup. Within minutes of downloading the software, I was able to create a digital version of a paper prototype all-inclusive of links, image placeholders, buttons and nicely lined up columns.
Plethora of Elements
With all the sites I've prototyped, I've been able to find each element I wanted on a page in the pre-existing UI Library. The developers were even sharp enough to include groups of controls such as "buttons", "containers", "media' and "text". As a sign of the times, there is a section specifically for iPhone controls as well.
When creating a mockup, I first drag down the "Browser Window" control and specify dimensions for a typical site (960px wide x 1100px tall) and then I just drag and drop from there. Menus are a snap as well as feature boxes, download buttons, and image grids.
Grid System
One of my favorite features of the software is the way it handles grids and allows me to line up elements based on the edges or center point of other elements. This also works for resizing elements. Dragging pieces of a design around the page is so simple when you can line them up within a column layout and makes this software extremely usable for designing web pages. I don't always use exact measurements at this stage, but not having to constantly eyeball vertical and horizontal alignment saves a lot of time.
Copy Paste
A feature that is second nature with Photoshop was also included in Balsamiq; the ability to use the "alt" key to copy and paste elements (individually or grouped). This feature is yet another huge time-saver for designers that use repeated elements within a page design.
Linking with Hyperlinks
For one small job, I was able to use the mock-up software to show how a simple form would work. When other users that have the same software "click" on buttons in the design, they actually can go to other mock-ups, as if it were a working site. This has big advantages for people developing forms, user interfaces and admin components of websites. At this time, I'm the only one using this software in the office, and it is unlikely that our clients will have the software, but I can see that it would be a great feature for certain groups.
Export to PNG and PDF
Once a mock-up is complete, I export the file as a PDF or PNG and create a JPG that clients can view and print. This has become an excellent way to help clients visualize the page design while still giving them free reign to move items around and modify sections without feeling like they're "undoing" a lot of work on our end. Not only do clients feel better about making changes, but we also get an opportunity to hash out design decisions without focusing on imagery and exact content - which tends to bog down productivity.
In short, I highly recommend getting a version of Balsamiq for your design projects if you regularly work on sites from the beginning stages. Once clients see the mock-ups, they tend to feel more confident in your product, and they can visualize design concept more easily. Balsamiq does offer a free demo that is well worth a 5-10 minute tour. Give it a try with your next project and see how you like it.