<p>When prototyping initial GUI functionality with a customer is it better to use a pen/paper drawing or to mock something up using a tool and show them that ?</p>

<p>The argument against a tool generated design being that the customer can sometimes focus on the low-level specifics of the mock-up rather than taking a higher level functional view of the GUI overall.</p>

[{'answer_id': 3782, 'author': 'Zack Peterson', 'author_id': 83, 'author_profile': 'https://Stackoverflow.com/users/83', 'pm_score': 5, 'selected': True, 'text': '<p>Always start with paper or paper-like mock-ups first.  You do not want to fall into a trap of giving the impression of completeness when the back-end is completely hollow.</p>\n\n<p>A polished prototype or pixel-perfect example puts too much emphasis on the design.  With an obvious sketch, you have a better shot of discussing desired functionality and content rather than colors, photos, and other stylistic matters.  There will be time for that discussion later in the project.</p>\n\n<p>Jeff discusses paper prototyping in his Coding Horror article <a href="http://www.codinghorror.com/blog/archives/001091.html" rel="noreferrer">UI-First Software Development</a></p>\n\n<p>Click the "Watch a video!" link at <a href="http://twitter.com/" rel="noreferrer">twitter.com</a> to see an interesting take on the idea from <a href="http://www.commoncraft.com/" rel="noreferrer">Common Craft</a>.</p>\n'}, {'answer_id': 3784, 'author': 'Mike Stone', 'author_id': 122, 'author_profile': 'https://Stackoverflow.com/users/122', 'pm_score': 2, 'selected': False, 'text': '<p>There is a book called <a href="https://rads.stackoverflow.com/amzn/click/com/1558608702" rel="nofollow noreferrer" rel="nofollow noreferrer">Paper Prototyping</a> which details pen and paper drawing and what you can gain from it.  I think it has a lot of benefits, particularly that you can, very early on (and easily), modify what the end result will be without much effort, and then start off on the right foot.</p>\n'}, {'answer_id': 3786, 'author': 'Brandon Wood', 'author_id': 423, 'author_profile': 'https://Stackoverflow.com/users/423', 'pm_score': 2, 'selected': False, 'text': '<p>A basic paper version is the way to go for an initial mock-up.  It\'s been my experience that if you do a "real" mock-up, even if you explain to the customer that it\'s a non-functional mock-up, they are confused when things don\'t work.</p>\n\n<p>Bottom line: keep it as simple as possible.  If it\'s on paper, there is no way the customer will confuse it with a working product.</p>\n'}, {'answer_id': 3800, 'author': 'Wally Lawless', 'author_id': 37, 'author_profile': 'https://Stackoverflow.com/users/37', 'pm_score': 2, 'selected': False, 'text': "<p>For the first draft, I prefer to use graph paper (the stuff with a grid printed on it) and a pencil.  The graph paper is great for helping to maintain proportions.  Once the client and I have come to a conclusion I'll usually fill in the drawing with pen since pencil is prone to fading.    </p>\n\n<p>When I actually get around to building the digital prototype, I'll scan in the hand-drawn one and use it as a background template.  Seems to work pretty well for me.</p>\n"}, {'answer_id': 3872, 'author': 'Dylan Bennett', 'author_id': 551, 'author_profile': 'https://Stackoverflow.com/users/551', 'pm_score': 4, 'selected': False, 'text': '<p>The <a href="http://napkinlaf.sourceforge.net/" rel="nofollow noreferrer">"Napkin Look &amp; Feel"</a> for Java is really cool for prototyping. An actual, functioning, clickable app that looks like it was drawn on a napkin. Check out this screenshot:</p>\n\n<p><img src="https://i.stack.imgur.com/0vyVy.jpg" alt="Napkin Look and Feel"></p>\n\n<p>Seriously, how cool is that?</p>\n'}, {'answer_id': 202911, 'author': 'rshimoda', 'author_id': 23297, 'author_profile': 'https://Stackoverflow.com/users/23297', 'pm_score': 1, 'selected': False, 'text': "<p>I've recenly used a windows App to prototype an application to a customer (the final interface has to be integrated into a website).</p>\n\n<p>At first people thought that it would be the last version and they started to make very heavy criticism from the way controls were displayed to the words I had used (terminology and stuff) and the meeting time ended before we could even discuss the functionality itself.</p>\n\n<p>That discussion dragged on for days and days until I told them that, being a mock (and not a final application) all input is welcome but we had to focus on the functionalities first and then we could move on to look and feel as well as terminology issues.</p>\n\n<p>From thay meeting on I am always terrified of prototypes and mock-ups... Perhaps I should just have given them something made in visio instead.</p>\n"}, {'answer_id': 340481, 'author': 'user20804', 'author_id': 20804, 'author_profile': 'https://Stackoverflow.com/users/20804', 'pm_score': 2, 'selected': False, 'text': '<p>I think it is best to start with Paper/Whiteboards/White walls.</p>\n\n<p>Once you have the basic structure, you can move it to Visio with the wireframe stencils  </p>\n\n<ul>\n<li>(<a href="http://developer.yahoo.com/ypatterns/wireframes/" rel="nofollow noreferrer">Download a Stencil Kit</a>)</li>\n<li>(<a href="http://nickfinck.com/stencils/" rel="nofollow noreferrer">Visio Stencils for Information Architects</a>). </li>\n</ul>\n\n<p>Or you could use Denim (<a href="http://dub.washington.edu:2007/denim/" rel="nofollow noreferrer">An Informal Tool For Early Stage Web Site and UI Design</a>) with a tablet PC or Wacom tablets to design the GUI and run it as HTML website.</p>\n'}, {'answer_id': 340552, 'author': 'Rad', 'author_id': 1349, 'author_profile': 'https://Stackoverflow.com/users/1349', 'pm_score': 3, 'selected': False, 'text': '<p>I would suggest you sit down with your client and use a tool like <a href="http://mockupscreens.com/" rel="noreferrer">Mockupscreens</a> and develop the UI interactively. A benefit it has over Napkin LAF is that it does not require coding, or indeed development tools of any kind</p>\n'}, {'answer_id': 341518, 'author': 'Peter Severin', 'author_id': 22716, 'author_profile': 'https://Stackoverflow.com/users/22716', 'pm_score': 2, 'selected': False, 'text': '<p><a href="http://wireframesketcher.com" rel="nofollow noreferrer">WireframeSketcher</a> is a tool that helps quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It comes both as a <strong>standalone</strong> version and as a <strong>plug-in</strong> for Eclipse IDEs. It has some distinctive features like storyboards, components, linking and vector PDF export. Among supported IDEs are are Aptana, Flash Builder, Zend Studio and Rational Application Developer.</p>\n\n<p><a href="https://i.stack.imgur.com/clCOj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/clCOj.png" alt="Sample WireframeSketcher mockup"></a><br>\n<sub>(source: <a href="http://wireframesketcher.com/samples/Website.png" rel="nofollow noreferrer">wireframesketcher.com</a>)</sub>  </p>\n'}, {'answer_id': 1255613, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>You can try out <a href="http://www.foreui.com/" rel="nofollow noreferrer">ForeUI</a>, it allow prototyping with different styles, what\'s more, it can make interactive prototype and run it in browser.</p>\n'}, {'answer_id': 1255651, 'author': 'Gord', 'author_id': 12560, 'author_profile': 'https://Stackoverflow.com/users/12560', 'pm_score': 3, 'selected': False, 'text': '<p>Check out <a href="http://www.balsamiq.com/" rel="noreferrer">Balsamiq</a></p>\n\n<p>It does the "THIS IS NOT A FUNCTIONAL APP" napkin view very well and is easy to use.</p>\n\n<p>Has a full featured <a href="http://www.balsamiq.com/demos/mockups/Mockups.html" rel="noreferrer">demo</a> you can try out online and as an added bonus you can email your XML to your client and they can tweak it and play with it and email it back to you without having to have a license.</p>\n'}, {'answer_id': 1826284, 'author': 'Jan', 'author_id': 222123, 'author_profile': 'https://Stackoverflow.com/users/222123', 'pm_score': 0, 'selected': False, 'text': '<p>For a non-installation browser based tool you can try <a href="http://www.draft-it.com" rel="nofollow noreferrer" title="draft-it">draft-it</a> </p>\n\n<p>It\'s free - and if you have a gmail account - no registration is needed. </p>\n\n<p>Makes interactive/Step by Step Or Slide Show- prototypes. You can share your protoype with anyone you choose by just sending a link. </p>\n\n<p>Works for us ...</p>\n'}]
['https://Stackoverflow.com/questions/3781', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/381/']