{"id":28040,"date":"2016-09-21T18:01:59","date_gmt":"2016-09-21T10:01:59","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28040"},"modified":"2022-05-24T00:01:52","modified_gmt":"2022-05-23T16:01:52","slug":"prototyping-tools-designers","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/","title":{"rendered":"7 Prototyping Tools for Web Designers"},"content":{"rendered":"<p>Do you know the difference between <em>wireframe<\/em>, <em>mockup<\/em> and <em>prototype<\/em>? These three terms are often used interchangeably to mean the same thing. The problem is, you shouldn\u2019t.<\/p>\n<p>A <em>wireframe<\/em> is a <strong>static, low-fidelity depiction of a design<\/strong>. It provides an outline of the look or shape of a proposed design, but not its functionality or feel. A <em>mockup<\/em> <strong>provides a greater amount of information<\/strong>. Mockups are <strong>mid- to high-fidelity depictions<\/strong> of a proposed design. Mockups are also static, and <strong>they do not prove interactivity<\/strong>.<\/p>\n<p><em>Prototypes,<\/em> on the other hand, are <strong>dynamic<\/strong>. They can <strong>represent your final design to almost any degree of detail you choose<\/strong>. A prototype can even be tested <strong>as if it were the actual end product<\/strong>, since it can provide the same look and feel. Of the three, the one that would make the most of an impression would be the prototype.<\/p>\n<h2>How to build a prototype?<\/h2>\n<p>Now, the goal of a prototype is to accurately prove selected design features. Prototypes for web or app applications are typically developed in <strong>three<\/strong> stages:<\/p>\n<ol>\n<li>The page flows (how a user might navigate) are sketched out.<\/li>\n<li>Several low-fidelity versions of each page are built and usability tested.<\/li>\n<li>From lessons learned, details are added to create a high-fidelity model of your proposed design.<\/li>\n<\/ol>\n<p>In this post, we will be check out a few prototyping tools that can help ease the process, make things easier and for you to churn out prototypes a lot faster. Here are 7 prototyping tools to try out.<\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.invisionapp.com\/\">InVision<\/a><\/h2>\n<p>InVision is according to Forbes near the top of the list of private cloud companies in the world, alongside luminaries such as Slack, Dropbox, and MailChimp. This honor is due in part to InVision\u2019s \"always-on\" platform, which makes <strong>collaboration, feedback, and the building of high-fidelity prototypes so easy<\/strong>.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.invisionapp.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/invision.jpg\" width=\"1600\" height=\"660\" alt=\"invision\"><\/a><\/figure>\n<p>With InVision, it\u2019s possible to manage project screens and statuses from a single location, collaborate in real time, and maintain version control, while <strong>building pixel-perfect prototypes that have the look and feel of real web and mobile apps<\/strong>. With InVision, you can even <strong>conduct free, unlimited testing<\/strong> on your prototypes.<\/p>\n<p>To discover what the design world and InVision\u2019s more than 2 million users loves about this platform, sign up for a free trial. Just click on the InVision link to get started.<\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/pidoco.com\/enen\/en\/lp\/prototyping\">Pidoco<\/a><\/h2>\n<p>Whether you need a <strong>click-through wireframe<\/strong>, or a <strong>fully-interactive UX prototype<\/strong>, Pidoco will get you there quickly, and without fuss. Starting with the easy sketching feature, you can build a set of <strong>custom templates<\/strong>, create the <strong>interactive elements<\/strong> you need, <strong>present your prototype<\/strong> to others, and await their feedback \u2013 which should not be long in coming.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/pidoco.com\/enen\/en\/lp\/prototyping\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/pidoco.jpg\" width=\"800\" height=\"330\" alt=\"pidoco\"><\/a><\/figure>\n<p>Pidoco gives you everything needed to build low-fidelity prototypes to solicit quick, up-front feedback, or high-fidelity models having the same look and feel as your proposed web or app design. This tool will even generate <strong>specification documents<\/strong> that can serve as blueprints for team members, or can be presented to clients for sign-off.<\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/go\/b\/proto\">Proto.io<\/a><\/h2>\n<p>Proto.io will be an ideal choice if you\u2019re in need of a quality prototyping tool to assist you with your mobile app design activities. Proto.io is a dedicated mobile prototyping platform that <strong>runs on most browsers<\/strong>, <strong>requires no coding<\/strong>, and enables you to <strong>deploy fully-interactive mobile app prototypes<\/strong> and <strong>simulations<\/strong> that have the look and feel of the real thing.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/go\/b\/proto\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/proto-io.jpg\" width=\"800\" height=\"330\" alt=\"proto.io\"><\/a><\/figure>\n<p>Three parts combine to make up this tool: a dashboard, an editor, and a player. The dashboard serves as your master control and project manager. The editor consists of a set of tools to emulate your design and build in the interactions. With the player, you can view your prototype on your web browser, interact with it, solicit feedback, and test it on real mobile devices. If mobile app design is your thing, this is the tool for you.<\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webflow.com\/prototyping\">Webflow<\/a><\/h2>\n<p>For anyone looking for an <strong>all-in-one design, prototyping, and development tool<\/strong>, the search ends here. First of all, with Webflow, you can <strong>build and test the high-fidelity prototypes<\/strong> you need to assist your design efforts. But here\u2019s where the difference comes in \u2013 everything you build is powered by production-ready HTML\/CSS and JavaScript. The result?<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/webflow.jpg\" width=\"800\" height=\"330\" alt=\"webflow\"><\/figure>\n<p>You can <strong>seamlessly move from a fully-interactive prototype to a developed product<\/strong>. Prototype, design and development come in the same package, which also includes the requisite collaboration features and capabilities. And by the way, <strong>everything is responsive<\/strong> as well.<\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.powermockup.com\/\">PowerMockup<\/a><\/h2>\n<p>This specialty prototyping tool kit was developed with the PowerPoint user in mind. PowerMockup is in fact a PowerPoint add-on that you can use to <strong>create wireframes and mockups for websites, desktop apps, or mobile apps<\/strong>. It\u2019s simply a matter of selecting shapes and design elements from the PowerMockup library, and dropping them onto a PowerPoint slide.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/powermockup.jpg\" width=\"800\" height=\"330\" alt=\"powermockup\"><\/figure>\n<p>Then, you can <strong>use PowerPoint\u2019s slideshow and animation features to preview your design with others<\/strong>. You can add your own shapes and elements to the library as well, and share them with other PowerPoint users if you wish.<\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.lucidchart.com\/pages\/\">Lucidchart<\/a><\/h2>\n<p>Lucidchart is an online application featuring a <strong>library of design elements and device types<\/strong> from which you can quickly build wireframes or mockups of your website or mobile app designs. It has a <strong>clean, user-friendly interface<\/strong>, and it features drag and drop technology, <strong>interactive demonstration capabilities<\/strong>, and a layer technology that allows you to build highly-complex simulations.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/lucidchart.jpg\" width=\"800\" height=\"330\" alt=\"lucidchart\"><\/figure>\n<p>Lucidchart is also a handy tool for <strong>creating professional-looking project workflow diagrams and flowcharts<\/strong>, and its collaboration features operate smoothly and are easy to use.<\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.hotgloo.com\/\">HotGloo<\/a><\/h2>\n<p>Emulating a design\u2019s proposed UX can sometimes present challenges. That\u2019s why you need HotGloo. With a huge <strong>element library<\/strong> and <strong>UI widget gallery<\/strong>, <strong>export and share<\/strong> features as well as collaboration with team members it gets you started in almost no time.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/hotgloo.jpg\" width=\"800\" height=\"330\" alt=\"HotGloo\"><\/figure>\n<p>If you have any questions or need any assistance they have a full documentation as well as <strong>helpful video tutorials<\/strong> and <strong>live webinars<\/strong> available. Create your prototypes right in your browser, share them or preview them on any mobile device. You can even <strong>export your work to HTML<\/strong>. Wireframing & prototyping has never been easier and more fun!<\/p>\n<h2> Wrapping up<\/h2>\n<p>There is plenty to choose from this list from tools dedicated to special purposes, to an all-in-one tool that is definitely worth a look. These are all top-quality tools, so there\u2019s no risk involved, and you can always view a demo or ask for a free trial.<\/p>\n<p>These products have a large user base. They are used by or recommended by major companies. So no matter which one you may choose, you\u2019ll find yourself in good company. Whether you are looking for a mockup, wireframe, or prototyping tool, you will find a tool for your needs above.<\/p>","protected":false},"excerpt":{"rendered":"<p>Do you know the difference between wireframe, mockup and prototype? These three terms are often used interchangeably to mean the same thing. The problem is, you shouldn\u2019t. A wireframe is a static, low-fidelity depiction of a design. It provides an outline of the look or shape of a proposed design, but not its functionality or&hellip;<\/p>\n","protected":false},"author":334,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4105],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>7 Prototyping Tools for Web Designers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Do you know the difference between wireframe, mockup and prototype? These three terms are often used interchangeably to mean the same thing. The problem\" \/>\n<meta name=\"robots\" content=\"noindex, nofollow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Prototyping Tools for Web Designers\" \/>\n<meta property=\"og:description\" content=\"Do you know the difference between wireframe, mockup and prototype? These three terms are often used interchangeably to mean the same thing. The problem\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-21T10:01:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-23T16:01:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/invision.jpg\" \/>\n<meta name=\"author\" content=\"Kate Dagli\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kate Dagli\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/\"},\"author\":{\"name\":\"Kate Dagli\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/3e57937b210724347e66aa0eba4f9adf\"},\"headline\":\"7 Prototyping Tools for Web Designers\",\"datePublished\":\"2016-09-21T10:01:59+00:00\",\"dateModified\":\"2022-05-23T16:01:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/\"},\"wordCount\":1116,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/prototyping-tools-designers\\\/invision.jpg\",\"keywords\":[\"bc\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/\",\"name\":\"7 Prototyping Tools for Web Designers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/prototyping-tools-designers\\\/invision.jpg\",\"datePublished\":\"2016-09-21T10:01:59+00:00\",\"dateModified\":\"2022-05-23T16:01:52+00:00\",\"description\":\"Do you know the difference between wireframe, mockup and prototype? These three terms are often used interchangeably to mean the same thing. The problem\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/prototyping-tools-designers\\\/invision.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/prototyping-tools-designers\\\/invision.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/prototyping-tools-designers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"7 Prototyping Tools for Web Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/3e57937b210724347e66aa0eba4f9adf\",\"name\":\"Kate Dagli\",\"description\":\"Kate is a staff writer for Hongkiat.com.\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/katedagli\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"7 Prototyping Tools for Web Designers - Hongkiat","description":"Do you know the difference between wireframe, mockup and prototype? These three terms are often used interchangeably to mean the same thing. The problem","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"en_US","og_type":"article","og_title":"7 Prototyping Tools for Web Designers","og_description":"Do you know the difference between wireframe, mockup and prototype? These three terms are often used interchangeably to mean the same thing. The problem","og_url":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-09-21T10:01:59+00:00","article_modified_time":"2022-05-23T16:01:52+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/invision.jpg","type":"","width":"","height":""}],"author":"Kate Dagli","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Kate Dagli","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/"},"author":{"name":"Kate Dagli","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/3e57937b210724347e66aa0eba4f9adf"},"headline":"7 Prototyping Tools for Web Designers","datePublished":"2016-09-21T10:01:59+00:00","dateModified":"2022-05-23T16:01:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/"},"wordCount":1116,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/invision.jpg","keywords":["bc"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/","url":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/","name":"7 Prototyping Tools for Web Designers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/invision.jpg","datePublished":"2016-09-21T10:01:59+00:00","dateModified":"2022-05-23T16:01:52+00:00","description":"Do you know the difference between wireframe, mockup and prototype? These three terms are often used interchangeably to mean the same thing. The problem","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/invision.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/prototyping-tools-designers\/invision.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-designers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"7 Prototyping Tools for Web Designers"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/3e57937b210724347e66aa0eba4f9adf","name":"Kate Dagli","description":"Kate is a staff writer for Hongkiat.com.","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/katedagli\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7ig","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/334"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28040"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28040\/revisions"}],"predecessor-version":[{"id":59805,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28040\/revisions\/59805"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28040"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}