Website Mock-up Tools?

I need to do a mock-up of a website for a proposal. We’re basically making recommendations to our client of the features we’d like to see.

What are some of the tools that are used to present a proposed layout? I’ve started using Visio, but I’m not sure that it is the right tool for the job.

Visio would probably do a decent job of showing the areas of the page that you’d like to see.

Personally I’d use Photoshop for both a layout showing areas of a page as well as a detailed design.

If you don’t mind going low tech, you can always go with a pen and paper. I find I am much more productive making a UI mock-up on paper than in with any graphics package.

Doing the same thing … pen and paper , and i think its (maybe?) the best way … and its faster then doing it in any graphic program…

Personally, I use Photoshop to create mock-ups. But it really depends on your own style. You might more comfortable with a paper and pen.

Also, GIMP ( might be an alternative specially if you have no previous experience with Photoshop and don’t feel like spending the bucks on it. Just my two cents…

I have found that BAR NONE, the BEST MOCKUP TOOL FOR WEBSITES is Balsamiq.

It’s an adobe Air based app designed by a Micro ISV, Peldi is his name (an Ex Adobe guy) and I have to say it’s by far the easiest tool I’ve ever used.

His support is awesome and the tool just keeps getting better and better.

I’ve converted my entire production process around based on it.

In addition to being a quick drag and drop tool to mock up page layouts (it has all the buttons, players, datagrids etc… that you’ll ever need) the really cool part is that it exports an XML schema that my designers/developers can use right away to start building the app to my specs.

Check it out here:

I use Inkscape, a vector tool -

I always use a pencil and paper and draft up the basic design before mocking it up in a graphic design program.

I think, the Adobe Fireworks is better one as this was designed specifically for creating graphics for the Internet. It is very easy to learn and use.

I love Photoshop for mock ups, but I just plain love Photoshop to begin with so I am a little biased.

Photoshop is the best.

In the mock ups I have done I hand draw the site or page whilst talking to the customer (I also take some examples of sites, colours and layout in hard copy) then I just draw it up in photoshop.

ooohhhh that does sound good…I’m going to have a little look :slight_smile:

I hand draw my mockups and then usually whip them up in Photoshop.

I have not used Visio before but I think it is for high end data projects. Correct me if I am wrong but Visio is an advanced data modeling program, maybe good for a website database, but for a website layout something like photoshop or fireworks would be best as they are graphic based which you should use for your GUI/layout.

Yes visio is more for database driven projects or something on the larger side of things.

PS or pen and paper are nice to use but it all depends on you… what’s easier to mock up, modify, and communicate with everyone involved?

I usually start off with a quick design on a napkin then transfer it over to PS wireframe so it can be stored/emailed/modified in digital form.

Try DesignerVista for Websites GUI Mockups.

Are you looking to do mockups or wireframing/general layout?

For mockups I would use photoshop as suggested.

For basic wireframing to get your ideas across as far as GUI and UX, I use Evolus Pencil.

As the original post was in 2007, somehow I don’t think he/she’s all that interested any more…

and we all know what sort of person revives a thread started four years ago…