{"id":253,"date":"2014-05-13T07:44:02","date_gmt":"2014-05-12T21:44:02","guid":{"rendered":"http:\/\/www.reefwing.com.au\/?p=253"},"modified":"2014-05-13T07:44:02","modified_gmt":"2014-05-12T21:44:02","slug":"wire-frame-prototyping-tools","status":"publish","type":"post","link":"https:\/\/www.reefwing.com.au\/?p=253","title":{"rendered":"Wire Frame &#038; Prototyping Tools"},"content":{"rendered":"<p style=\"color: #000000;\"><a href=\"http:\/\/www.reefwing.com.au\/wp-content\/uploads\/2014\/05\/design-evolution.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-254\" src=\"http:\/\/www.reefwing.com.au\/wp-content\/uploads\/2014\/05\/design-evolution.jpg\" alt=\"design-evolution\" width=\"585\" height=\"250\" srcset=\"https:\/\/www.reefwing.com.au\/wp-content\/uploads\/2014\/05\/design-evolution.jpg 585w, https:\/\/www.reefwing.com.au\/wp-content\/uploads\/2014\/05\/design-evolution-300x128.jpg 300w\" sizes=\"auto, (max-width: 585px) 100vw, 585px\" \/><\/a><\/p>\n<p style=\"color: #000000;\">Putting together a rough sketch or wire frame of your app design is always a good idea. Doing this will provide the following advantages:<\/p>\n<ul>\n<li>It will assist you in communicating your idea to the developer, visual designer or others. It is much easier to get feedback on your ideas if you have a straw man to start the discussion with. The wire frame or prototype becomes your app blue print. You wouldn&#8217;t start building a house without plans (hopefully), similarly you should have a set of plans for your app.<\/li>\n<li>It will save you money. It is a lot easier and cheaper to change something in the prototyping phase than it is once the app is finished.<\/li>\n<li>It will save you time. Although taking the time to do a wire frame may seem like more effort, this will be repaid many times over during development and prevents false starts.<\/li>\n<li>It will improve your design. By sketching out the design and explaining how a user will move from screen to screen it will quickly become obvious what will work and what won&#8217;t. Doing this will also prompt other ideas, work as a creative catalyst and ensure that you have thought of every eventuality.<\/li>\n<\/ul>\n<p style=\"color: #000000;\">There are\u00a0many tools and resources available to help make prototyping and generating wire frames easier. Below are 26 resources which can be used to generate your wire frames:<\/p>\n<ol style=\"color: #000000;\">\n<li><a style=\"color: #ff6b5b;\" title=\"Use TPowerPoint, Keynote to Prototype Like a Pro\" href=\"http:\/\/keynotopia.com\/\" target=\"_blank\">Keynotopia<\/a>\u00a0\u2013 Use PowePoint\/Keynote to Prototype Like a Pro<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Rich interactive wireframes to define web and mobile applications\" href=\"http:\/\/www.justinmind.com\/\" target=\"_blank\">Justinmind<\/a>\u00a0\u2013 Rich interactive wireframes to define web and mobile applications<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Mobile prototyping\" href=\"http:\/\/proto.io\/\" target=\"_blank\">Proto.io<\/a>\u00a0&#8211;\u00a0Mobile prototyping<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"UX design tools built by UX designers\" href=\"http:\/\/uxpin.com\/\" target=\"_blank\">UXPin<\/a>\u00a0\u2013 UX design tools built by UX designers<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Turn wireframes into an interactive mobile app prototype\" href=\"http:\/\/www.appgyver.com\/prototyper\" target=\"_blank\">AppGyver\u2019s Prototyper<\/a>\u00a0\u2013 Turn wireframes into an interactive mobile app prototype<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Easy prototyping\" href=\"http:\/\/www.appmockuptools.com\/\" target=\"_blank\">App Mockup Tools<\/a><\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"An iPhone app wireframe kit\" href=\"http:\/\/adamwhitcroft.com\/wirekit\/\" target=\"_blank\">WireKit<\/a>\u00a0\u2013 An iPhone app wireframe kit<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Photoshop panel plugin for iOS developers\" href=\"http:\/\/devrocket.uiparade.com\/\" target=\"_blank\">DevRocket<\/a>\u00a0\u2013 Photoshop panel plugin for iOS developers<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Mobile Prototypes for iOS, Android and Windows Apps\" href=\"https:\/\/www.fluidui.com\/\" target=\"_blank\">Fluid UI<\/a>\u00a0\u2013 Mobile Prototypes for iOS, Android and Windows Apps<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Stencils, sketch pads and accessories for UI design\" href=\"http:\/\/www.uistencils.com\/\" target=\"_blank\">UI Stencils<\/a>\u00a0&#8211;\u00a0Stencils, sketch pads and accessories for UI design<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Advanced iOS mockup generator for mobile applications\" href=\"http:\/\/www.appcooker.com\/\" target=\"_blank\">App Cooker<\/a>\u00a0&#8211;\u00a0Advanced iOS mockup generator for mobile applications<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Quickly create iOS prototypes\" href=\"https:\/\/www.flinto.com\/\" target=\"_blank\">Flinto<\/a>\u00a0\u2013 Quickly create iOS prototypes<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"App icon template for iOS 7\" href=\"http:\/\/appicontemplate.com\/ios7\" target=\"_blank\">App Icon Template<\/a>\u00a0&#8211;\u00a0App icon template for iOS 7<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"UX Metaphor Equivalents for iOS &amp; Android\" href=\"http:\/\/kintek.com.au\/blog\/portkit-ux-metaphor-equivalents-for-ios-and-android\/\" target=\"_blank\">PortKit<\/a>\u00a0\u2013 UX Metaphor Equivalents for iOS &amp; Android<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"iOS 7 Wireframe Kit\" href=\"http:\/\/blakeperdue.com\/ios7-wireframe-kit\/\" target=\"_blank\">iOS 7 Wireframe Kit<\/a><\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Preview your mobile apps directly on your devices\" href=\"http:\/\/www.bohemiancoding.com\/sketch\/mirror\/\" target=\"_blank\">SketchMirror<\/a>\u00a0&#8211;\u00a0Preview your mobile apps directly on your devices<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Prototyping collaboration &amp; Workflow\" href=\"http:\/\/www.invisionapp.com\/\" target=\"_blank\">Invision<\/a>\u00a0\u2013 Free Web &amp; Mobile Mockup and UI Prototyping Tool<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Prototyping tool for animation\" href=\"http:\/\/www.framerjs.com\/\" target=\"_blank\">Framer<\/a>\u00a0\u2013 Prototyping tool for animation and interaction<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Free prototyping tool\" href=\"https:\/\/marvelapp.com\/\" target=\"_blank\">Marvel<\/a>\u00a0\u2013 Free prototyping tool<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"iPhone App Prototyping Made Easy\" href=\"http:\/\/popapp.in\/\" target=\"_blank\">POP (Prototyping on paper)<\/a>\u00a0\u2013 iPhone App Prototyping Made Easy<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Apps for creating mockups on iPhone\" href=\"http:\/\/www.mockabilly.com\/\" target=\"_blank\">Mockabilly<\/a>\u00a0\u2013 App for creating mockups on iPhone<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Advanced mockup and prototyping for iOS\" href=\"http:\/\/interface2.lesscode.co.nz\/\" target=\"_blank\">Interface<\/a>\u00a0\u2013 Advanced mockup and prototyping for iOS<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Mockup iPad app for iPhone and iPad applications\" href=\"http:\/\/www.groosoft.com\/blueprint\/\" target=\"_blank\">Blueprint<\/a>\u00a0\u2013 Mockup iPad app for iPhone and iPad applications<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Turn static designs intro a tappable iPhone prototyp\" href=\"http:\/\/prototypesapp.com\/\" target=\"_blank\">Proptotypes<\/a>\u00a0\u2013 Turn static designs intro a tappable iPhone prototype<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Create mobile interactive prototypes\" href=\"https:\/\/go.fieldtestapp.com\/\" target=\"_blank\">FieldTest<\/a>\u00a0\u2013 Create mobile interactive prototypes<\/li>\n<li><a style=\"color: #ff6b5b;\" title=\"Dotted Paper\" href=\"http:\/\/dottedpaper.com\/\" target=\"_blank\">Dotted Paper<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Putting together a rough sketch or wire frame of your app design is always a good idea. Doing this will provide the following advantages: It will assist you in communicating your idea to the developer, visual designer or others. It is much easier to get feedback on your ideas if you have a straw man [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":254,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[7],"tags":[8,26,9,25,24],"class_list":{"0":"post-253","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-app-development","8":"tag-app","9":"tag-design","10":"tag-development","11":"tag-prototype","12":"tag-wireframe","13":"entry"},"_links":{"self":[{"href":"https:\/\/www.reefwing.com.au\/index.php?rest_route=\/wp\/v2\/posts\/253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.reefwing.com.au\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.reefwing.com.au\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.reefwing.com.au\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.reefwing.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=253"}],"version-history":[{"count":1,"href":"https:\/\/www.reefwing.com.au\/index.php?rest_route=\/wp\/v2\/posts\/253\/revisions"}],"predecessor-version":[{"id":255,"href":"https:\/\/www.reefwing.com.au\/index.php?rest_route=\/wp\/v2\/posts\/253\/revisions\/255"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.reefwing.com.au\/index.php?rest_route=\/wp\/v2\/media\/254"}],"wp:attachment":[{"href":"https:\/\/www.reefwing.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.reefwing.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.reefwing.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}