1

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

closed as off-topic by user40980, Eric King, GlenH7, World Engineer Aug 8 '13 at 19:27

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions asking us to recommend a tool, library or favorite off-site resource are off-topic for Programmers as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – Community, Eric King, GlenH7, World Engineer
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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 Aug 8 '13 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 Aug 8 '13 at 16:23
  • Agree. Sketchy is fine, but it has to look professional. – cja Aug 8 '13 at 16:28
  • 1
    possible duplicate of Which format is best for the first prototype not on paper? – gnat Aug 8 '13 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 Aug 9 '13 at 8:43
5

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?". – Ross Patterson Aug 8 '13 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 Aug 9 '13 at 8:08
  • Picture? What picture? ... Just looked at page source, and apparently WebSense is blocking it. I'll try from home tonight. – Joe Ballard Aug 9 '13 at 15:51
0

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 Aug 8 '13 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. – jamesnotjim Aug 14 '13 at 8:54
  • You bet. Hope it works out. – jamesnotjim Aug 14 '13 at 14:54
-1

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 Aug 9 '13 at 8:09

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