I have designed a simple website on paper. Now I want to produce a professional-looking document for my customer to approve.

How can I do this?

I've tried Visio, but it seems horribly overcomplicated and unsuitable for my purpose.

I could describe what I've written in words in a Word document but that'd be much harder to read and understand.

enter image description here

  • You can try one of many applications for creating mockups/wireframes (example: mashable.com/2012/06/07/mockup-tools) Some of them have export to PDF (+print + sign) or to HTML (clickable links, etc)
    – dr_bonzo
    Commented Aug 8, 2013 at 16:17
  • 7
    As a side note, don't make the pages look too professional in a mockup. Often business users will consider the appearance of complete to be the same as complete and be very confused why it takes so much longer to add the stuff you can't see. Having something sketchy emphasizes the "this is design, its not done."
    – user40980
    Commented Aug 8, 2013 at 16:23
  • Agree. Sketchy is fine, but it has to look professional.
    – cja
    Commented Aug 8, 2013 at 16:28
  • 1
    possible duplicate of Which format is best for the first prototype not on paper?
    – gnat
    Commented Aug 8, 2013 at 18:10
  • I've just discovered Gliffy (gliffy.com) thanks to Christopher at discuss.bootstrapped.fm/t/… Looks like exactly what I want.
    – cja
    Commented Aug 9, 2013 at 8:43

3 Answers 3


At a previous job, we used Balsamiq. It has a "sketch" look, and fonts that look handwritten, so it's obvious to the client (both consciously and subconsciously) that the prototype is NOT the product. Unlike some other graphics tools, it supports linking and click-through, so your client can "use" your mockup.

Of course, one could also use Delphi, VB6, or Frontpage for quick "clickable" mockups, but the danger there is that the client will not realize (both consciously and subconsciously) that the mockup is just a mockup and not a "prototype" (that could quickly be fleshed out and put in production).

Once upon a time, when dinosaurs roamed the Earth, I once wound up "productizing" an internal test tool that someone in marketing showed to the CEO (because it had some interesting ideas for a future app). The CEO wanted it turned into a product ASAP. Shortly thereafter, we adopted a policy that all prototypes be paper and pencil. If only Balsamiq had been around back then ...

  • Balsamiq rocks. Easy to use, great looking, but it still says "Hey, this is a sketch, not the real thing, OK?". Commented Aug 8, 2013 at 22:07
  • Thanks for writing so much but please reread my question and look at my picture. Are you sure I can reproduce these in the ways you're suggesting?
    – cja
    Commented Aug 9, 2013 at 8:08
  • Picture? What picture? ... Just looked at page source, and apparently WebSense is blocking it. I'll try from home tonight. Commented Aug 9, 2013 at 15:51

I use OmniGraffle (http://www.omnigroup.com/products/omnigraffle/). Specifically, I use it for site wireframes, navigation charts, and any sort of thing I want to rough-out for myself and for clients, so I can get some buy-in from them before I'm too far down the development path. It's very nice.

In a pinch, I have used LucidChart (https://www.lucidchart.com/), which is quite good for a web-based, "freemium" app.

  • OmniGraffle is Mac only. Now you can say I should have told you that before :)
    – cja
    Commented Aug 8, 2013 at 18:00
  • That's why I also recommended LucidChart, which is cross-platform. That's what I use when I don't have access to a Mac. Commented Aug 14, 2013 at 8:54
  • You bet. Hope it works out. Commented Aug 14, 2013 at 14:54

Like Jason Fried suggest in the book "Getting Real", the best thing to do is to go right from paper to HTML/CSS.

Here is a cool article on why you should adopt this practice. Since a lot of tool can generate HTML very quickly and most of designer/programmer will be faster at HTML than any other tool, why play around with gadget and not start creating the real thing right away?

It will take approximately the same amount of time and you will have something done if the project is accepted.

  • 1
    I want to describe what happens in the background too, not just on screen
    – cja
    Commented Aug 9, 2013 at 8:09

Not the answer you're looking for? Browse other questions tagged or ask your own question.