{"id":57980,"date":"2021-11-09T18:01:55","date_gmt":"2021-11-09T10:01:55","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=57980"},"modified":"2022-07-18T20:48:46","modified_gmt":"2022-07-18T12:48:46","slug":"ways-to-streamline-prototyping","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/","title":{"rendered":"5 Essential Ways to Streamline Website Prototyping"},"content":{"rendered":"<p><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/prototyping-tools-practices\/\" rel=\"noopener\">Prototyping<\/a> is essential in any product development workflow. By prototyping websites or apps, you can save time by having a real, workable product in days and weeks, not months. This brings several benefits, such as more extensive user testing before release and more time to refine the product.<\/p>\n<p>I hesitate to call these <em>shortcuts<\/em> because they\u2019re simply parts of a designer\u2019s workflow; however, they do allow you to save a lot of time not doing the more tedious aspects of prototyping and spend more time on the important design details that ensure that your product has a higher chance of success in the long run.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/useful-offline-utensils-and-toolkits-for-designers\/\" class=\"ref-block__link\" title=\"Read More: 20+ Useful Sketching and Prototyping Tools for Designers\" rel=\"bookmark\"><span class=\"screen-reader-text\">20+ Useful Sketching and Prototyping Tools for Designers<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/useful-offline-utensils-and-toolkits-for-designers.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-7287 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/useful-offline-utensils-and-toolkits-for-designers.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">20+ Useful Sketching and Prototyping Tools for Designers<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tMost web designers work on their projects using software and digital resources like wireframes, mockups, and prototypes, etc....\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>1. Use ready-made component and icon libraries<\/h2>\n<p>Using ready-made components helps in speeding up your workflow. Buttons, tables, lists, drop-down menus, and more are all easy to find and easy to use in a prototype. Drag and drop it onto your artboard, set your interaction, and your component is ready to use within minutes.<\/p>\n<p>Furthermore, there can be content-rich components ready to use, such as panels or frames. These all combine to help you reduce time creating individual components.<\/p>\n<p>By dragging and dropping components instead of creating them, you can spend more time on the interactions and in creating your product as lifelike as possible.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ways-to-streamline-prototyping\/ready-made-components.jpg\" alt=\"ready-made components\" width=\"800\" height=\"476\"><\/figure>\n<p>In the below example, I used a ready-made tab, linked to 3 panels deciding on a product\u2019s color. This took me less than 5 minutes to get a usable page up and running for testing. This saves a massive amount of time in getting a usable prototype up and running in only a few minutes.<\/p>\n<p>For prototyping, I use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.mockplus.com\/\">Mockplus<\/a>, primarily because of the massive built-in library of ready-to-use components and icons, helping me save huge amounts of time from the outset. By having components and icons ready to use, you can save tremendous amounts of time while prototyping.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ways-to-streamline-prototyping\/fast-prototyping.jpg\" alt=\"fast prototyping\" width=\"800\" height=\"641\"><\/figure>\n<h2>2. Use templates<\/h2>\n<p>Use ready-made templates (or UI kits) for faster implementation, ensuring you spend less time creating small design details and spend more time creating a more finished product.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-2\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/free-handpicked-ui-kits\/\" class=\"ref-block__link\" title=\"Read More: Free UI Kits For Designers, Vol. 1\" rel=\"bookmark\"><span class=\"screen-reader-text\">Free UI Kits For Designers, Vol. 1<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/free-handpicked-ui-kits.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-21771 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/free-handpicked-ui-kits.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Free UI Kits For Designers, Vol. 1<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tLooking for more UI kits to expand your web designer's library of awesomeness? Well, you came to the...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>By using <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/category\/uiux\/\" rel=\"noopener\">templates or UI kits<\/a>, you can have a usable app in a matter of hours, simply place images and rename components before starting the prototyping. Then you can begin testing out your product.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ways-to-streamline-prototyping\/IOTask%20UI%20Kit.jpg\" alt=\"IOTask UI Kit\" width=\"800\" height=\"420\"><\/figure>\n<p>The shown UI kit is <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.whiteui.store\/iotask-mobile\">IOTask<\/a>. Ready-made templates and UI kits allow you to use the components and guidelines to create a stunning website or app in your own design. The components and guidelines will help save time in creating in-depth graphics and interactive assets.<\/p>\n<p>By simply having to customize a template, your team can spend more time testing it out rather than creating buttons and navigational assets from scratch. There are many free or premium ready-made UI kits, icons, and other UI components based on different themes like restaurant, fashion, or real estate.<\/p>\n<p>Another way of speeding up this process is by using ready-made platform kits. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.adobe.com\/products\/xd\/features\/ui-kits.html\">Adobe XD<\/a> has many ready-made platforms with which you can copy and customize them for your own use. The advantage of these are they are platform-specific so you can create a native-looking app in no time (for apps such as iOS or Android apps).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/ways-to-streamline-prototyping\/adobe-xd.jpg\" width=\"1500\" height=\"981\" alt=\"adobe xd\"><\/figure>\n<p>If you want to ensure your components look and act like a native iPhone or Android app, the components in the platform kit can be ideal. Just copy and use as you need, saving your time and resources.<\/p>\n<p>Thus, by having UI templates and kits, you can spend more time creating a lifelike app rather than spending hours and days creating small design details such as components or icons.<\/p>\n<h2>3. Test within your team from the outset<\/h2>\n<p>Being able to create an app or website that both creates usability and achieves business goals is difficult. By having an early prototype and having a team to test this out with can help mitigate any doubts \u2013 how the public will perceive the product, how people will use it and if there are any potential problems in the navigation.<\/p>\n<p>You can test it out through both qualitative (vocal or written descriptive feedback) and qualitative (testing out with data, such as timings).<\/p>\n<p>By sharing the product with stakeholders and team members, you can get wider feedback immediately, as well as regular, consistent feedback as you further iterate your prototypes and developed product.<\/p>\n<p>Share as much as you can as early as you can. In my experience, I have been using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.mockplus.com\/\">Mockplus<\/a>, and it\u2019s as simple as sharing a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.google.com\">Google Doc<\/a>. Just share the link, set rights, and let my team get on with testing.<\/p>\n<h2>4. Organize artboards for faster architecture implementation<\/h2>\n<p>An overall architecture that is user-friendly is difficult to maintain as your product becomes more complex. There are two ways in which creating storyboards turns out to be pretty useful:<\/p>\n<h3>Creating a page overview<\/h3>\n<p>It allows you to create an overview of the pages with links to one another. This has the added benefit of being able to limit your choices when going in and out of pages, thereby limiting the user to stay as close to the path that you decide \u2013 allowing designers to effectively create strict architecture.<\/p>\n<h3>Checking page links<\/h3>\n<p>By seeing how pages are linked, you can test out your navigation and find inefficiencies.<\/p>\n<p>Furthermore, if you find any issues when testing, you can work to reduce these errors by finding out exactly where testers are getting sidetracked and fixing them.<\/p>\n<h2>5. Create a Resource Hub<\/h2>\n<p>Being able to effectively store and share your resources with developers is an important part of keeping the implementation flow going without any roadblocks.<\/p>\n<p>Keeping assets, Product Requirements Document (PRD), and design systems in one place helps facilitate faster implementation of design details and ensure far less back and forth with designers and PMs.<\/p>\n<p>You don\u2019t need to waste time communicating tiny details \u2013 put everything the developer needs in a document and resource hub, with references linked directly to the prototypes.<\/p>\n<p>Additional items might include a code repository for specific components or design details.<\/p>\n<h2>Wrapping up<\/h2>\n<p>Using these five methods of work in your prototyping will save hours and days of working on prototypes. It isn\u2019t the be-all and end-all of prototyping, but it is going to help save you time creating the prototypes, testing out the prototypes, testing out the navigation, and ensuring any implementation goes smoothly.<\/p>\n<p>Prototyping is all about creating a lifelike app or website. Spending time on the smaller design details reduces your time on iterating and testing, and trying to refine the app. Something that looks good might not test well amongst your team and may have fundamental issues.<\/p>\n<p>With ready-made components along with templates and platform kits, you can design prototypes and native, realistic apps and don\u2019t have to slowly design every detail pixel by pixel. As a result, you can test more, ensure the user navigation is optimized and create a fast designer-dev handoff.<\/p>\n<p>\u2013<\/p>","protected":false},"excerpt":{"rendered":"<p>Prototyping is essential in any product development workflow. By prototyping websites or apps, you can save time by having a real, workable product in days and weeks, not months. This brings several benefits, such as more extensive user testing before release and more time to refine the product. I hesitate to call these shortcuts because&hellip;<\/p>\n","protected":false},"author":566,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[1732,1731],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>5 Essential Ways to Streamline Website Prototyping - Hongkiat<\/title>\n<meta name=\"description\" content=\"Prototyping is essential in any product development workflow. By prototyping websites or apps, you can save time by having a real, workable product in\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Essential Ways to Streamline Website Prototyping\" \/>\n<meta property=\"og:description\" content=\"Prototyping is essential in any product development workflow. By prototyping websites or apps, you can save time by having a real, workable product in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/\" \/>\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=\"2021-11-09T10:01:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-18T12:48:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/ways-to-streamline-prototyping\/ready-made-components.jpg\" \/>\n<meta name=\"author\" content=\"Thomas James\" \/>\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=\"Thomas James\" \/>\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\\\/ways-to-streamline-prototyping\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ways-to-streamline-prototyping\\\/\"},\"author\":{\"name\":\"Thomas James\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/2c38cfab267a316b9feea14e47113943\"},\"headline\":\"5 Essential Ways to Streamline Website Prototyping\",\"datePublished\":\"2021-11-09T10:01:55+00:00\",\"dateModified\":\"2022-07-18T12:48:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ways-to-streamline-prototyping\\\/\"},\"wordCount\":1161,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ways-to-streamline-prototyping\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ways-to-streamline-prototyping\\\/ready-made-components.jpg\",\"keywords\":[\"prototyping\",\"wireframing\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ways-to-streamline-prototyping\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ways-to-streamline-prototyping\\\/\",\"name\":\"5 Essential Ways to Streamline Website Prototyping - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ways-to-streamline-prototyping\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ways-to-streamline-prototyping\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ways-to-streamline-prototyping\\\/ready-made-components.jpg\",\"datePublished\":\"2021-11-09T10:01:55+00:00\",\"dateModified\":\"2022-07-18T12:48:46+00:00\",\"description\":\"Prototyping is essential in any product development workflow. By prototyping websites or apps, you can save time by having a real, workable product in\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ways-to-streamline-prototyping\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ways-to-streamline-prototyping\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ways-to-streamline-prototyping\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ways-to-streamline-prototyping\\\/ready-made-components.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/ways-to-streamline-prototyping\\\/ready-made-components.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ways-to-streamline-prototyping\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Essential Ways to Streamline Website Prototyping\"}]},{\"@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\\\/2c38cfab267a316b9feea14e47113943\",\"name\":\"Thomas James\",\"description\":\"Thomas is a London-based designer and product ops specialist working with product design teams. With several years of experience working in e-commerce UX and later working in product design. Thomas helps create successful products by optimizing design workflows between designers, product managers, and developers to ensure business and design interests are aligned.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thomasjames\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Essential Ways to Streamline Website Prototyping - Hongkiat","description":"Prototyping is essential in any product development workflow. By prototyping websites or apps, you can save time by having a real, workable product in","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/","og_locale":"en_US","og_type":"article","og_title":"5 Essential Ways to Streamline Website Prototyping","og_description":"Prototyping is essential in any product development workflow. By prototyping websites or apps, you can save time by having a real, workable product in","og_url":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-11-09T10:01:55+00:00","article_modified_time":"2022-07-18T12:48:46+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/ways-to-streamline-prototyping\/ready-made-components.jpg","type":"","width":"","height":""}],"author":"Thomas James","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thomas James","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/"},"author":{"name":"Thomas James","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/2c38cfab267a316b9feea14e47113943"},"headline":"5 Essential Ways to Streamline Website Prototyping","datePublished":"2021-11-09T10:01:55+00:00","dateModified":"2022-07-18T12:48:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/"},"wordCount":1161,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ways-to-streamline-prototyping\/ready-made-components.jpg","keywords":["prototyping","wireframing"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/","url":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/","name":"5 Essential Ways to Streamline Website Prototyping - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/ways-to-streamline-prototyping\/ready-made-components.jpg","datePublished":"2021-11-09T10:01:55+00:00","dateModified":"2022-07-18T12:48:46+00:00","description":"Prototyping is essential in any product development workflow. By prototyping websites or apps, you can save time by having a real, workable product in","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/ways-to-streamline-prototyping\/ready-made-components.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/ways-to-streamline-prototyping\/ready-made-components.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/ways-to-streamline-prototyping\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"5 Essential Ways to Streamline Website Prototyping"}]},{"@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\/2c38cfab267a316b9feea14e47113943","name":"Thomas James","description":"Thomas is a London-based designer and product ops specialist working with product design teams. With several years of experience working in e-commerce UX and later working in product design. Thomas helps create successful products by optimizing design workflows between designers, product managers, and developers to ensure business and design interests are aligned.","url":"https:\/\/www.hongkiat.com\/blog\/author\/thomasjames\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-f5a","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/57980","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\/566"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=57980"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/57980\/revisions"}],"predecessor-version":[{"id":57981,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/57980\/revisions\/57981"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=57980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=57980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=57980"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=57980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}