{"id":56,"date":"2009-01-29T15:18:14","date_gmt":"2009-01-29T13:18:14","guid":{"rendered":"http:\/\/jsiegmund.wordpress.com\/?p=56"},"modified":"2013-04-18T18:51:18","modified_gmt":"2013-04-18T17:51:18","slug":"creating-quick-and-easy-application-mock-ups","status":"publish","type":"post","link":"http:\/\/blog.repsaj.nl\/index.php\/2009\/01\/creating-quick-and-easy-application-mock-ups\/","title":{"rendered":"Creating quick and easy application mock-ups"},"content":{"rendered":"<p>When you&#8217;re creating software, it&#8217;s always a good thing to let the people who you&#8217;re creating software for know how it&#8217;s going to look and feel. Not the simplest task at hand; creating a good mock-up of a screen involves some serious thinking and figuring out what a client would like \/ need to have and more importantly: what not. A lot of applications have crowded screens full of data which on first sight doesn&#8217;t make that much sence. In order to avoid a problem during development, it would be a good idea to actually think about those things before starting to implement them.<\/p>\n<p>I usually just used Visual Studio to create some mock-ups, but those forms were mostly working prototypes of the actual implementation. Making those is quite a bit of work which will sometimes be destroyed entirely because your client just doesn&#8217;t like what you&#8217;ve come up with. In order to avoid that you could try your Word, PowerPoint or Photoshop skills, but I found something way better!<\/p>\n<p>A company called <a href=\"http:\/\/www.balsamiq.com\" target=\"_blank\">Balsamiq<\/a>\u00a0has a product called <a href=\"http:\/\/www.balsamiq.com\/products\/mockups\">Balsamiq Mock-ups<\/a>. It&#8217;s a very nifty little program which allows you to create somewhat cartoon-\/drawingstyle mock-ups of your application. Just simple dragging and dropping of components which resemble the components of a real application (textboxes, dropdowns, etc.) is enough to create very nice mock-up images of your application.<\/p>\n<p>Because of the style of those mock-ups, your client will instantly get that this isn&#8217;t actually the finished product but only a view of &#8220;how it&#8217;s going to be&#8221;. That will even change the attitude of the user to switch into a more design \/ lay-out oriented thinking instead of functional questions like &#8220;Where can I enter this?&#8221; or &#8220;What does that button do&#8221;? You and your client can look into the application and don&#8217;t waste too much time on developing things which are\u00a0slayed down later on.<\/p>\n<p>To show you what I mean, here&#8217;s some output:<\/p>\n\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-1' class='gallery galleryid-56 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/afspraak-afspraaktijdschema.png'><img width=\"150\" height=\"150\" src=\"http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/afspraak-afspraaktijdschema-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/filter-custommedewerker-1.png'><img width=\"150\" height=\"150\" src=\"http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/filter-custommedewerker-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/medewerker-werkschema.png'><img width=\"150\" height=\"150\" src=\"http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/medewerker-werkschema-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/planning.png'><img width=\"150\" height=\"150\" src=\"http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/planning-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/afspraak.png'><img width=\"150\" height=\"150\" src=\"http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/afspraak-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/afspraak-afspraakseries.png'><img width=\"150\" height=\"150\" src=\"http:\/\/blog.repsaj.nl\/wp-content\/uploads\/2009\/01\/afspraak-afspraakseries-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p>Now isn&#8217;t that cool, usefull and even better: timesaving!? The folks at Balsamiq have a free online version which you can use and hopefully by writing this blogpost I can shoot at a fully functional version which I would really like to give a try! I&#8217;ll keep u guys posted \ud83d\ude09<\/p>\n<p>Edit: now that&#8217;s what I call fast. Mariah from Balsamiq responded to my e-mail and did indeed send me my licence. So I&#8217;ll be posting some more results in the future I guess. Thanks Balsamiq!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you&#8217;re creating software, it&#8217;s always a good thing to let the people who you&#8217;re creating software for know how it&#8217;s going to look and feel. Not the simplest task at hand; creating a good mock-up of a screen involves some serious thinking and figuring out what a client would like \/ need to have<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[34],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3KFR1-U","_links":{"self":[{"href":"http:\/\/blog.repsaj.nl\/index.php\/wp-json\/wp\/v2\/posts\/56"}],"collection":[{"href":"http:\/\/blog.repsaj.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.repsaj.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.repsaj.nl\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.repsaj.nl\/index.php\/wp-json\/wp\/v2\/comments?post=56"}],"version-history":[{"count":0,"href":"http:\/\/blog.repsaj.nl\/index.php\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.repsaj.nl\/index.php\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.repsaj.nl\/index.php\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.repsaj.nl\/index.php\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}